first html tests and js fixes

MissNationBlazor.sln

@@ -5,13 +5,13 @@ VisualStudioVersion = 17.8.34330.188
 MinimumVisualStudioVersion = 10.0.40219.1
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MissNationBlazorHybrid", "MissNationBlazorHybrid\MissNationBlazorHybrid.csproj", "{E377A199-D954-46C6-9215-74DAB8797DA4}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "MissNationBlazorWASM.Server", "MissNationBlazorWASM\Server\MissNationBlazorWASM.Server.csproj", "{FCD7F411-3582-4806-9400-A421FDC0FF7F}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MissNationBlazorWASM.Server", "MissNationBlazorWASM\Server\MissNationBlazorWASM.Server.csproj", "{FCD7F411-3582-4806-9400-A421FDC0FF7F}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "MissNationBlazorWASM.Client", "MissNationBlazorWASM\Client\MissNationBlazorWASM.Client.csproj", "{4B5DACA3-8934-4CB7-93C7-3F21EE7DAEAA}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MissNationBlazorWASM.Client", "MissNationBlazorWASM\Client\MissNationBlazorWASM.Client.csproj", "{4B5DACA3-8934-4CB7-93C7-3F21EE7DAEAA}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "MissNationBlazorWASM.Shared", "MissNationBlazorWASM\Shared\MissNationBlazorWASM.Shared.csproj", "{5C293928-B477-4AA9-832B-16E1D6F45A5C}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MissNationBlazorWASM.Shared", "MissNationBlazorWASM\Shared\MissNationBlazorWASM.Shared.csproj", "{5C293928-B477-4AA9-832B-16E1D6F45A5C}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "MissNationSharedUI", "MissNationSharedUI\MissNationSharedUI.csproj", "{B7790887-D399-4AA6-B3F4-2C332D83C637}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MissNationSharedUI", "MissNationSharedUI\MissNationSharedUI.csproj", "{B7790887-D399-4AA6-B3F4-2C332D83C637}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution

MissNationBlazorHybrid/wwwroot/index.html

@@ -4,11 +4,37 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
     <title>MissNationBlazorHybrid</title>
+
+    <!-- inject:css -->
+    <link rel="stylesheet" href="_content/MissNationSharedUI/assets/vendor/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="_content/MissNationSharedUI/assets/vendor/animate/animate.css">
+    <link rel="stylesheet" href="_content/MissNationSharedUI/assets/vendor/elasic-slider/elastic.css">
+    <link rel="stylesheet" href="_content/MissNationSharedUI/assets/vendor/iconmoon/linea-icon.css">
+    <link rel="stylesheet" href="_content/MissNationSharedUI/assets/vendor/magnific-popup/magnific-popup.css">
+    <link rel="stylesheet" href="_content/MissNationSharedUI/assets/vendor/owl-carousel/owl.carousel.css">
+    <link rel="stylesheet" href="_content/MissNationSharedUI/assets/vendor/owl-carousel/owl.theme.css">
+    <link rel="stylesheet" href="_content/MissNationSharedUI/assets/vendor/font-awesome/css/font-awesome.min.css">
+    <link rel="stylesheet" href="_content/MissNationSharedUI/assets/css/shortcodes.css">
+    <link rel="stylesheet" href="_content/MissNationSharedUI/assets/css/style.css">
+    <link rel="stylesheet" href="_content/MissNationSharedUI/assets/css/default-theme.css">
+    <!-- endinject -->
+    <!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
+    <link rel="stylesheet" type="text/css" href="_content/MissNationSharedUI/assets/vendor/slider-revolution/css/extralayers.css" media="screen">
+    <link rel="stylesheet" type="text/css" href="_content/MissNationSharedUI/assets/vendor/slider-revolution/css/settings.css" media="screen">
+    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!--[if lt IE 9]>
+    <script src="_content/MissNationSharedUI/assets/vendor/backward/html5shiv.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/backward/respond.min.js"></script>
+    <![endif]-->
+
+
     <base href="/" />
     <link rel="stylesheet" href="_content/MissNationSharedUI/css/bootstrap/bootstrap.min.css" />
     <link rel="stylesheet" href="MissNationBlazorHybrid.styles.css" />
     <link rel="stylesheet" href="css/app.css" />
-    <link rel="icon" type="image/png" href="favicon.png" />
+    <link rel="icon" type="image/png" href="_content/MissNationSharedUI/assets/favicon.png" />
+
+    
 </head>
 
 <body>
@@ -23,8 +49,134 @@
         <a class="dismiss">🗙</a>
     </div>
 
+
+
+    <script src="https://maps.google.com/maps/api/js?sensor=false&key=AIzaSyBvoxNVNChCmTJqmmLFKEu_QyakDi5wOds"></script>
+    <!-- inject:js -->
+    <script src="_content/MissNationSharedUI/assets/vendor/modernizr/modernizr.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/jquery/jquery-1.10.2.min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/bootstrap/js/bootstrap.min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/bootstrap-validator/validator.min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/breakpoint/breakpoint.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/count-to/jquery.countTo.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/countdown/jquery.countdown.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/easing/jquery.easing.1.3.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/easy-pie-chart/jquery.easypiechart.min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/elasic-slider/jquery.eislideshow.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/flex-slider/jquery.flexslider-min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/gmap/jquery.gmap.min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/images-loaded/imagesloaded.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/isotope/jquery.isotope.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/mailchimp/jquery.ajaxchimp.min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/menuzord/menuzord.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/nav/jquery.nav.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/owl-carousel/owl.carousel.min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/parallax-js/parallax.min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/smooth/smooth.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/sticky/jquery.sticky.min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/touchspin/touchspin.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/typist/typist.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/visible/visible.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/wow/wow.min.js"></script>
+    <!-- endinject -->
+    <!-- SLIDER REVOLUTION 4.x SCRIPTS  -->
+    <script src="_content/MissNationSharedUI/assets/vendor/slider-revolution/js/jquery.themepunch.tools.min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/slider-revolution/js/jquery.themepunch.revolution.min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/js/scripts.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
+
+
+
+
+    <!-- SLIDER REVOLUTION INIT  -->
+    <script type="text/javascript">
+        jQuery(document).ready(function () {
+
+            jQuery('.tp-banner').show().revolution({
+                dottedOverlay: "none",
+                delay: 7000,
+                // startwidth:1170,
+                // startheight:700,
+                hideThumbs: 200,
+
+                thumbWidth: 100,
+                thumbHeight: 50,
+                thumbAmount: 5,
+
+                navigationType: "bullet",
+                navigationArrows: "solo",
+                navigationStyle: "preview4",
+
+                touchenabled: "on",
+                onHoverStop: "on",
+
+                swipe_velocity: 0.7,
+                swipe_min_touches: 1,
+                swipe_max_touches: 1,
+                drag_block_vertical: false,
+
+                parallax: "mouse",
+                parallaxBgFreeze: "on",
+                parallaxLevels: [7, 4, 3, 2, 5, 4, 3, 2, 1, 0],
+
+                keyboardNavigation: "off",
+
+                navigationHAlign: "center",
+                navigationVAlign: "bottom",
+                navigationHOffset: 0,
+                navigationVOffset: 20,
+
+                soloArrowLeftHalign: "left",
+                soloArrowLeftValign: "center",
+                soloArrowLeftHOffset: 20,
+                soloArrowLeftVOffset: 0,
+
+                soloArrowRightHalign: "right",
+                soloArrowRightValign: "center",
+                soloArrowRightHOffset: 20,
+                soloArrowRightVOffset: 0,
+
+                shadow: 0,
+                fullWidth: "on",
+                autoHeight: "on",
+                fullScreen: "on",
+
+                spinner: "spinner4",
+
+                stopLoop: "off",
+                stopAfterLoops: -1,
+                stopAtSlide: -1,
+
+                shuffle: "off",
+
+                autoHeight: "off",
+                forceFullWidth: "off",
+
+                hideThumbsOnMobile: "off",
+                hideNavDelayOnMobile: 1500,
+                hideBulletsOnMobile: "off",
+                hideArrowsOnMobile: "off",
+                hideThumbsUnderResolution: 0,
+
+                hideSliderAtLimit: 0,
+                hideCaptionAtLimit: 0,
+                hideAllCaptionAtLilmit: 0,
+                startWithSlide: 0,
+                videoJsPath: "slider-revolution/videojs/",
+                fullScreenOffsetContainer: ""
+            });
+
+        }); //ready
+    </script>
+
+
     <script src="_framework/blazor.webview.js" autostart="false"></script>
 
+
+
+
 </body>
 
 </html>

MissNationBlazorWASM/Client/wwwroot/index.html

@@ -4,16 +4,45 @@
 <head>
     <meta charset="utf-8" />
     <title>MissNationBlazorWASM</title>
+
+
+    <!-- inject:css -->
+    <link rel="stylesheet" href="_content/MissNationSharedUI/assets/vendor/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="_content/MissNationSharedUI/assets/vendor/animate/animate.css">
+    <link rel="stylesheet" href="_content/MissNationSharedUI/assets/vendor/elasic-slider/elastic.css">
+    <link rel="stylesheet" href="_content/MissNationSharedUI/assets/vendor/iconmoon/linea-icon.css">
+    <link rel="stylesheet" href="_content/MissNationSharedUI/assets/vendor/magnific-popup/magnific-popup.css">
+    <link rel="stylesheet" href="_content/MissNationSharedUI/assets/vendor/owl-carousel/owl.carousel.css">
+    <link rel="stylesheet" href="_content/MissNationSharedUI/assets/vendor/owl-carousel/owl.theme.css">
+    <link rel="stylesheet" href="_content/MissNationSharedUI/assets/vendor/font-awesome/css/font-awesome.min.css">
+    <link rel="stylesheet" href="_content/MissNationSharedUI/assets/css/shortcodes.css">
+    <link rel="stylesheet" href="_content/MissNationSharedUI/assets/css/style.css">
+    <link rel="stylesheet" href="_content/MissNationSharedUI/assets/css/default-theme.css">
+    <!-- endinject -->
+    <!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
+    <link rel="stylesheet" type="text/css" href="_content/MissNationSharedUI/assets/vendor/slider-revolution/css/extralayers.css" media="screen">
+    <link rel="stylesheet" type="text/css" href="_content/MissNationSharedUI/assets/vendor/slider-revolution/css/settings.css" media="screen">
+    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!--[if lt IE 9]>
+    <script src="_content/MissNationSharedUI/assets/vendor/backward/html5shiv.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/backward/respond.min.js"></script>
+    <![endif]-->
+
+
     <base href="/" />
     <link href="_content/MissNationSharedUI/css/app.css" rel="stylesheet" />
     <link href="_content/MissNationSharedUI/css/bootstrap/bootstrap.min.css" rel="stylesheet" />
     <link href="MissNationBlazorWasm.Client.styles.css" rel="stylesheet" />
-
+    <link rel="icon" type="image/png" href="_content/MissNationSharedUI/assets/favicon.png" />
     <!-- If you add any scoped CSS files, uncomment the following to load them
     <link href="MissNationBlazorWASM.Client.styles.css" rel="stylesheet" /> -->
+    
+
 </head>
 
 <body>
+
+
     <div id="app">Loading...</div>
 
     <div id="blazor-error-ui">
@@ -21,7 +50,53 @@
         <a href="" class="reload">Reload</a>
         <a class="dismiss">🗙</a>
     </div>
-    <script src="_framework/blazor.webassembly.js"></script>
+
+
+
+
+
+    <!-- inject:js -->
+    <script src="_content/MissNationSharedUI/assets/vendor/modernizr/modernizr.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/jquery/jquery-1.10.2.min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/images-loaded/imagesloaded.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/sticky/jquery.sticky.min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/nav/jquery.nav.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/flex-slider/jquery.flexslider-min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/menuzord/menuzord.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
+    <!--script src="_content/MissNationSharedUI/assets/vendor/breakpoint/breakpoint.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/count-to/jquery.countTo.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/countdown/jquery.countdown.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/easing/jquery.easing.1.3.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/easy-pie-chart/jquery.easypiechart.min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/elasic-slider/jquery.eislideshow.js"></script>
+
+    <script src="_content/MissNationSharedUI/assets/vendor/gmap/jquery.gmap.min.js"></script>
+
+    <script src="_content/MissNationSharedUI/assets/vendor/isotope/jquery.isotope.js"></script>
+
+    <script src="_content/MissNationSharedUI/assets/vendor/mailchimp/jquery.ajaxchimp.min.js"></script>
+
+
+    <script src="_content/MissNationSharedUI/assets/vendor/owl-carousel/owl.carousel.min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/parallax-js/parallax.min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/smooth/smooth.js"></script>
+
+    <script src="_content/MissNationSharedUI/assets/vendor/touchspin/touchspin.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/typist/typist.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/visible/visible.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/wow/wow.min.js"></script>
+    <!-- endinject -->
+    <!-- SLIDER REVOLUTION 4.x SCRIPTS  -->
+    <script src="_content/MissNationSharedUI/assets/vendor/slider-revolution/js/jquery.themepunch.tools.min.js"></script>
+    <script src="_content/MissNationSharedUI/assets/vendor/slider-revolution/js/jquery.themepunch.revolution.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
+    
+
+    <script src="_framework/blazor.webassembly.js" autostart="true"></script>
+    <script src="_content/MissNationSharedUI/assets/js/scripts.js"></script>
+
 </body>
 
 </html>

MissNationBlazorWASM/Server/MissNationBlazorWASM.Server.csproj

@@ -15,4 +15,7 @@
     <ProjectReference Include="..\Shared\MissNationBlazorWASM.Shared.csproj" />
   </ItemGroup>
 
+	<PropertyGroup>
+		<AllowUnsafeBlocks>true</AllowUnsafeBlocks>
+	</PropertyGroup>
 </Project>

MissNationSharedUI/MissNationSharedUI.csproj

@@ -15,4 +15,12 @@
     <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.0" />
   </ItemGroup>
 
+  <ItemGroup>
+    <None Include="wwwroot\assets\css\.DS_Store" />
+    <None Include="wwwroot\assets\js\.DS_Store" />
+    <None Include="wwwroot\assets\sass\pages\.DS_Store" />
+    <None Include="wwwroot\assets\vendor\.DS_Store" />
+    <None Include="wwwroot\assets\vendor\bootstrap\.DS_Store" />
+  </ItemGroup>
+
 </Project>

MissNationSharedUI/Shared/Components/Layout/MainLayout.razor

@@ -1,17 +1,54 @@
 @inherits LayoutComponentBase
+@using System.Runtime.InteropServices.JavaScript
 
-<div class="page">
+<!--  preloader start>
-    <div class="sidebar">
+    <div id="tb-preloader">
-        <NavMenu />
+        <div class="tb-preloader-wave"></div>
     </div>
+    < preloader end -->
+
+
+    <div class="wrapper">
+<!--div class="page"-->
+    
 
     <main>
-        <div class="top-row px-4">
+        <!--div class="top-row px-4">
             <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
-        </div>
+        </div-->
-
+        <Navbar/>
         <article class="content px-4">
             @Body
         </article>
     </main>
 </div>
+
+@code {
+
+    [Inject]
+    public IJSRuntime JSRuntime { get; set; }
+
+    private IJSObjectReference _jsModule;
+
+    /*protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        base.OnAfterRender(firstRender);
+
+        if (firstRender)
+        {
+            _jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/MissNationSharedUI/assets/exampleJsInterop.js");
+            await _jsModule.InvokeVoidAsync("getMessage");
+        }
+    }*/
+
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+        _jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/MissNationSharedUI/assets/exampleJsInterop.js");
+        await _jsModule.InvokeVoidAsync("getMessage");
+    }
+
+}
+
+
+

MissNationSharedUI/Shared/Components/Layout/Navbar.razor

@@ -0,0 +1,42 @@
+<header class="l-header">
+
+    <div class="l-navbar l-navbar_expand l-navbar_t-light l-navbar_s-center js-navbar-sticky">
+        <div class="container">
+            <nav class="menuzord js-primary-navigation poppins" role="navigation" aria-label="Primary Navigation">
+
+                <!--logo start-->
+                <a href="index.html" class="logo-brand">
+                    <img class="retina" src="_content/MissNationSharedUI/assets/img/logohotel1.png" alt="Massive">
+                </a>
+                <!--logo end-->
+                <!--mega menu start-->
+                <ul class="menuzord-menu menuzord-right c-nav_s-standard">
+                    <li class="active"><a href="apply.html">Apply</a></li>
+
+
+
+                    <li class=""><a href="gallery.html">Gallery</a></li>
+
+
+                    <li class=""><a href="contact.html">Contact</a></li>
+
+                    <li class=""><a href="#">Help</a></li>
+                </ul>
+
+                <ul class="menuzord-menu menuzord-right c-nav_s-standard">
+                    <li> <a href="https://www.facebook.com/missnationglobal/"><i class="fa fa-facebook"></i></a> </li>
+                    <li> <a href="https://www.instagram.com/missnation/"><i class="fa fa-instagram"></i></a> </li>
+                    <li> <a href="https://www.youtube.com/channel/UC-na-dYxv5d4WncYg2akutQ"><i class="fa fa-youtube"></i></a> </li>
+                </ul>
+
+            </nav>
+
+
+        </div>
+    </div>
+
+</header>
+
+@code {
+
+}

MissNationSharedUI/Shared/Components/Layout/Navbar1.razor

@@ -0,0 +1,42 @@
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="#">Navbar</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNavDropdown">
+            <ul class="navbar-nav">
+                <li class="nav-item">                   
+                        <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+                            <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Index
+                        </NavLink>                 
+                </li>
+                <li class="nav-item">
+                    <NavLink class="nav-link" href="home">
+                        <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Home
+                    </NavLink>
+                </li>
+                <li class="nav-item">
+                    <NavLink class="nav-link" href="counter">
+                        <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
+                    </NavLink>
+                </li>
+                <li class="nav-item">
+                    <NavLink class="nav-link" href="weather">
+                        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
+                    </NavLink>
+                </li>
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                        Dropdown link
+                    </a>
+                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+                        <li><a class="dropdown-item" href="#">Action</a></li>
+                        <li><a class="dropdown-item" href="#">Another action</a></li>
+                        <li><a class="dropdown-item" href="#">Something else here</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>

MissNationSharedUI/Shared/Components/Pages/Home.razor

@@ -1,4 +1,4 @@
-@page "/"
+@page "/home"
 
 <h1>Hello, world!</h1>
 

MissNationSharedUI/Shared/Components/Pages/Index.razor

@@ -0,0 +1,311 @@
+@page "/"
+<!--hero section-->
+        <div class="banner-state vertical-align banner-p height-600">
+            <div class="container-mid">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-md-6 ">
+                            <div class="banner-title">
+                                <p>&#10077; Unfortunately, nowadays most of the healthy and beautiful girls, are using plastic surgery at a young age and this has become the new normal. We are strongly opposed to this and that is why we would like to emphasize
+                                    to the finalists that being natural is more important than anything else. These true values: harmony with ourselves and individuality, that make us stand out from the crowd and become the Queen of a Nation.&#10078;
+                                    <p>-Vivien Felleg</p>
+
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!--hero section-->
+
+        <!--body content start-->
+        <section class="body-content ">
+
+            <!--slider box-->
+            <section class="slider-revolution-wrapper">
+                <div class="tp-banner-container">
+                    <div class="tp-banner">
+                        <ul>
+                            <!-- slide 1 start -->
+                            <li class="" data-transition="fade" data-slotamount="7" data-masterspeed="500" data-saveperformance="on" data-title="Truly Massive">
+
+                        <img src="_content/MissNationSharedUI/assets/img/04.jpg" alt="" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
+
+                                <!-- LAYER NR. 1 -->
+                                <div class="tp-caption rev-heading lft start" data-x="center" data-y="150" data-speed="500" data-start="1900" data-easing="Back.easeOut" data-splitin="" data-splitout="" data-elementdelay="0.1" data-endelementdelay="0.1">Natural Beauty</div>
+
+                                <!-- LAYER NR. 2 -->
+                                <div class="tp-caption rev-subheading sfb" data-x="center" data-y="250" data-speed="300" data-start="2500" data-easing="Back.easeOut" data-splitin="" data-splitout="" data-elementdelay="0.1" data-endelementdelay="0.1">
+                                    <div style="width:50vw;">
+                                        <p style="text-wrap: wrap;"> We believe that natural Beauty is a value of great importance.</p>
+                                    </div>
+                                </div>
+
+
+                            </li>
+
+                            <li class="" data-transition="fade" data-slotamount="7" data-masterspeed="500" data-saveperformance="on" data-title="Truly Massive">
+
+                        <img src="_content/MissNationSharedUI/assets/img/05.jpg" alt="" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
+
+                                <!-- LAYER NR. 1 -->
+                                <div class="tp-caption rev-heading lft start" data-x="center" data-y="150" data-speed="500" data-start="1900" data-easing="Back.easeOut" data-splitin="" data-splitout="" data-elementdelay="0.1" data-endelementdelay="0.1">#stayU</div>
+
+                                <!-- LAYER NR. 2 -->
+                                <div class="tp-caption rev-subheading sfb" data-x="center" data-y="250" data-speed="300" data-start="2500" data-easing="Back.easeOut" data-splitin="" data-splitout="" data-elementdelay="0.1" data-endelementdelay="0.1">
+                                    <div style="width:50vw;">
+                                        <p style="text-wrap: wrap;">Miss Nation's mission is to integrate the message of #stayU campaign in the education systems of all nations.</p>
+                                    </div>
+                                </div>
+
+
+                            </li>
+
+                            <li class="" data-transition="fade" data-slotamount="7" data-masterspeed="500" data-saveperformance="on" data-title="Truly Massive">
+
+                        <img src="_content/MissNationSharedUI/assets/img/06.jpg" alt="" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
+
+                                <!-- LAYER NR. 1 -->
+                                <div class="tp-caption rev-heading lft start" data-x="center" data-y="150" data-speed="500" data-start="1900" data-easing="Back.easeOut" data-splitin="" data-splitout="" data-elementdelay="0.1" data-endelementdelay="0.1">Natural</div>
+
+                                <!-- LAYER NR. 2 -->
+                                <div class="tp-caption rev-subheading sfb" data-x="center" data-y="250" data-speed="300" data-start="2500" data-easing="Back.easeOut" data-splitin="" data-splitout="" data-elementdelay="0.1" data-endelementdelay="0.1">
+                                    <div style="width:50vw;">
+                                        <p style="text-wrap: wrap;">The campaign adresses young girls to avoid comparing themselves with others, and to stop using plastic surgery to alter their appearance.
+                                        </p>
+                                    </div>
+
+
+                                </div>
+
+
+                            </li>
+                        </ul>
+                        <div class="tp-bannertimer"></div>
+                    </div>
+                </div>
+            </section>
+            <!--ads box-->
+
+            <!--trendy product-->
+
+
+
+
+            <!--parallax-->
+            <!-- <div class="parallax-inner full-width float-left parallax-p">
+                <div class="container ">
+                    <div class="row">
+                        <div class="heading-title-alt text-center m-bot-0 inline-block">
+                            <h1 class="text-uppercase light-txt">Our misson</h1>
+                            </p>
+                            <h4 class="text-uppercase light-txt">&#10077;Our goal is to choose a Queen who can serve as an Idol to the younger generations, her Nation and the entire World.&#10078;
+
+                            </h4>
+
+                        </div>
+
+                    </div>
+                </div>
+            </div>-->
+            <!--parallax-->
+
+
+            <div class="page-content gray-bg">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="responsive-img  ">
+                        <img src="_content/MissNationSharedUI/assets/img/kidsmom.jpg" alt="">
+                            </div>
+                        </div>
+
+                        <div class="col-md-6 ">
+                            <div class="heading-title-alt m-top-50 inline-block">
+                                <h2 class="text-uppercase">
+                                    Our misson
+                                </h2>
+                            </div>
+                            <div class="">
+                                <p>&#10077;Our goal is to choose a Queen who can serve as an Idol to the younger generations, her Nation and the entire World.&#10078;
+                                </p>
+
+                                <!--   <a href="#" class="btn btn-medium btn-light-solid  "> Shop Now</a>-->
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+
+
+
+
+            <!--clients
+            <div class="page-content">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-md-12">
+
+                            <div class="heading-title border text-center">
+                                <h3 class="text-uppercase">popular brand</h3>
+                                <span class="text-uppercase">Know more about our story from the very begening to till date </span>
+                            </div>
+
+                            <ul class="clients plus-box grid-5 ">
+                                <li>
+                                    <a href="#">
+                                        <img src="assets/img/clients/c-1.png" alt="Clients">
+                                    </a>
+                                </li>
+                                <li>
+                                    <a href="#">
+                                        <img src="assets/img/clients/c-2.png" alt="Clients">
+                                    </a>
+                                </li>
+                                <li>
+                                    <a href="#">
+                                        <img src="assets/img/clients/c-3.png" alt="Clients">
+                                    </a>
+                                </li>
+                                <li>
+                                    <a href="#">
+                                        <img src="assets/img/clients/c-4.png" alt="Clients">
+                                    </a>
+                                </li>
+                                <li>
+                                    <a href="#">
+                                        <img src="assets/img/clients/c-5.png" alt="Clients">
+                                    </a>
+                                </li>
+                                <li>
+                                    <a href="#">
+                                        <img src="assets/img/clients/c-6.png" alt="Clients">
+                                    </a>
+                                </li>
+                                <li>
+                                    <a href="#">
+                                        <img src="assets/img/clients/c-7.png" alt="Clients">
+                                    </a>
+                                </li>
+                                <li>
+                                    <a href="#">
+                                        <img src="assets/img/clients/c-8.png" alt="Clients">
+                                    </a>
+                                </li>
+                                <li>
+                                    <a href="#">
+                                        <img src="assets/img/clients/c-9.png" alt="Clients">
+                                    </a>
+                                </li>
+                                <li>
+                                    <a href="#">
+                                        <img src="assets/img/clients/c-10.png" alt="Clients">
+                                    </a>
+                                </li>
+                            </ul>
+
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+            -->
+
+            <!--subscribe-->
+            <div class="subscribe-box gray-bg">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-md-12">
+                            <div class="subscribe-info">
+                                <h4>subscribe to get in touch</h4>
+                                <span>Nullam ut consectetur dolor. Sed sit amet iaculis nisi. </span>
+                            </div>
+                            <div class="subscribe-form">
+                                <form class="form-inline">
+                                    <input type="text" class="form-control radius-less" placeholder="Enter your email address">
+                                    <button type="submit" class="btn btn-medium btn-dark-solid text-uppercase">subscribe</button>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!--subscribe-->
+
+
+        </section>
+        <!--body content end-->
+
+        <!--footer start 1-->
+        <footer id="footer" class="dark">
+            <div class="primary-footer">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-md-3">
+                            <a href="#" class="m-bot-20 footer-logo">
+                        <img class="retina" src="_content/MissNationSharedUI/assets/img/logohotel1.png" alt="" />
+                            </a>
+                            <h3>Miss Nation</h3>
+                            <p>Join our contest!</p>
+                        </div>
+                        <div class="col-md-3">
+                            <h5 class="text-uppercase">recent posts</h5>
+                            <ul class="f-list">
+                                <li><a href="#">Standard Blog post</a>
+                                </li>
+                                <li><a href="#">Quotation post</a>
+                                </li>
+                                <li><a href="#">Audio Post</a>
+                                </li>
+                                <li><a href="#">Massive Video Demo</a>
+                                </li>
+                                <li><a href="#">Blog Image Post</a>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="col-md-3">
+                            <h5 class="text-uppercase">quick link</h5>
+                            <ul class="f-list">
+                                <li><a href="mp-index-fashion.html">About Miss Nation</a>
+                                </li>
+                                <li><a href="#">Career</a>
+                                </li>
+                                <li><a href="#">Terms & Condition</a>
+                                </li>
+                                <li><a href="#">Privacy Policy</a>
+                                </li>
+                                <li><a href="contact.html">Contact Us</a>
+                                </li>
+                            </ul>
+                        </div>
+
+
+                        <div class="secondary-footer">
+                            <div class="container">
+                                <div class="row">
+                                    <div class="col-md-6">
+                                        <span class="m-top-10">Copyright 2012 - 2015 Massive Theme by <a href="http://themebucket.net/" class="f-link" target="_blank">ThemeBucket</a> | All Rights Reserved</span>
+                                    </div>
+                                    <div class="col-md-6">
+                                        <div class="social-link circle pull-right">
+                                            <ul class="menuzord-menu menuzord-right c-nav_s-standard">
+                                                <li> <a href="https://www.facebook.com/missnationglobal/"><i class="fa fa-facebook"></i></a> </li>
+                                                <li> <a href="https://www.instagram.com/missnation/"><i class="fa fa-instagram"></i></a> </li>
+                                                <li> <a href="https://www.youtube.com/channel/UC-na-dYxv5d4WncYg2akutQ"><i class="fa fa-youtube"></i></a> </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        </div>
+                        </div>
+                        </div>
+        </footer>
+        <!--footer 1 end-->
+
+@code {
+
+}

MissNationSharedUI/_Imports.razor

@@ -1,2 +1,3 @@
-@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.JSInterop
+@using Microsoft.AspNetCore.Components.Web
 @using Microsoft.AspNetCore.Components.Routing

MissNationSharedUI/wwwroot/assets/css/default-theme.css

@@ -0,0 +1,150 @@
+/*------------------------------------------------------------------
+Default theme  Stylesheet
+-------------------------------------------------------------------*/
+::-moz-selection {
+    color: #fff;
+    background: #d6b161;
+    text-shadow: none;
+}
+::selection {
+    color: #fff;
+    background: #d6b161;
+    text-shadow: none;
+}
+
+::-moz-selection {
+    /* Firefox */
+    color: #fff;
+    background: #d6b161;
+    text-shadow: none;
+}
+
+::-webkit-selection {
+    /* Safari */
+    color: #fff;
+    background: #d6b161;
+    text-shadow: none;
+}
+
+a,
+.menuzord-menu > li.active > a,
+.menuzord-menu > li:hover > a,
+.portfolio-with-title .portfolio-title h4 a:hover,
+.f-link:hover,
+#footer .f-list li a:hover,
+.featured-item.border-box:hover .icon i,
+.post-single .post-cat li a:hover,
+.post-single .post-desk h4 a:hover,
+.post-single .post-desk a.author:hover,
+.post-list .post-single .post-cat li a,
+.portfolio-description a:hover,
+.portfolio-title a:hover,
+.post-sub-title,
+.team-member .s-link a:hover,
+.t-s-link a:hover,
+.price-col.feature h1,
+.widget-category li a:hover,
+.widget-comments li a:hover,
+.blog-classic .blog-post h4 a:hover,
+.post-meta li a:hover,
+.widget-latest-post .w-desk a:hover,
+.comments-list .comment-author a:hover,
+.comments-list .comment-item-data a:hover,
+.product-title h5 a:hover,
+.comments-list .comment-info a:hover,
+.portfolio-with-title.blog-m .portfolio-title .date a:hover,
+.comments-list .comment-info .comment-author a:hover,
+.icon-tabs .nav-pills > li > a:hover,
+.icon-tabs .nav-pills > li.active > a,
+.icon-tabs .nav-pills > li.active > a:focus,
+.icon-tabs .nav-pills > li.active > a:hover,
+.cd-nav .cd-primary-nav li.selected a,
+.no-touch .cd-nav .cd-primary-nav a:hover,
+.intro-portfolio a:hover {
+    color: #d6b161;
+}
+
+.theme-color {
+    color: #d6b161 !important;
+}
+
+.theme-bg,
+.massive-progress.progress-theme-color .progress-bar,
+.massive-progress-alt.progress-theme-color .progress-bar,
+.ei-slider-thumbs li.ei-slider-element,
+.massive-progress.progress-theme-color .progress-bar > span,
+.massive-progress.progress-theme-color .progress-bar > span:before {
+    background: #d6b161 !important;
+}
+
+.massive-progress.progress-theme-color .progress-bar > span:before {
+    border-color: #d6b161;
+}
+
+.btn-theme-border-color,
+.widget-social-link a:hover,
+.widget-tags a:hover {
+    border: 1px solid #d6b161;
+}
+
+.icon-tabs .nav-pills > li > a:hover,
+.icon-tabs .nav-pills > li.active > a,
+.icon-tabs .nav-pills > li.active > a:focus,
+.icon-tabs .nav-pills > li.active > a:hover {
+    border-bottom: 1px solid #d6b161;
+}
+
+.btn-theme-border-color:hover,
+.price-col.feature .p-btn:hover,
+.side-social-link a:hover,
+.massive-progress.progress-theme-color .progress-bar > span:before {
+    border: 1px solid #d6b161;
+}
+
+.accordion.time-line > dt > a:hover:after,
+.accordion.time-line > dt > a.active:after,
+.accordion.time-line > dt > a.active:hover:after,
+.toggle.time-line > dt > a:hover:after,
+.toggle.time-line > dt > a.active:after,
+.toggle.time-line > dt > a.active:hover:after,
+.btn-dark-solid:hover,
+.btn-dark-solid:focus,
+.btn-theme-color,
+.btn-theme-border-color:hover,
+.btn-light-solid:hover,
+.feature-border-box:hover .icon,
+.price-col.feature .p-btn:hover,
+.side-social-link a:hover,
+.widget-social-link a:hover,
+.widget-tags a:hover,
+.sale-label,
+.stock .status,
+.lift-off:hover,
+.menuzord-menu ul.dropdown li:hover > a,
+.menuzord-menu > li > .megamenu .megamenu-row li:hover a,
+.travel-form.icon-tabs .nav-pills > li > a:hover,
+.travel-form.icon-tabs .nav-pills > li.active:hover > a,
+.travel-form.icon-tabs .nav-pills > li.active > a,
+.travel-form.icon-tabs .nav-pills > li.active > a:focus {
+    background: #d6b161;
+}
+
+.menuzord .menuzord-menu ul.dropdown li:hover > a,
+.menuzord-menu > li > .megamenu .megamenu-row li:hover > a {
+    color: #fff;
+}
+
+@media (min-width: 768px) {
+    .c-nav_s-underline.menuzord-menu > li.active > a,
+    .c-nav_s-underline.menuzord-menu > li:hover > a {
+        border-bottom: 1px solid #d6b161;
+    }
+    .c-nav_s-outline.menuzord-menu > li.active > a,
+    .c-nav_s-outline.menuzord-menu > li:hover > a {
+        border: 1px solid #d6b161;
+    }
+    .c-nav_s-bg.menuzord-menu > li.active > a,
+    .c-nav_s-bg.menuzord-menu > li:hover > a {
+        background: #d6b161;
+    }
+}

MissNationSharedUI/wwwroot/assets/css/green-theme.css

@@ -0,0 +1,148 @@
+::-moz-selection {
+    color: #fff;
+    background: #bcbb35;
+    text-shadow: none;
+}
+
+::selection {
+    color: #fff;
+    background: #bcbb35;
+    text-shadow: none;
+}
+
+::-moz-selection {
+    /* Firefox */
+    color: #fff;
+    background: #bcbb35;
+    text-shadow: none;
+}
+
+::-webkit-selection {
+    /* Safari */
+    color: #fff;
+    background: #bcbb35;
+    text-shadow: none;
+}
+
+a,
+.menuzord-menu > li.active > a,
+.menuzord-menu > li:hover > a,
+.portfolio-with-title .portfolio-title h4 a:hover,
+.f-link:hover,
+#footer .f-list li a:hover,
+.featured-item.border-box:hover .icon i,
+.post-single .post-cat li a:hover,
+.post-single .post-desk h4 a:hover,
+.post-single .post-desk a.author:hover,
+.post-list .post-single .post-cat li a,
+.portfolio-description a:hover,
+.portfolio-title a:hover,
+.post-sub-title,
+.team-member .s-link a:hover,
+.t-s-link a:hover,
+.price-col.feature h1,
+.widget-category li a:hover,
+.widget-comments li a:hover,
+.blog-classic .blog-post h4 a:hover,
+.post-meta li a:hover,
+.widget-latest-post .w-desk a:hover,
+.comments-list .comment-author a:hover,
+.comments-list .comment-item-data a:hover,
+.product-title h5 a:hover,
+.comments-list .comment-info a:hover,
+.portfolio-with-title.blog-m .portfolio-title .date a:hover,
+.comments-list .comment-info .comment-author a:hover,
+.icon-tabs .nav-pills > li > a:hover,
+.icon-tabs .nav-pills > li.active > a,
+.icon-tabs .nav-pills > li.active > a:focus,
+.icon-tabs .nav-pills > li.active > a:hover,
+.cd-nav .cd-primary-nav li.selected a,
+.no-touch .cd-nav .cd-primary-nav a:hover,
+.intro-portfolio a:hover {
+    color: #bcbb35;
+}
+
+.theme-color {
+    color: #bcbb35 !important;
+}
+
+.theme-bg,
+.massive-progress.progress-theme-color .progress-bar,
+.massive-progress-alt.progress-theme-color .progress-bar,
+.ei-slider-thumbs li.ei-slider-element,
+.massive-progress.progress-theme-color .progress-bar > span,
+.massive-progress.progress-theme-color .progress-bar > span:before {
+    background: #bcbb35 !important;
+}
+
+.massive-progress.progress-theme-color .progress-bar > span:before {
+    border-color: #bcbb35;
+}
+
+.btn-theme-border-color,
+.widget-social-link a:hover,
+.widget-tags a:hover {
+    border: 1px solid #bcbb35;
+}
+
+.icon-tabs .nav-pills > li > a:hover,
+.icon-tabs .nav-pills > li.active > a,
+.icon-tabs .nav-pills > li.active > a:focus,
+.icon-tabs .nav-pills > li.active > a:hover {
+    border-bottom: 1px solid #bcbb35;
+}
+
+.btn-theme-border-color:hover,
+.price-col.feature .p-btn:hover,
+.side-social-link a:hover,
+.massive-progress.progress-theme-color .progress-bar > span:before {
+    border: 1px solid #bcbb35;
+}
+
+.accordion.time-line > dt > a:hover:after,
+.accordion.time-line > dt > a.active:after,
+.accordion.time-line > dt > a.active:hover:after,
+.toggle.time-line > dt > a:hover:after,
+.toggle.time-line > dt > a.active:after,
+.toggle.time-line > dt > a.active:hover:after,
+.btn-dark-solid:hover,
+.btn-dark-solid:focus,
+.btn-theme-color,
+.btn-theme-border-color:hover,
+.btn-light-solid:hover,
+.feature-border-box:hover .icon,
+.price-col.feature .p-btn:hover,
+.side-social-link a:hover,
+.widget-social-link a:hover,
+.widget-tags a:hover,
+.sale-label,
+.stock .status,
+.lift-off:hover,
+.menuzord-menu ul.dropdown li:hover > a,
+.menuzord-menu > li > .megamenu .megamenu-row li:hover a,
+.travel-form.icon-tabs .nav-pills > li > a:hover,
+.travel-form.icon-tabs .nav-pills > li.active:hover > a,
+.travel-form.icon-tabs .nav-pills > li.active > a,
+.travel-form.icon-tabs .nav-pills > li.active > a:focus {
+    background: #bcbb35;
+}
+
+.menuzord .menuzord-menu ul.dropdown li:hover > a,
+.menuzord-menu > li > .megamenu .megamenu-row li:hover > a {
+    color: #fff;
+}
+
+@media (min-width: 768px) {
+    .c-nav_s-underline.menuzord-menu > li.active > a,
+    .c-nav_s-underline.menuzord-menu > li:hover > a {
+        border-bottom: 1px solid #bcbb35;
+    }
+    .c-nav_s-outline.menuzord-menu > li.active > a,
+    .c-nav_s-outline.menuzord-menu > li:hover > a {
+        border: 1px solid #bcbb35;
+    }
+    .c-nav_s-bg.menuzord-menu > li.active > a,
+    .c-nav_s-bg.menuzord-menu > li:hover > a {
+        background: #bcbb35;
+    }
+}

MissNationSharedUI/wwwroot/assets/css/red-theme.css

@@ -0,0 +1,148 @@
+::-moz-selection {
+    color: #fff;
+    background: #f9333f;
+    text-shadow: none;
+}
+
+::selection {
+    color: #fff;
+    background: #f9333f;
+    text-shadow: none;
+}
+
+::-moz-selection {
+    /* Firefox */
+    color: #fff;
+    background: #f9333f;
+    text-shadow: none;
+}
+
+::-webkit-selection {
+    /* Safari */
+    color: #fff;
+    background: #f9333f;
+    text-shadow: none;
+}
+
+a,
+.menuzord-menu > li.active > a,
+.menuzord-menu > li:hover > a,
+.portfolio-with-title .portfolio-title h4 a:hover,
+.f-link:hover,
+#footer .f-list li a:hover,
+.featured-item.border-box:hover .icon i,
+.post-single .post-cat li a:hover,
+.post-single .post-desk h4 a:hover,
+.post-single .post-desk a.author:hover,
+.post-list .post-single .post-cat li a,
+.portfolio-description a:hover,
+.portfolio-title a:hover,
+.post-sub-title,
+.team-member .s-link a:hover,
+.t-s-link a:hover,
+.price-col.feature h1,
+.widget-category li a:hover,
+.widget-comments li a:hover,
+.blog-classic .blog-post h4 a:hover,
+.post-meta li a:hover,
+.widget-latest-post .w-desk a:hover,
+.comments-list .comment-author a:hover,
+.comments-list .comment-item-data a:hover,
+.product-title h5 a:hover,
+.comments-list .comment-info a:hover,
+.portfolio-with-title.blog-m .portfolio-title .date a:hover,
+.comments-list .comment-info .comment-author a:hover,
+.icon-tabs .nav-pills > li > a:hover,
+.icon-tabs .nav-pills > li.active > a,
+.icon-tabs .nav-pills > li.active > a:focus,
+.icon-tabs .nav-pills > li.active > a:hover,
+.cd-nav .cd-primary-nav li.selected a,
+.no-touch .cd-nav .cd-primary-nav a:hover,
+.intro-portfolio a:hover {
+    color: #f9333f;
+}
+
+.theme-color {
+    color: #f9333f !important;
+}
+
+.theme-bg,
+.massive-progress.progress-theme-color .progress-bar,
+.massive-progress-alt.progress-theme-color .progress-bar,
+.ei-slider-thumbs li.ei-slider-element,
+.massive-progress.progress-theme-color .progress-bar > span,
+.massive-progress.progress-theme-color .progress-bar > span:before {
+    background: #f9333f !important;
+}
+
+.massive-progress.progress-theme-color .progress-bar > span:before {
+    border-color: #f9333f;
+}
+
+.btn-theme-border-color,
+.widget-social-link a:hover,
+.widget-tags a:hover {
+    border: 1px solid #f9333f;
+}
+
+.icon-tabs .nav-pills > li > a:hover,
+.icon-tabs .nav-pills > li.active > a,
+.icon-tabs .nav-pills > li.active > a:focus,
+.icon-tabs .nav-pills > li.active > a:hover {
+    border-bottom: 1px solid #f9333f;
+}
+
+.btn-theme-border-color:hover,
+.price-col.feature .p-btn:hover,
+.side-social-link a:hover,
+.massive-progress.progress-theme-color .progress-bar > span:before {
+    border: 1px solid #f9333f;
+}
+
+.accordion.time-line > dt > a:hover:after,
+.accordion.time-line > dt > a.active:after,
+.accordion.time-line > dt > a.active:hover:after,
+.toggle.time-line > dt > a:hover:after,
+.toggle.time-line > dt > a.active:after,
+.toggle.time-line > dt > a.active:hover:after,
+.btn-dark-solid:hover,
+.btn-dark-solid:focus,
+.btn-theme-color,
+.btn-theme-border-color:hover,
+.btn-light-solid:hover,
+.feature-border-box:hover .icon,
+.price-col.feature .p-btn:hover,
+.side-social-link a:hover,
+.widget-social-link a:hover,
+.widget-tags a:hover,
+.sale-label,
+.stock .status,
+.lift-off:hover,
+.menuzord-menu ul.dropdown li:hover > a,
+.menuzord-menu > li > .megamenu .megamenu-row li:hover a,
+.travel-form.icon-tabs .nav-pills > li > a:hover,
+.travel-form.icon-tabs .nav-pills > li.active:hover > a,
+.travel-form.icon-tabs .nav-pills > li.active > a,
+.travel-form.icon-tabs .nav-pills > li.active > a:focus {
+    background: #f9333f;
+}
+
+.menuzord .menuzord-menu ul.dropdown li:hover > a,
+.menuzord-menu > li > .megamenu .megamenu-row li:hover > a {
+    color: #fff;
+}
+
+@media (min-width: 768px) {
+    .c-nav_s-underline.menuzord-menu > li.active > a,
+    .c-nav_s-underline.menuzord-menu > li:hover > a {
+        border-bottom: 1px solid #f9333f;
+    }
+    .c-nav_s-outline.menuzord-menu > li.active > a,
+    .c-nav_s-outline.menuzord-menu > li:hover > a {
+        border: 1px solid #f9333f;
+    }
+    .c-nav_s-bg.menuzord-menu > li.active > a,
+    .c-nav_s-bg.menuzord-menu > li:hover > a {
+        background: #f9333f;
+    }
+}

MissNationSharedUI/wwwroot/assets/exampleJsInterop.js

@@ -4,3 +4,8 @@
 export function showPrompt(message) {
   return prompt(message, 'Type anything here');
 }
+
+export function getMessage() {
+    console.log("Get Message called");
+    initMassive();
+}

MissNationSharedUI/wwwroot/assets/sass/abstract/_variable.scss

@@ -0,0 +1,5 @@
+$theme-color-default: #d6b161;
+
+$theme-color-green: #bcbb35;
+
+$theme-color-red: #f9333f;

MissNationSharedUI/wwwroot/assets/sass/base/_base.scss

@@ -0,0 +1,95 @@
+body {
+  font-family: 'Source Sans Pro', sans-serif;
+  line-height: 1.5;
+  color: #323232;
+  font-size: 15px;
+  font-weight: 400;
+  text-rendering:optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-font-smoothing: antialiased;
+}
+
+a:active,
+a:focus { outline: none !important; }
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: #333;
+  line-height: 1.5;
+  margin: 0 0 30px 0;
+  font-weight: normal;
+}
+
+h1,
+h2 {
+  letter-spacing: 2px;
+}
+
+h3,
+h4 {
+  letter-spacing: 2px;
+}
+
+h5,
+h6 {
+  letter-spacing: 1px;
+}
+
+a {
+  text-decoration: none !important;
+}
+
+a:hover,
+a:focus {
+  color: #323232;
+}
+
+a,
+.btn {
+  -webkit-transition: all 0.3s;
+  -moz-transition: all 0.3s;
+  transition: all 0.3s;
+}
+
+a img,
+iframe {
+  border: none;
+}
+
+p {
+  margin: 0 0 30px;
+  line-height: 30px;
+  color: #7e7e7e;
+}
+
+hr {
+  margin-top: 0px;
+  margin-bottom: 0px;
+  border: 0;
+  border-top: 1px solid #eee;
+}
+
+pre {
+  display: block;
+  padding: 9.5px;
+  margin: 0 0 30px;
+  font-size: 13px;
+  line-height: 1.42857143;
+  color: #333;
+  word-break: break-all;
+  word-wrap: break-word;
+  background-color: #f9f9f9;
+  border: 1px solid #EDEDED;
+  border-radius: 0;
+}
+
+
+.parallax-window {
+  min-height: 400px;
+  background: transparent;
+  padding: 150px 0;
+}

MissNationSharedUI/wwwroot/assets/sass/base/_bootstrap-rest.scss

@@ -0,0 +1,18 @@
+.container-fluid {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+// override bootstrap column padding to match massive design
+@for $i from 1 through 12 {
+  .col-lg-#{$i},
+  .col-md-#{$i},
+  .col-sm-#{$i},
+  .col-xs-#{$i} {
+    @extend .container-fluid;
+  }
+}
+
+.btn-default {
+  border-color: #e5e5e5;
+}

MissNationSharedUI/wwwroot/assets/sass/base/_utility.scss

@@ -0,0 +1,335 @@
+.column-two,
+.column-three,
+.column-four {
+  -webkit-column-gap: 40px;
+  -moz-column-gap: 40px;
+  column-gap: 40px;
+}
+
+.column-two {
+  -webkit-column-count: 2;
+  -moz-column-count: 2;
+  column-count: 2;
+}
+
+.column-three {
+  -webkit-column-count: 3;
+  -moz-column-count: 3;
+  column-count: 3;
+}
+
+.column-four {
+  -webkit-column-count: 4;
+  -moz-column-count: 4;
+  column-count: 4;
+}
+
+.m-top-0,
+.m-top-10,
+.m-top-15,
+.m-top-20,
+.m-top-25,
+.m-top-30,
+.m-top-35,
+.m-top-40,
+.m-top-50,
+.m-top-80,
+.m-top-100,
+.m-bot-0,
+.m-bot-10,
+.m-bot-15,
+.m-bot-20,
+.m-bot-25,
+.m-bot-30,
+.m-bot-35,
+.m-bot-40,
+.m-bot-50,
+.m-bot-80,
+.m-bot-100 {
+  display: inline-block;
+}
+
+.m-top-0{
+  margin-top: 0px !important;
+}
+
+.m-top-5 {
+  margin-top: 5px;
+}
+
+.m-top-10 {
+  margin-top: 10px;
+}
+.m-top-15 {
+  margin-top: 15px;
+}
+.m-top-20 {
+  margin-top: 20px;
+}
+.m-top-25 {
+  margin-top: 25px;
+}
+.m-top-30 {
+  margin-top: 30px;
+}
+.m-top-35 {
+  margin-top: 35px;
+}
+.m-top-40 {
+  margin-top: 40px;
+}
+.m-top-50 {
+  margin-top: 50px;
+}
+.m-top-80 {
+  margin-top: 80px;
+}
+.m-top-100 {
+  margin-top: 100px;
+}
+
+/*margin bottom*/
+.m-bot-0 {
+  margin-bottom: 0px !important;
+}
+.m-bot-10 {
+  margin-bottom: 10px;
+}
+
+.m-bot-15 {
+  margin-bottom: 15px;
+}
+
+.m-bot-20 {
+  margin-bottom: 20px;
+}
+
+.m-bot-25 {
+  margin-bottom: 25px;
+}
+
+.m-bot-30 {
+  margin-bottom: 30px;
+}
+
+.m-bot-35 {
+  margin-bottom: 35px;
+}
+
+.m-bot-40 {
+  margin-bottom: 40px;
+}
+
+.m-bot-50 {
+  margin-bottom: 50px;
+}
+
+.m-bot-80 {
+  margin-bottom: 80px;
+}
+
+.m-bot-100 {
+  margin-bottom: 100px;
+}
+
+
+.m-left-10 {
+  margin-left: 20px;
+}
+
+/*padding top*/
+
+.p-top-0{
+  padding-top: 0px !important;
+}
+.p-top-10 {
+  padding-top: 10px;
+}
+.p-top-15 {
+  padding-top: 15px;
+}
+.p-top-20 {
+  padding-top: 20px;
+}
+.p-top-25 {
+  padding-top: 25px;
+}
+.p-top-30 {
+  padding-top: 30px;
+}
+.p-top-35 {
+  padding-top: 35px;
+}
+.p-top-40 {
+  padding-top: 40px;
+}
+.p-top-50 {
+  padding-top: 50px;
+}
+.p-top-80 {
+  padding-top: 80px;
+}
+.p-top-100 {
+  padding-top: 100px;
+}
+
+.p-tb-10 {
+  padding: 10px 0;
+}
+
+.p-tb-20 {
+  padding: 20px 0;
+}
+
+.p-tb-30 {
+  padding: 30px 0;
+}
+
+
+.p-tb-50 {
+  padding: 50px 0;
+}
+
+
+.p-tb-100 {
+  padding: 100px 0;
+}
+
+
+.p-tb-150 {
+  padding: 150px 0;
+}
+
+.p-tb-200 {
+  padding: 200px 0;
+}
+
+.p-top-0 {
+  padding-top: 0 !important;
+}
+
+.p-bot-0 {
+  padding-bottom: 0 !important;
+}
+
+.p-bot-100 {
+  padding-bottom: 100px !important;
+}
+
+.theme-bg-space {
+  padding: 10px 20px;
+}
+
+.bg-space-lg {
+  padding: 40px;
+}
+
+.bg-space-m {
+  padding: 20px 100px;
+}
+
+.inline-block {
+  display: inline-block;
+  width: 100%;
+}
+
+.relative {
+  position: relative;
+}
+
+.vertical-align {
+  position: relative;
+}
+
+.ls-20 {
+  letter-spacing: 20px !important;
+}
+
+.ls-40 {
+  letter-spacing: 40px !important;
+}
+
+.b-lg-lw{
+  font-weight: 100;
+}
+
+.txt-xl {
+  font-size: 26px !important;
+  font-weight: 300;
+  line-height: 36px;
+}
+
+.txt-sm {
+  font-size: 16px !important;
+  font-weight: normal;
+  line-height: 20px;
+}
+
+
+.height-160 {
+  height: 160px!important;
+}
+
+.height-227 {
+  height: 227px!important;
+}
+
+.height-300 {
+  height: 300px!important;
+}
+
+.height-310 {
+  height: 310px!important;
+}
+
+.height-361 {
+  height: 361px!important;
+}
+
+.height-450 {
+  height: 450px!important;
+}
+
+.height-550 {
+  height: 550px!important;
+}
+
+.height-600 {
+  height: 600px!important;
+}
+
+.width-300 {
+  width: 300px!important;
+}
+
+.dark-bg-alt {
+  background: #222;
+}
+
+.gray-bg-alt {
+  background: #e8e8e8;
+}
+
+.opacity-90 {
+  opacity: .9;
+}
+
+.ls-3 {
+  letter-spacing: 3px;
+}
+
+.m-r-0 {
+  margin-right: 0;
+}
+
+.l-weight {
+  font-weight: 100 !important;
+}
+
+.semi-transparent{
+  background: rgba(10,10,10, .5) !important;
+}
+
+.float-none {
+  float: none !important;
+}

MissNationSharedUI/wwwroot/assets/sass/layout/_banner-bs.scss

@@ -0,0 +1,46 @@
+.bs-hero.full-screen .carousel-inner .item img{
+  /*height: 100vh;*/
+  height: auto;
+  width: 100%;
+}
+
+.bs-hero.full-screen .carousel-inner .item .bs-info {
+  position: absolute;
+  top: 40%;
+  left: 12%;
+}
+
+.bs-hero.full-screen .carousel-inner .item .bs-info-center {
+  position: absolute;
+  width: 1000px;
+  top: 30%;
+  left: 50%;
+  margin-left: -500px;
+  text-align: center;
+}
+
+.bs-hero.full-screen .carousel-inner .item .bs-info-right {
+  position: absolute;
+  /*width: 1170px;*/
+  top: 35%;
+  right: 12%;
+  text-align: right;
+}
+
+.bs-hero.full-screen .carousel-inner .item .bs-info h1 {
+  text-transform: uppercase ;
+}
+
+.bs-hero.full-screen .carousel-indicators {
+  z-index: 1200;
+}
+
+.bs-hero.full-screen .carousel-inner .item .bs-info h1 span {
+  font-size: 18px;
+}
+
+.bs-hero.full-screen .carousel.slide .carousel-control {
+  width: 30%;
+  margin-top: 180px;
+  margin-bottom: 120px;
+}

MissNationSharedUI/wwwroot/assets/sass/layout/_banner-flex.scss

@@ -0,0 +1,197 @@
+.slides {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.flex-container a:active,
+.flexslider a:active,
+.flex-container a:focus,
+.flexslider a:focus  {
+  outline: none;
+  border: none;
+}
+
+.flex-control-nav {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border: none;
+}
+
+.flex-direction-nav {
+  display: none;
+}
+
+.flexslider {
+  position: relative;
+  margin: 0;
+  padding: 0;
+}
+
+.flex-viewport {
+  max-height: 2000px;
+  -webkit-transition: all 1s ease;
+  -o-transition: all 1s ease;
+  transition: all 1s ease;
+}
+
+.flex-control-nav {
+  position: absolute;
+  z-index: 10;
+  text-align: center;
+  bottom: 15px;
+  right: 15px;
+  margin: 0;
+}
+
+.flex-control-nav li {
+  float: left;
+  display: block;
+  margin: 0 3px;
+  width: 10px;
+  height: 10px;
+}
+
+.flex-control-nav li a {
+  display: block;
+  cursor: pointer;
+  text-indent: -9999px;
+  width: 10px;
+  height: 10px;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  transition: all .3s ease-in-out;
+  -webkit-transition: all .3s ease-in-out;
+  -o-transition: all .3s ease-in-out;
+}
+
+.flex-control-nav li:hover a,
+.flex-control-nav li a.flex-active {
+  background-color: #fff;
+}
+
+.flex-direction-nav {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.flex-direction-nav {
+  *height: 0;
+}
+
+.flex-direction-nav a {
+  text-decoration: none;
+  display: block;
+  width: 40px;
+  height: 40px;
+  margin: -40px 0 0;
+  position: absolute;
+  top: 50%;
+  z-index: 200;
+  overflow: hidden;
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: rgba(0, 0, 0, 0.8);
+  -webkit-transition: all 0.3s ease-in-out;
+  -moz-transition: all 0.3s ease-in-out;
+  -ms-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  line-height: 40px;
+}
+
+.flex-direction-nav a:hover {
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
+.flex-direction-nav a:before {
+  font-family: "fontawesome";
+  font-size: 16px;
+  display: block;
+  content: '\f104';
+  color: #fff;
+  text-align: center;
+  width: 40px;
+}
+
+.flex-direction-nav a.flex-next:before {
+  content: '\f105';
+}
+
+.flex-direction-nav .flex-prev {
+  left: 0px;
+}
+
+.flex-direction-nav .flex-next {
+  right: 0px;
+  text-align: right;
+}
+
+.post-slider-thumb .flex-control-thumbs {
+  position: relative;
+  z-index: 10;
+  text-align: left;
+  top: 10px;
+  right: auto;
+  margin: 0 auto;
+  left: auto;
+}
+
+.post-slider-thumb .flex-control-thumbs li {
+  float: none;
+  display: inline-block;
+  margin: 0 3px 0 0;
+  width: 80px;
+  height: auto;
+  cursor: pointer;
+}
+
+.post-slider  .flex-direction-nav,
+.post-slider-thumb  .flex-direction-nav {
+  display: block;
+}
+
+.post-slider .flex-direction-nav .flex-prev,
+.post-slider .flex-direction-nav .flex-next,
+.post-slider-thumb .flex-direction-nav .flex-prev,
+.post-slider-thumb .flex-direction-nav .flex-next
+{
+  opacity: 0;
+}
+
+.post-slider:hover .flex-direction-nav .flex-prev,
+.post-slider:hover .flex-direction-nav .flex-next,
+.post-slider-thumb:hover .flex-direction-nav .flex-prev,
+.post-slider-thumb:hover .flex-direction-nav .flex-next {
+  opacity: 1;
+}
+
+.post-list-aside .post-img img  {
+  border: 2px solid transparent;
+}
+
+.post-list-aside .post-img img.flex-active {
+  border: 2px solid rgba(0, 0, 0, 0.8);
+}
+
+.post-slider .flex-control-thumbs{
+  display: none;
+}
+
+@media screen and (max-width: 860px) {
+
+  .flex-direction-nav .flex-prev,
+  .post-slider .flex-direction-nav .flex-prev,
+  .post-slider-thumb .flex-direction-nav .flex-prev {
+    opacity: 1;
+    left: 0px;
+  }
+  .flex-direction-nav .flex-next,
+  .post-slider .flex-direction-nav .flex-next,
+  .post-slider-thumb .flex-direction-nav .flex-next{
+    opacity: 1;
+    right: 0px;
+  }
+}

MissNationSharedUI/wwwroot/assets/sass/layout/_banner-rev.scss

@@ -0,0 +1,53 @@
+.slider-revulation-wrapper {
+
+}
+
+.tp-banner-container{
+  width:100%;
+  position:relative;
+  padding:0;
+
+}
+
+.tp-banner{
+  width:100%;
+  position:relative;
+}
+
+.tp-banner > ul {
+  padding: 0;
+  list-style: none;
+}
+
+.tp-banner-fullscreen-container {
+  width:100%;
+  position:relative;
+  padding:0;
+}
+
+.rev-heading {
+  color: #333;
+  /*font: normal 60px/1.5 'Abel', sans-serif;*/
+  font: normal 60px/1.5 'Source Sans Pro', sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 5px;
+  font-weight: 300;
+}
+
+.rev-subheading {
+  /*font-family: 'Abel', sans-serif;*/
+  text-transform: uppercase;
+  color: #555;
+  font-size: 20px;
+  letter-spacing: 6px;
+}
+
+.rev-desc {
+  font-size: 16px;
+  color: #454545;
+  line-height: 26px;
+}
+
+.rev-white {
+  color: #fff;
+}

MissNationSharedUI/wwwroot/assets/sass/layout/_banner-static.scss

@@ -0,0 +1,124 @@
+.vertical-align .container-mid{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  z-index: 200;
+}
+
+.light-box,
+.dark-box {
+  padding: 70px 50px;
+}
+
+.light-box {
+  background: rgba(255,255,255,.5);
+  outline: 5px solid rgba(255,255,255,.5);
+  outline-offset: 5px;
+}
+
+.dark-box {
+  background: rgba(0,0,0,.5);
+  outline: 5px solid rgba(0,0,0,.5);
+  outline-offset: 5px;
+}
+
+.banner-box {
+  max-width: 650px;
+  margin: 0 auto;
+}
+
+.banner-box h1,
+.banner-box h3,
+.banner-title h1,
+.banner-title h3,
+.banner-box h2,
+.banner-box h2,
+.banner-title h2,
+.banner-title h2 {
+  margin-bottom: 0;
+}
+
+.banner-box h1,
+.banner-title h1 {
+  letter-spacing: 5px;
+  font-size:60px;
+  font-weight: 300;
+  line-height: normal;
+}
+
+.banner-box h3,
+.banner-title h3 {
+  letter-spacing: 6px;
+  font-size:20px;
+}
+
+.banner-title.light-txt h1,
+.banner-title.light-txt h2,
+.banner-title.light-txt h3 {
+  color: #fff;
+}
+
+//header.transparent-header + .vertical-align .banner-title,
+//header .semi-transparent + .vertical-align .banner-title {
+//  margin-top: 0;
+//}
+//
+//header + .vertical-align .banner-title {
+//  margin-top: 100px;
+//}
+
+
+.b-lg-txt {
+  font-size: 100px !important;
+  font-weight: 300;
+}
+
+.hero-text {
+  position: relative;
+  z-index: 6000;
+}
+
+.hero-text h1 {
+  margin-bottom: 10px;
+}
+
+.hero-text a {
+  margin: 10px 5px;
+}
+
+.banner-scroll a {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  margin-left: -11px;
+  text-transform: uppercase;
+  font-size: 12px;
+  color: #fff;
+  z-index: 10;
+}
+
+.banner-scroll a:before {
+  display: block;
+  content: "";
+  width: 25px;
+  height: 35px;
+  border: 2px solid #fff;
+  border-radius: 15px;
+  margin-left: 5px;
+  margin-bottom: 5px;
+}
+
+.banner-scroll .scroll-down {
+  position: absolute;
+  display: block;
+  width: 2px;
+  height: 8px;
+  background: #fff;
+  margin-left: -3px;
+  left: 50%;
+  top: 8px;
+  z-index: 2;
+  animation: 3s arrow infinite ease;
+}

MissNationSharedUI/wwwroot/assets/sass/layout/_banner-video.scss

@@ -0,0 +1,45 @@
+.video-banner {
+  height:100vh;
+  width: 100%;
+  display: block;
+  position: relative;
+  overflow: hidden;
+}
+
+.video-banner.overlay-background .container {
+  z-index: 300;
+  position: absolute;
+}
+
+.overlay-background{
+  background-attachment: fixed;
+  background-position: 50% 0;
+  background-repeat: no-repeat;
+  position: relative;
+  background-size: cover;
+}
+.overlay-background .container{
+  z-index: 300;
+  position: relative;
+}
+
+.overlay-block{
+  width:100%;
+  height: 100%;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  background-color: rgba(0,0,0,.7);
+  z-index: 200;
+}
+
+.overlay-block-light{
+  width:100%;
+  height: 100%;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  background-color: rgba(0,0,0,.45);
+  z-index: 200;
+}
+

MissNationSharedUI/wwwroot/assets/sass/layout/_blog.scss

@@ -0,0 +1,466 @@
+.blog-classic {
+    margin-bottom: 70px;
+    padding-bottom: 70px;
+    border-bottom: 1px solid #efefef;
+}
+
+.blog-classic .date {
+    float: left;
+    width: 100px;
+    height: 100px;
+    padding-top: 15px;
+    background: #222222;
+    color: #fff;
+    font-size: 30px;
+    text-align: center;
+    margin-right: 40px;
+}
+
+.blog-classic .date.right {
+    float: right;
+    margin-left: 40px;
+    margin-right: 0px;
+}
+
+.blog-classic .date span {
+    font-size: 12px;
+    display: block;
+}
+
+.blog-classic .blog-post {
+    overflow: hidden;
+}
+
+.blog-classic .blog-post .full-width {
+    margin-bottom: 50px;
+}
+
+.blog-post h4 a {
+    color: #222;
+}
+
+.blog-post h4 {
+    margin-bottom: 10px;
+}
+
+.post-meta {
+    padding: 0;
+    list-style: none;
+    margin-bottom: 40px;
+}
+
+.post-meta li {
+    display: inline-block;
+    margin-right: 10px;
+    color: #a7a7a7;
+    text-transform: uppercase;
+    font-size: 12px;
+}
+.post-meta li a {
+    margin-right: 5px;
+    color: #a7a7a7;
+}
+
+.post-meta li i{
+    padding-right: 10px;
+}
+
+.blog-post blockquote {
+    padding: 0;
+    margin: 0 0 20px;
+    font-size: 17.5px;
+    border-left: none;
+    font-style: italic;
+}
+
+.quote-post p:before {
+    content: "\f10d";
+    padding-right: 10px;
+    font-family: 'FontAwesome';
+    color: #837f7e;
+}
+
+.quote-post p:after {
+    content: "\f10e";
+    padding-left: 10px;
+    font-family: 'FontAwesome';
+    color: #837f7e;
+}
+
+.portfolio-with-title.blog-m .portfolio-title h4 a {
+    font-size: 16px;
+}
+
+.portfolio-with-title.blog-m .portfolio-title p {
+    letter-spacing: normal;
+}
+
+.video-fit  {
+    width: 100%;
+    padding-top: 50%;
+    position: relative;
+}
+
+.audio-fit {
+    width: 100%;
+    padding-top: 20%;
+    position: relative;
+}
+
+.video-fit iframe,
+.video-fit object,
+.video-fit embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+
+.audio-fit iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    border: none;
+}
+
+/* custom pagination */
+.custom-pagination > li:first-child > a,
+.custom-pagination > li:first-child > span,
+.custom-pagination > li:last-child > a,
+.custom-pagination > li:last-child > span {
+    border-radius: 0;
+}
+
+.custom-pagination > li > a {
+    margin: 0 3px;
+    color: #424242;
+}
+
+.custom-pagination > li > a:hover {
+    color:#000 ;
+}
+
+.custom-pagination.pagination>.active>a,
+.custom-pagination.pagination>.active>a:focus,
+.custom-pagination.pagination>.active>a:hover,
+.custom-pagination.pagination>.active>span,
+.custom-pagination.pagination>.active>span:focus,
+.custom-pagination.pagination>.active>span:hover {
+    z-index: 2;
+    color: #fff;
+    cursor: default;
+    background-color: #222;
+    border-color: #222;
+}
+
+/*search-row*/
+.search-row {
+    position: relative;
+}
+
+.search-btn {
+    width: 40px;
+    height: 40px;
+    line-height: 36px;
+    margin-top: -20px;
+    position: absolute;
+    top: 50%;
+    right: 1px;
+    overflow: hidden;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: #ccc;
+    font-size: 14px;
+}
+
+.search-row input {
+    width: 100% !important;
+    height: 40px;
+    border-radius: 0;
+    box-shadow: none;
+}
+
+.search-row input:focus {
+    border-color: #333;
+    outline: 0;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+// Blog sidebar
+.widget {
+    margin-bottom: 60px;
+    display: inline-block;
+    width: 100%;
+}
+
+.widget h6 {
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.widget .avatar {
+    margin-bottom: 30px;
+    display: block;
+}
+
+.widget-latest-post,
+.widget-category,
+.widget-comments{
+    list-style: none;
+    padding: 0;
+}
+
+.widget-latest-post li,
+.widget-category li,
+.widget-comments li {
+    width: 100%;
+    float: left;
+    margin-bottom: 30px;
+}
+
+.widget-category li,
+.widget-comments li{
+    margin-bottom: 20px;
+}
+
+.widget-category li a,
+.widget-comments li a{
+    color:#837f7e;
+}
+
+.widget-category li a:before {
+    content: "\f105";
+    padding-right: 10px;
+    font-family: 'FontAwesome';
+}
+
+.widget-comments li:before {
+    content: "\f0e6";
+    padding-right: 10px;
+    font-family: 'FontAwesome';
+    color: #837f7e;
+}
+
+.widget-latest-post li:last-child {
+    margin-bottom: 0px;
+}
+
+.widget-latest-post .thumb {
+    float: left;
+    margin-right: 20px;
+    width: 75px;
+    height: auto;
+}
+
+.widget-latest-post .thumb img {
+    width: 100%;
+    height: 100%;
+}
+
+.widget-latest-post .w-desk {
+    overflow: hidden;
+    color: #9b9a9a;
+    display: inherit;
+}
+
+.widget-latest-post .w-desk a{
+    display: block;
+    color: #333;
+    text-transform: uppercase;
+    font-size: 13px;
+}
+
+.widget-social-link a {
+    float: left;
+}
+
+.widget-social-link a {
+    border: 1px solid #5a5a5a;
+    width: 35px;
+    height: 35px;
+    line-height: 35px;
+    text-align: center;
+    font-size: 16px;
+    color: #5a5a5a;
+    margin: 0 15px 15px 0 ;
+}
+
+.widget-social-link a:hover,
+.widget-tags a:hover {
+    color: #fff;
+}
+
+.circle a {
+    border-radius: 50%;
+}
+
+.widget-tags a {
+    float: left;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    padding: 3px 10px;
+    color: #837f7e;
+    border: 1px solid #d3d3d3;
+    border-radius: 50px;
+}
+
+/*------------------------------
+blog-masonry
+------------------------------*/
+.portfolio-with-title.blog-m .portfolio-title p {
+    margin: 5px 0 0 0;
+    font-size: 14px;
+    text-transform: none;
+    font-family: 'Source Sans Pro', sans-serif;
+    font-weight: normal;
+    color: #757575;
+    line-height: 26px;
+}
+
+.portfolio-with-title.blog-m .portfolio-title p  {
+    margin-bottom: 20px;
+    display: block;
+}
+
+.portfolio-with-title.blog-m .portfolio-title .date {
+    font-size: 12px;
+    margin:5px 0 20px 0;
+    display: block;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+}
+
+.portfolio-with-title.blog-m .portfolio-title .date,
+.portfolio-with-title.blog-m .portfolio-title .date a {
+    color: #a8a8a8;
+}
+
+/*------------------------------
+comments-list
+------------------------------*/
+.comments-list .comment-author a {
+    text-transform: uppercase;
+    color: #222;
+    /*font-family: 'Abel', sans-serif;*/
+    font-weight: bold;
+    letter-spacing: 1px;
+    font-size: 12px;
+}
+
+.comments-list .media>.pull-left {
+    padding-right: 20px;
+}
+
+.comments-list .comment-info,
+.comments-list .comment-info a{
+    color: #a7a7a7;
+}
+
+.comments-list .comment-info .comment-author a {
+    color: #222;
+}
+
+.comments-list .comment-info i{
+    padding: 0 10px;
+}
+
+.comments-list .comment-avatar{
+    width: 50px;
+    height: auto;
+}
+
+.blog-comments .col-md-6,
+.blog-comments .col-md-12 {
+    padding-right: 15px;
+    padding-left: 15px;
+}
+
+.blog-comments .form-control {
+    border-radius: 0;
+    box-shadow: none;
+}
+
+.blog-comments .form-control:focus {
+    border-color:#222 ;
+}
+
+/*----*/
+.pagination-row {
+    overflow: hidden;
+}
+.pagination-row {
+    padding: 30px 0;
+    text-align: center;
+    text-transform: uppercase;
+    border-top: 1px solid #efefef;
+    border-bottom: 1px solid #efefef;
+    margin-bottom: 60px;
+}
+
+.pagination-post .prev-post {
+    float: left;
+    text-align: left;
+}
+.pagination-post .prev-post,
+.pagination-post .next-post {
+    width: 45%;
+}
+
+.pagination-post .post-list-link {
+    width: 10%;
+    float: left;
+    text-align: center;
+    margin-top: 5px;
+}
+
+.pagination-post .next-post {
+    float: right;
+    text-align: right;
+}
+
+.pagination-post .prev-post .arrow {
+    float: left;
+    margin-right: 20px;
+}
+.pagination-post .arrow {
+    color: #e5e5e5;
+    font-size: 50px;
+    line-height: 50px;
+}
+
+.pagination-post .next-post .arrow {
+    float: right;
+    margin-left: 20px;
+}
+
+.pagination-post .post-list-link a {
+    color: #d2d2d2;
+    font-size: 30px;
+    outline: none;
+}
+
+.pagination-post .pagination-txt {
+    margin-top: 18px;
+}
+
+.pagination-post a {
+    color: #d2d2d2;
+}
+
+.pagination-post a:hover,
+.pagination-post a:hover .arrow{
+    color: #222;
+
+}
+
+.pagination-post a,
+.pagination-post a .arrow,
+.pagination-post a:hover,
+.pagination-post a:hover .arrow {
+    transition: all 0.3s;
+}

MissNationSharedUI/wwwroot/assets/sass/layout/_body.scss

@@ -0,0 +1,78 @@
+.body-content {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.parallax {
+  background-image: url("../img/demo.jpg");
+  background-size: cover;
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  height: 100vh;
+  background-position: 50% 50%;
+}
+
+.parallax-inner {
+  background-image: url("../img/demo.jpg");
+  background-size: cover;
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  padding: 150px 0;
+  background-position: 50% 50%;
+}
+
+.banner-state {
+  background-image: url("../img/banner/menu_banner.jpg");
+  background-size: cover;
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  height: 100vh;
+  background-position: 50% 50%;
+}
+
+.full-banner {
+  background-image: url('../img/banner/creative-banner.jpg');
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  -webkit-background-size: cover;
+  background-size: cover;
+  position: relative;
+  background-position: 50% 50%;
+}
+
+.page-content {
+  padding: 100px 0;
+  display: inline-block;
+  width: 100%;
+}
+
+.page-content-sm {
+  padding: 50px 0;
+  display: inline-block;
+  width: 100%;
+}
+
+.full-content {
+  display: inline-block;
+  width: 100%;
+  padding: 0px 0 !important;
+}
+
+.overlay-dark {
+  background: rgba(0,0,0,.5);
+  display: inherit;
+}
+
+.overlay-light {
+  background: rgba(255,255,255,.5);
+  display: inherit;
+}
+
+.massive-list {
+  padding-left:15px;
+}
+
+.massive-list li{
+  margin-bottom: 10px;
+}

MissNationSharedUI/wwwroot/assets/sass/layout/_boxed-view.scss

@@ -0,0 +1,32 @@
+.boxed.box-bg {
+  background: #ddd;
+}
+
+.boxed .wrapper {
+  width: 1170px;
+  margin: 0 auto;
+  background: #fff;
+  position: relative;
+}
+
+.boxed header.sticky,
+.boxed header.sticky .header-sticky,
+.boxed header.transparent-header {
+  width: 1170px;
+}
+
+.box-background-img {
+  background-image: url("../img/parallax/para7.jpg");
+  background-size: cover;
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  height: 100vh;
+  background-position: 50% 50%;
+}
+
+.box-pattern {
+  background-image: url("../img/pattern-2.png");
+  background-attachment: fixed;
+  background-repeat: repeat;
+  background-position: 50% 50%;
+}

MissNationSharedUI/wwwroot/assets/sass/layout/_breadcrumb.scss

@@ -0,0 +1,15 @@
+.breadcrumb li {
+  text-transform: uppercase;
+}
+
+.breadcrumb li > a  {
+  color: #7e7e7e;
+}
+
+.breadcrumb li > a:hover {
+  color: #222;
+}
+
+.breadcrumb>.active {
+  color: #222;
+}

MissNationSharedUI/wwwroot/assets/sass/layout/_countdown.scss

@@ -0,0 +1,84 @@
+.count-down,
+.count-down-alt {
+  text-transform: uppercase;
+}
+
+.count-down .c-grid,
+.count-down-alt .c-grid {
+  width: 150px;
+  height: 150px;
+  display: inline-block;
+  text-align: center;
+  padding-top: 42px;
+  margin: 0 20px;
+}
+
+.count-down.light-bg .c-grid,
+.count-down-alt.light-bg .c-grid {
+  background: #fff;
+}
+
+.count-down-alt .c-grid {
+  border: 5px solid rgba(0,0,0,.2);
+}
+
+.count-down .c-grid  {
+  border: 1px solid #e0e0e0;
+}
+
+.count-down .c-grid,
+.count-down.light .c-grid  {
+  border: 1px solid #fff;
+}
+
+.count-down.light .c-value,
+.count-down.light .c-title,
+.count-down-alt.light .c-value,
+.count-down-alt.light .c-title {
+  color: #fff;
+}
+
+.count-down .c-value,
+.count-down .c-title,
+.count-down-alt .c-value,
+.count-down-alt .c-title {
+  display: block;
+}
+
+.count-down .c-value,
+.count-down-alt .c-value {
+  font-size: 30px;
+}
+
+.count-down .c-title,
+.count-down-alt .c-title {
+  font-size: 14px;
+  letter-spacing: 3px;
+}
+
+.count-down.circle .c-grid,
+.count-down-alt.circle .c-grid  {
+  border-radius: 50% !important;
+}
+
+.count-down.round .c-grid,
+.count-down-alt.round .c-grid  {
+  border-radius: 5px !important;
+}
+
+.count-parallax {
+  background-image: url("../img/parallax/5.jpg");
+  background-size: cover;
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+}
+
+.count-icon {
+  position: absolute;
+  right: 0;
+  top: 50px;
+}
+
+.count-icon i {
+  font-size: 40px;
+}

MissNationSharedUI/wwwroot/assets/sass/layout/_footer.scss

@@ -0,0 +1,255 @@
+#footer.gray {
+    background: #f5f5f5;
+    padding: 80px 0;
+}
+
+#footer.dark {
+    background: #222;
+}
+
+#footer.gray  .sub-title {
+    font-size: 12px;
+    color: #222;
+    letter-spacing: 2px;
+    margin: 15px 0;
+}
+
+#footer.dark  .sub-title {
+    font-size: 12px;
+    color: #ffffff;
+    letter-spacing: 2px;
+    margin: 15px 0;
+}
+
+#footer.gray  .social-link  a {
+    display: inline-block;
+    font-size: 20px;
+    color: #222;
+    margin: 10px;
+}
+
+#footer.dark  .social-link  a {
+    display: inline-block;
+    font-size: 20px;
+    color: #ffffff;
+    margin: 5px;
+}
+
+#footer.gray  .social-link.circle a {
+    border: 1px solid #222;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    line-height: 40px;
+    text-align: center;
+}
+
+#footer.dark  .social-link.circle a {
+    border: 1px solid #fff;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    line-height: 40px;
+    text-align: center;
+}
+
+#footer.gray  .social-link.circle a:hover {
+    background: #222;
+    color: #fff;
+    border: 1px solid transparent;
+}
+
+#footer.dark  .social-link.circle a:hover {
+    background: #fff;
+    color: #222;
+    border: 1px solid transparent;
+}
+
+#footer.gray  .copyright {
+    font-size: 14px;
+    color: #000;
+    letter-spacing: 2px;
+}
+
+#footer.dark  .copyright {
+    font-size: 14px;
+    color: #fff;
+    letter-spacing: 2px;
+}
+
+#footer.gray  .copyright-sub-title {
+    font-size: 12px;
+    letter-spacing: 2px;
+}
+
+.footer-logo {
+    display: block;
+}
+
+// Footer 2
+.f-link,
+#footer.dark h5 {
+    color: #fff;
+}
+
+#footer.dark h5 {
+    letter-spacing: 1px;
+}
+
+#footer.dark {
+    color: #6f7273;
+}
+
+#footer.dark .primary-footer {
+    background: #222222;
+    padding: 80px 0;
+}
+
+#footer .f-list, .r-work {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+#footer .f-list li a {
+    line-height: 45px;
+    color: #a2a2a2;
+    display: block;
+}
+
+#footer .f-list li  {
+    border-bottom: 1px solid #333333;
+}
+
+#footer .f-list li a:before {
+    content:"\f105";
+    font-family: 'fontawesome';
+    padding-right: 15px;
+}
+
+.r-work li a {
+    float: left;
+    margin: 0 10px 10px 0;
+}
+
+.r-work li a {
+    width: 55px;
+    height: 55px;
+}
+
+.r-work li a img{
+    width: 100%;
+    height: auto;
+}
+
+#footer.dark .secondary-footer {
+    background: #1b1b1b;
+    padding: 35px 0;
+    border-top:1px solid #2c2c2c ;
+    display: inline-block;
+    width: 100%;
+    font-weight: normal;
+}
+
+#footer.dark .secondary-footer .social-link  a {
+    display: inline-block;
+    font-size: 20px;
+    color: #5a5a5a;
+    margin:0 0 0 15px;
+}
+
+#footer.dark .secondary-footer .social-link.circle  a{
+    border: 1px solid #5a5a5a;
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    line-height: 35px;
+    text-align: center;
+}
+
+#footer.dark .secondary-footer .social-link.circle  a:hover{
+    background: #5a5a5a;
+    color: #fff;
+    border: 1px solid transparent;
+}
+
+// Footer 3
+.footer-3,
+.footer-4 {
+    position: relative;
+}
+
+.footer-3 .f-logo-center {
+    text-align: center;
+    position: absolute;
+    top: -50px;
+    background-color: #fff;
+    padding: 20px;
+    left: 50%;
+    margin-left: -3%;
+    border: 5px solid #f5f5f5;
+}
+
+.footer-4 .f-logo-center {
+    text-align: center;
+    position: absolute;
+    top: -50px;
+    background-color: #fff;
+    padding: 20px;
+    left: 50%;
+    margin-left: -5%;
+    border: 5px solid #222;
+}
+
+.footer-4.dark {
+    background: #222222;
+    padding: 80px 0;
+}
+
+.footer-4.dark .social-link  a {
+    display: inline-block;
+    font-size: 20px;
+    color: #fff;
+    margin: 10px;
+}
+
+.footer-4.dark  .social-link.circle a {
+    border: 1px solid #fff;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    line-height: 40px;
+    text-align: center;
+}
+
+.footer-4.dark  .social-link.circle a:hover {
+    background: #fff;
+    color: #222;
+    border: 1px solid transparent;
+}
+
+.footer-4.dark  .copyright {
+    font-size: 14px;
+    color: #fff;
+    letter-spacing: 2px;
+}
+
+.footer-4.dark  .copyright-sub-title {
+    font-size: 12px;
+    letter-spacing: 2px;
+    color: #d0d0d0;
+}
+
+.gray .border-top {
+    border-top:1px dashed rgba(0,0,0,0.1);
+    padding-top: 40px;
+}
+
+.dark .border-top {
+    border-top:1px dashed rgba(255,255,255,0.2);
+    padding-top: 40px;
+}
+
+.short-pad {
+    padding: 40px 0 !important;
+}

MissNationSharedUI/wwwroot/assets/sass/layout/_header.scss

@@ -0,0 +1,796 @@
+//.header-full-width .container {
+//  width: 100%;
+//  padding: 0 30px;
+//}
+//
+//.dark-header.header-bottom-border {
+//  border-bottom: 1px solid rgba(255,255,255,.2);
+//  height: 99px;
+//}
+//
+//.light-header.header-bottom-border {
+//  border-bottom: 1px solid rgba(0,0,0,.15);
+//  height: 99px;
+//
+//}
+//
+//.sticky .dark-header.header-bottom-border,
+//.sticky .light-header.header-bottom-border {
+//  border: none;
+//  height: auto;
+//}
+//
+//#header .container {
+//  position: relative;
+//}
+//
+//header {
+//  width: 100%;
+//  height: 100px;
+//  z-index: 1000;
+//  position: relative;
+//}
+//
+//header.transparent-header.sticky + #fullscreen-banner {
+//  margin-top: -100px;
+//}
+//
+//header.transparent-header + #fullscreen-banner {
+//  margin-top: 0px;
+//}
+//
+//header + #fullscreen-banner {
+//  margin-top: -100px;
+//
+//}
+//
+//.left-nav-fixed header + #fullscreen-banner {
+//  margin-top: 0px;
+//}
+//
+//header.sticky .header-sticky,
+//header.transparent-header {
+//  position: fixed;
+//  width: 100%;
+//}
+//
+//header.sticky .header-sticky {
+//  box-shadow: 0 1px 0 rgba(0,0,0,.05);
+//}
+//
+//header.sticky{
+//  height: 60px;
+//  z-index: 1000;
+//  position: fixed;
+//  top:0px;
+//}
+//
+//header .logo-brand img {
+//  height: 100px;
+//  float: left;
+//}
+//
+//header.sticky .logo-brand img,
+//header.sticky .logo-brand img.retina  {
+//  height: 60px !important;
+//}
+//
+//header.nav-center-align .logo-brand img {
+//  height: auto;
+//  float: none;
+//  margin: 20px 0;
+//}
+//
+//#header.transparent-header .light-header,
+//#header.transparent-header .dark-header,
+//#header.transparent-header {
+//  background: transparent !important;
+//  z-index: 1000;
+//}
+//
+//#header.transparent-header .menuzord .logo-brand {
+//  z-index: 1200;
+//}
+//
+//header .light-header,
+//header.sticky .light-header,
+//#header.transparent-header.sticky .light-header,
+//.light-nav{
+//  background: #fff !important;
+//}
+//
+//header .dark-header,
+//header.sticky .dark-header,
+//#header.transparent-header.sticky .dark-header,
+//.dark-nav,
+//header.sticky .semi-transparent {
+//  background: rgba(10,10,10, 1) !important;
+//}
+//
+//.semi-transparent{
+//  background: rgba(10,10,10, .5) !important;
+//}
+
+
+
+
+
+
+
+
+// Top Megamenu
+//.menuzord {
+//  background: none;
+//  padding: 0;
+//}
+//
+//.menuzord-menu>li>a,
+//header.sticky .menuzord-menu>li>a,
+//.logo-brand,
+//header .logo-brand img,
+//header.sticky .logo-brand,
+//header.sticky .logo-brand img,
+//header,
+//header .sticky,
+//header li.nav-icon i,
+//header.sticky li.nav-icon i {
+//  transition: all 0.3s ease;
+//}
+//
+//.nav-bottom {
+//  transition: none;
+//  -webkit-transition: none;
+//  -moz-transition: none;
+//}
+//
+//.menuzord-menu>li>a {
+//  line-height: 100px;
+//}
+//
+//.nav-border-bottom .menuzord-menu>li>a {
+//  line-height: 99px;
+//}
+//
+//header.sticky .menuzord-menu>li>a {
+//  line-height: 60px;
+//}
+//
+//.menuzord-menu>li>a,
+//header.sticky .menuzord-menu>li>a {
+//  padding: 0 12px;
+//}
+//
+//
+//.logo-brand {
+//  margin: 0px 30px 0 0;
+//  line-height: 100px;
+//}
+//
+//header.sticky .logo-brand {
+//  line-height: 60px;
+//}
+//
+//.menuzord-menu ul.dropdown li a,
+//.menuzord-menu>li>.megamenu a,
+//.menuzord-menu>li>.megamenu h5,
+//.menuzord-menu ul.dropdown li a {
+//  /*color:#b0b0b0 ;*/
+//  color: #222;
+//}
+//
+//.menuzord-menu>li>.megamenu h5 {
+//  font-weight: 600;
+//  font-size: 14px;
+//  margin-bottom: 20px;
+//  padding-left: 10px;
+//}
+//
+//
+//.menuzord-menu>li>.megamenu .megamenu-row li a {
+//  padding: 8px 10px;
+//  width: 100%;
+//  display: inline-block;
+//  font-size: 12px;
+//}
+//
+//.menuzord-menu>li>.megamenu .megamenu-row li:hover a {
+//  //background: rgba(255,255,255,.06);
+//}
+//
+//.menuzord,
+//.menuzord * {
+//  box-sizing: border-box;
+//  -moz-box-sizing: border-box;
+//  -webkit-box-sizing: border-box;
+//  font-family: 'Source Sans Pro', sans-serif;
+//  text-transform: uppercase;
+//  letter-spacing: .5px;
+//  font-weight: normal;
+//}
+//.menuzord {
+//  width: 100%;
+//  float: left;
+//  position: relative;
+//}
+//.menuzord a,
+//.menuzord-menu ul.dropdown li a {
+//  -o-transition: color .3s linear, background .3s linear;
+//  -moz-transition: color .3s linear, background .3s linear;
+//  -webkit-transition: color .3s linear, background .3s linear;
+//  transition: color .3s linear, background .3s linear
+//}
+//.menuzord-menu.scrollable>.scrollable-fix {
+//  display: none
+//}
+//.logo-brand {
+//  float: left;
+//  color: #666;
+//  text-decoration: none;
+//  font-size: 24px;
+//  font-weight: 600;
+//  cursor: pointer
+//}
+//.menuzord-menu {
+//  margin: 0;
+//  padding: 0;
+//  float: left;
+//  list-style: none
+//}
+//.menuzord-menu.menuzord-right {
+//  float: right
+//}
+//
+//.menuzord-menu>li {
+//  display: inline-block;
+//  float: left;
+//  margin-left: 2px;
+//}
+//
+//.menuzord-menu>li>a {
+//  display: inline-block;
+//  text-decoration: none;
+//  font-size: 13px;
+//  font-weight: normal;
+//  outline: 0;
+//  -webkit-tap-highlight-color: transparent
+//}
+//
+//.menuzord-menu>li>a,
+//.menuzord-menu>li>a>i,
+//.dark.menuzord-menu>li>a {
+//  color: #333;
+//}
+//
+//.light.menuzord-menu>li>a,
+//.light.menuzord-menu>li>a>i,
+//header .dark-header .menuzord-menu>li>a,
+//header .dark-header .menuzord-menu>li>a>i
+//{
+//  color: #fff;
+//}
+//
+//.menuzord-menu>li.active>a,
+//.menuzord-menu>li:hover>a {
+//  color: #333
+//}
+//.menuzord-menu ul.dropdown,
+//.menuzord-menu ul.dropdown li ul.dropdown {
+//  list-style: none;
+//  margin: 0;
+//  padding: 0;
+//  display: none;
+//  position: absolute;
+//  z-index: 99;
+//  min-width: 190px;
+//  white-space: nowrap;
+//  background: #fff
+//}
+//.menuzord-menu ul.dropdown li ul.dropdown {
+//  left: 100%;
+//  top:-1px;
+//}
+//.menuzord-menu ul.dropdown li {
+//  clear: both;
+//  width: 100%;
+//  border: 0;
+//  font-size: 12px;
+//  position: relative
+//}
+//.menuzord-menu ul.dropdown li a {
+//  width: 100%;
+//  background: 0 0;
+//  padding: 10px 25px 10px 22px;
+//  /*color: #b0b0b0;*/
+//  color: #222;
+//  text-decoration: none;
+//  display: inline-block;
+//  float: left;
+//  clear: both;
+//  position: relative;
+//  outline: 0;
+//}
+//.menuzord-menu ul.dropdown li:hover>a {
+//  padding-right: 19px;
+//  color: #333;
+//  //background: rgba(255,255,255,.06);
+//}
+//.menuzord-menu ul.dropdown.dropdown-left {
+//  left: none;
+//}
+//.menuzord-menu ul.dropdown li ul.dropdown.dropdown-left {
+//  left: -100%
+//}
+//
+//.menuzord-menu li .indicator {
+//  margin-left: 3px;
+//}
+//
+//.menuzord-menu li .indicator i{
+//  font-family: FontAwesome;
+//}
+//
+//.menuzord-menu li .indicator i.fa-angle-down:before{
+//  content: '';
+//}
+//
+//.menuzord-menu li ul.dropdown li .indicator {
+//  position: absolute;
+//  top: 8px;
+//  right: 10px;
+//  font-size: 15px
+//}
+//.menuzord-menu>li>.megamenu {
+//  width: 100%;
+//  padding: 20px;
+//  left: 0;
+//  position: absolute;
+//  display: none;
+//  z-index: 99;
+//  border-top: solid 1px #f0f0f0;
+//  background: #fff
+//}
+//.menuzord-menu>li>.megamenu.megamenu-half-width {
+//  width: 50%;
+//  left: auto
+//}
+//.menuzord-menu>li>.megamenu.megamenu-quarter-width {
+//  width: 25%;
+//  left: auto
+//}
+//.menuzord-menu>li>.megamenu .megamenu-row {
+//  width: 100%;
+//  margin-top: 15px
+//}
+//.menuzord-menu>li>.megamenu .megamenu-row:first-child {
+//  margin-top: 0
+//}
+//.menuzord-menu>li>.megamenu .megamenu-row:after,
+//.menuzord-menu>li>.megamenu .megamenu-row:before {
+//  display: table;
+//  content: "";
+//  line-height: 0
+//}
+//.menuzord-menu>li>.megamenu .megamenu-row:after {
+//  clear: both
+//}
+//.menuzord-menu>li>.megamenu .megamenu-row .col1,
+//.menuzord-menu>li>.megamenu .megamenu-row .col10,
+//.menuzord-menu>li>.megamenu .megamenu-row .col11,
+//.menuzord-menu>li>.megamenu .megamenu-row .col12,
+//.menuzord-menu>li>.megamenu .megamenu-row .col2,
+//.menuzord-menu>li>.megamenu .megamenu-row .col3,
+//.menuzord-menu>li>.megamenu .megamenu-row .col4,
+//.menuzord-menu>li>.megamenu .megamenu-row .col5,
+//.menuzord-menu>li>.megamenu .megamenu-row .col6,
+//.menuzord-menu>li>.megamenu .megamenu-row .col7,
+//.menuzord-menu>li>.megamenu .megamenu-row .col8,
+//.menuzord-menu>li>.megamenu .megamenu-row .col9 {
+//  display: block;
+//  min-height: 20px;
+//  float: left;
+//  margin-left: 3%
+//}
+//.menuzord-menu>li>.megamenu .megamenu-row [class*=col]:first-child {
+//  margin-left: 0
+//}
+//.menuzord-menu>li>.megamenu .megamenu-row .col1 {
+//  width: 5.583333333333%
+//}
+//.menuzord-menu>li>.megamenu .megamenu-row .col2 {
+//  width: 14.166666666666%
+//}
+//.menuzord-menu>li>.megamenu .megamenu-row .col3 {
+//  width: 22.75%
+//}
+//.menuzord-menu>li>.megamenu .megamenu-row .col4 {
+//  width: 31.333333333333%
+//}
+//.menuzord-menu>li>.megamenu .megamenu-row .col5 {
+//  width: 39.916666666667%
+//}
+//.menuzord-menu>li>.megamenu .megamenu-row .col6 {
+//  width: 48.5%
+//}
+//.menuzord-menu>li>.megamenu .megamenu-row .col7 {
+//  width: 57.083333333333%
+//}
+//.menuzord-menu>li>.megamenu .megamenu-row .col8 {
+//  width: 65.666666666667%
+//}
+//.menuzord-menu>li>.megamenu .megamenu-row .col9 {
+//  width: 74.25%
+//}
+//.menuzord-menu>li>.megamenu .megamenu-row .col10 {
+//  width: 82.833333333334%
+//}
+//.menuzord-menu>li>.megamenu .megamenu-row .col11 {
+//  width: 91.416666666667%
+//}
+//.menuzord-menu>li>.megamenu .megamenu-row .col12 {
+//  width: 100%
+//}
+//.menuzord .showhide {
+//  width: 30px;
+//  height: 46px;
+//  padding: 13px 0 0;
+//  display: none;
+//  float: right;
+//  text-decoration: none;
+//  outline: 0;
+//  -webkit-tap-highlight-color: transparent
+//}
+//.menuzord .showhide em {
+//  width: 20px;
+//  height: 3px;
+//  margin: 3.5px 0px 0;
+//  float: right;
+//  background: #777
+//}
+//.menuzord-menu>li>a>i {
+//  margin: 0 5px 0 0;
+//  font-size: 18px;
+//  float: left;
+//  line-height: 20px;
+//  font-family: FontAwesome
+//}
+//.menuzord-menu>li.search form {
+//  float: left;
+//  padding: 22px 16px 17px
+//}
+//.menuzord-menu>li.search form input[type=text] {
+//  width: 160px;
+//  padding: 5px 10px;
+//  border: none;
+//  background: #f0f0f0;
+//  border-radius: 2px;
+//  outline: 0;
+//  transition: width 1s ease-out
+//}
+//.menuzord-menu>li.search form:hover input[type=text] {
+//  width: 160px
+//}
+//.menuzord-tabs {
+//  width: 100%;
+//  float: left
+//}
+//.menuzord-tabs-nav {
+//  width: 20%;
+//  margin: 0;
+//  padding: 0;
+//  float: left;
+//  list-style: none
+//}
+//.menuzord-tabs-nav>li>a {
+//  width: 100%;
+//  padding: 7px 16px;
+//  float: left;
+//  font-size: 13px;
+//  text-decoration: none;
+//  color: #666;
+//  border: 1px solid #f0f0f0;
+//  outline: 0
+//}
+//.menuzord-tabs-nav li.active a,
+//.menuzord-tabs-nav li:hover a {
+//  background: #f0f0f0
+//}
+//.menuzord-tabs-content {
+//  width: 80%;
+//  min-height: 30px;
+//  padding: 20px;
+//  float: right;
+//  display: none;
+//  font-size: 13px;
+//  border: 1px solid #f0f0f0
+//}
+//.menuzord-tabs-content.active {
+//  display: block
+//}
+//
+//
+///*
+//Subcolored Skin
+//*/
+//
+///* Active/hover state (Menu items) */
+//.menuzord-menu > li.active > a,
+//.menuzord-menu > li:hover > a{
+//  //background: #333;
+//  //color: #fff;
+//}
+//
+///* Dropdown */
+//.menuzord-menu ul.dropdown,
+//.menuzord-menu ul.dropdown li ul.dropdown{
+//  //background: #222;
+//  background: #fff;
+//  border: 1px solid #efefef;
+//}
+//
+///* Hover state (dropdown items) */
+//.menuzord-menu ul.dropdown li:hover > a{
+//  color: #fff;
+//}
+//
+///* Megamenu */
+//.menuzord-menu > li > .megamenu{
+//  //background: #222;
+//  border-top: none;
+//  background: #fff;
+//  border: 1px solid #efefef;
+//}
+//
+///* tabs */
+//.menuzord-tabs-nav > li > a{
+//  color: #fff;
+//}
+//.menuzord-tabs-nav li.active a,
+//.menuzord-tabs-nav li:hover a{
+//  background: #f0f0f0;
+//  color: #666;
+//}
+//
+//
+//// Menu appear alt
+//.menu-appear-alt {
+//  display: none;
+//  background: #fff;
+//  box-shadow: 0 1px 0 rgba(0,0,0,.05);
+//}
+//
+//// Floating menu
+//.floating-menu {
+//  margin-top: 50px;
+//}
+//
+//.floating-menu .container {
+//  padding-right: 30px;
+//  padding-left: 30px;
+//}
+//
+//// Nav icon
+//header li.nav-icon i {
+//  line-height: 100px;
+//  font-size: 12px;
+//}
+//
+//header.sticky li.nav-icon i {
+//  line-height: 60px;
+//}
+//
+//header li.nav-icon .indicator {
+//  display: none;
+//}
+//
+//header li.nav-icon input {
+//  border-radius: 0;
+//  border: none;
+//  box-shadow: none;
+//  font-size: 11px;
+//}
+//
+//.nav-icon.nav-divider a,
+//.nav-icon.nav-divider a:hover{
+//  cursor: default;
+//  color: #888 !important;
+//  font-weight: normal;
+//}
+//
+//
+//.nav-border-bottom .menuzord .menuzord-menu>li.nav-divider.active>a,
+//.nav-border-bottom .menuzord .menuzord-menu>li.nav-divider:hover>a,
+//.nav-border-box .menuzord .menuzord-menu>li.nav-divider.active>a,
+//.nav-border-box .menuzord .menuzord-menu>li.nav-divider:hover>a {
+//  border-color:transparent;
+//}
+//
+//// Nav link boxed
+//.nav-boxed-color .menuzord-menu > li > a {
+//  margin: 30px 0px;
+//}
+//
+//.nav-boxed-color .menuzord-menu>li>a,
+//header .nav-boxed-color li.nav-icon i{
+//  line-height: 40px;
+//}
+//
+//header.sticky .nav-boxed-color li.nav-icon i {
+//  line-height: 60px;
+//}
+//
+//.nav-boxed-color .menuzord-menu > li.nav-divider > a,
+//.nav-boxed-color .menuzord-menu > li.nav-divider:hover > a {
+//  background: none;
+//}
+//
+//.nav-boxed-color .menuzord .menuzord-menu>li.active>a,
+//.nav-boxed-color .menuzord .menuzord-menu>li.active>a i,
+//.nav-boxed-color .menuzord .menuzord-menu>li:hover>a,
+//.nav-boxed-color .menuzord .menuzord-menu>li:hover>a>i
+//{
+//  color: #fff;
+//
+//}
+//
+//header.sticky .nav-boxed-color .menuzord-menu > li > a {
+//  margin: 0;
+//}
+//
+//
+//// Nav link border box
+//.nav-border-box .menuzord-menu > li > a {
+//  margin: 30px 0px;
+//}
+//
+//.nav-border-box .menuzord-menu>li>a,
+//header .nav-border-box li.nav-icon i{
+//  line-height: 40px;
+//}
+//
+//header.sticky .nav-border-box li.nav-icon i,
+//header.sticky .nav-border-box .menuzord-menu > li > a{
+//  line-height: 30px;
+//}
+//
+//.nav-border-box .menuzord-menu > li > a {
+//  border:1px solid transparent;
+//}
+//
+//header.sticky .nav-border-box .menuzord-menu > li > a {
+//  margin: 15px 0;
+//}
+//
+//// Nav link border bottom
+//.nav-border-bottom .menuzord .menuzord-menu>li>a,
+//.nav-border-bottom .menuzord .menuzord-menu>li>a{
+//  border-bottom:1px solid transparent;
+//}
+//
+//// Nav center align
+//.nav-center-align {
+//  text-align: center;
+//}
+//
+//.nav-center-align .logo-brand,
+//.nav-center-align .menuzord-menu,
+//.nav-center-align .menuzord-menu>li {
+//  float: none;
+//}
+//
+//.nav-center-align .logo-brand {
+//  margin: 0;
+//}
+//
+//.nav-center-align .menuzord-menu ul.dropdown,
+//.nav-center-align .menuzord-menu>li>.megamenu {
+//  text-align: left;
+//}
+//
+//
+//.nav-block-left .menuzord-menu  {
+//  width: 100%;
+//  height: 60px;
+//}
+//
+//.nav-center-align .menuzord-menu>li>a,
+//header.nav-center-align li.nav-icon i{
+//  line-height: 60px;
+//}
+//
+//.border-tb {
+//  border-bottom: 1px solid #eee;
+//  border-top: 1px solid #eee;
+//}
+//
+//header.nav-center-align {
+//  height: auto;
+//}
+//
+//.header-full-width.nav-center-align .container {
+//  padding: 0;
+//}
+//
+//// Nav bottom
+//.nav-bottom {
+//  position: absolute;
+//  bottom: 0;
+//  box-shadow: 0 1px 0 rgba(0,0,0,.05);
+//}
+//
+/////*header.sticky.nav-bottom {*/
+/////*position: fixed;*/
+/////*top: 0;*/
+/////*bottom: auto;*/
+/////*}*/
+//
+//// Nav block left
+//.nav-block-left {
+//  text-align: left;
+//
+//}
+//
+//.nav-block-left .menuzord-menu  {
+//  width: 100%;
+//  height: 60px;
+//}
+//
+//.nav-block-left .logo-brand,
+//.nav-block-left .menuzord-menu,
+//.nav-block-left .menuzord-menu>li {
+//  float: left;
+//}
+//
+//.nav-block-left .menuzord-menu>li>a,
+//header.nav-block-left li.nav-icon i{
+//  line-height: 60px;
+//}
+//
+//.nav-block-left .menuzord-menu ul.dropdown,
+//.nav-block-left .menuzord-menu>li>.megamenu {
+//  text-align: left;
+//}
+//
+//header.nav-block-left {
+//  height:auto;
+//}
+//
+//.header-full-width.nav-center-align .container {
+//  padding: 0;
+//}
+//
+///*search-box*/
+//.menuzord-menu>li.nav-icon {
+//  position: relative;
+//}
+//
+//.search-box {
+//  top:2px;
+//  background: none !important;
+//  width: 300px !important;
+//  right: 0% !important;
+//  padding: 30px 0 !important;
+//  border: none !important;
+//}
+//
+//.nav-center-align .search-box,
+//.nav-block-left .search-box {
+//  top:-18px;
+//}
+//
+//.sticky .search-box {
+//  top: 2px;
+//  padding: 10px 0 !important;
+//}
+//
+//.search-box input {
+//  border: 1px solid #ddd !important;
+//  position: absolute;
+//  right: 0;
+//  width: 100%;
+//}
+
+/*top-ads*/
+.top-ads {
+  float: right;
+  margin-top: 10px;
+}

MissNationSharedUI/wwwroot/assets/sass/layout/_isotope.scss

@@ -0,0 +1,34 @@
+.isotope-item {
+  z-index: 2;
+}
+
+.isotope-hidden.isotope-item {
+  pointer-events: none;
+  z-index: 1;
+}
+
+// Transitions
+.isotope,
+.isotope .isotope-item {
+  transition-duration: 0.8s;
+}
+
+.isotope {
+  transition-property: height, width;
+}
+
+.isotope .isotope-item {
+  transition-property: transform, opacity;
+}
+
+/*disabling Isotope CSS3 transitions */
+.isotope.no-transition,
+.isotope.no-transition .isotope-item,
+.isotope .isotope-item.no-transition {
+  transition-duration: 0s;
+}
+
+/* disable CSS transitions for containers with infinite scrolling*/
+.isotope.infinite-scrolling {
+  transition: none;
+}

MissNationSharedUI/wwwroot/assets/sass/layout/_mailchimp.scss

@@ -0,0 +1,3 @@
+.mailchimp label {
+  font-weight: normal;
+}

MissNationSharedUI/wwwroot/assets/sass/layout/_nav-dotten.scss

@@ -0,0 +1,185 @@
+.cd-img-replace {
+    /* replace text with a background-image */
+    display: inline-block;
+    overflow: hidden;
+    text-indent: 100%;
+    white-space: nowrap;
+}
+
+/* No Touch devices */
+//.cd-nav-trigger {
+//    display: none;
+//}
+
+.no-touch #cd-vertical-nav {
+    position: fixed;
+    right: 40px;
+    top: 50%;
+    bottom: auto;
+    transform: translateY(-50%);
+    z-index: 300;
+}
+.no-touch #cd-vertical-nav li {
+    text-align: right;
+    list-style: none;
+}
+.no-touch #cd-vertical-nav a {
+    display: inline-block;
+    /* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+}
+.no-touch #cd-vertical-nav a:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+.no-touch #cd-vertical-nav a span {
+    float: right;
+    display: inline-block;
+    transform: scale(0.6);
+}
+.no-touch #cd-vertical-nav a:hover span,
+.no-touch #cd-vertical-nav li.active span{
+    transform: scale(1);
+}
+.no-touch #cd-vertical-nav a:hover .cd-label {
+    opacity: 1;
+}
+.no-touch #cd-vertical-nav a.is-selected .cd-dot {
+    background-color: white;
+}
+.no-touch #cd-vertical-nav .cd-dot {
+    position: relative;
+    /* we set a top value in order to align the dot with the label. If you change label's font, you may need to change this top value*/
+    top: 11px;
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    background-color: #ababab;
+    transition: transform 0.2s, background-color 0.5s;
+    transform-origin: 50% 50%;
+}
+.no-touch #cd-vertical-nav .cd-label {
+    position: relative;
+    margin-right: 10px;
+    padding: .4em .5em;
+    color: #7e7e7e;
+    font-size: 14px;
+    transition: transform 0.2s, opacity 0.2s;
+    opacity: 0;
+    transform-origin: 100% 50%;
+}
+
+/* Touch devices */
+.touch .cd-nav-trigger {
+    display: block;
+    z-index: 9999;
+    position: fixed;
+    bottom: 30px;
+    top: inherit;
+    right: 5%;
+    height: 44px;
+    width: 44px;
+    border-radius: 0.25em;
+    background: rgba(255, 255, 255, 0.9);
+    box-shadow: 0px 1px 3px rgba(0,0,0, .3);
+}
+.touch .cd-nav-trigger span {
+    position: absolute;
+    height: 4px;
+    width: 4px;
+    background-color: #3e3947;
+    border-radius: 50%;
+    left: 50%;
+    top: 50%;
+    bottom: auto;
+    right: auto;
+    transform: translateX(-50%) translateY(-50%);
+}
+.touch .cd-nav-trigger span::before, .touch .cd-nav-trigger span::after {
+    content: '';
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    background-color: inherit;
+    border-radius: inherit;
+}
+.touch .cd-nav-trigger span::before {
+    top: -9px;
+}
+.touch .cd-nav-trigger span::after {
+    bottom: -9px;
+}
+
+.touch #cd-vertical-nav {
+    position: fixed;
+    z-index: 1200;
+    right: 5%;
+    bottom: 30px;
+    width: 90%;
+    max-width: 400px;
+    max-height: 90%;
+    overflow-y: scroll;
+    transform-origin: right bottom;
+    transform: scale(0);
+    transition-property: transform;
+    transition-duration: 0.2s;
+    border-radius: 0.25em;
+    background-color: rgba(255, 255, 255, 0.9);
+
+
+    ul.op-nav {
+      padding: 0;
+      margin: 0;
+    }
+}
+
+
+.touch #cd-vertical-nav a {
+    display: block;
+    padding: 1em;
+    border-bottom: 1px solid rgba(62, 57, 71, 0.1);
+}
+.touch #cd-vertical-nav a span:first-child {
+    display: none;
+}
+.touch #cd-vertical-nav a.is-selected span:last-child {
+    color: #7e7e7e;
+}
+.touch #cd-vertical-nav.open {
+    transform: scale(1);
+}
+.touch #cd-vertical-nav.open + .cd-nav-trigger {
+    background-color: transparent;
+}
+.touch #cd-vertical-nav.open + .cd-nav-trigger span {
+    background-color: rgba(62, 57, 71, 0);
+}
+.touch #cd-vertical-nav.open + .cd-nav-trigger span::before, .touch #cd-vertical-nav.open + .cd-nav-trigger span::after {
+    background-color: #3e3947;
+    height: 3px;
+    width: 20px;
+    border-radius: 0;
+    left: -8px;
+}
+.touch #cd-vertical-nav.open + .cd-nav-trigger span::before {
+    transform: rotate(45deg);
+    top: 1px;
+}
+.touch #cd-vertical-nav.open + .cd-nav-trigger span::after {
+    transform: rotate(135deg);
+    bottom: 0;
+}
+.touch #cd-vertical-nav li:last-child a {
+    border-bottom: none;
+}
+
+@media only screen and (min-width: 768px) {
+    .touch .cd-nav-trigger, .touch #cd-vertical-nav {
+        bottom: 40px;
+    }
+
+
+}

MissNationSharedUI/wwwroot/assets/sass/layout/_nav-primary.scss

@@ -0,0 +1,77 @@
+#primary_nav_wrap {
+
+}
+
+#primary_nav_wrap ul
+{
+  list-style:none;
+  position:relative;
+  float:left;
+  margin:0;
+  padding:0;
+  z-index: 1200;
+
+}
+
+#primary_nav_wrap ul a
+{
+  display:block;
+  color:#8B8B8B;
+  text-decoration:none;
+  font-size:12px;
+  line-height:40px;
+  padding:0 15px;
+}
+
+#primary_nav_wrap ul li
+{
+  position:relative;
+  float:left;
+  margin:0;
+  padding:0
+}
+
+#primary_nav_wrap ul li.current-menu-item
+{
+  background:#ddd
+}
+
+#primary_nav_wrap ul li:hover
+{
+  background: rgba(255,255,255,.06);
+}
+
+#primary_nav_wrap ul ul
+{
+  display:none;
+  position:absolute;
+  top:100%;
+  left:15px;
+  background:#222;
+  /*border: 1px solid #eee;*/
+  padding:0
+}
+
+#primary_nav_wrap ul ul li
+{
+  float:none;
+  min-width:150px
+}
+
+#primary_nav_wrap ul ul a
+{
+  line-height:120%;
+  padding:10px 15px;
+  color: #b0b0b0;
+}
+
+#primary_nav_wrap ul ul ul
+{
+  top:0;
+  left:100%
+}
+
+#primary_nav_wrap ul li:hover > ul
+{
+  display:block
+}

MissNationSharedUI/wwwroot/assets/sass/layout/_nav-push.scss

@@ -0,0 +1,245 @@
+.navigation-is-open main {
+    transform: translateX(100%);
+}
+
+.cd-nav-trigger {
+    position: fixed;
+    z-index: 1300;
+    right: 2%;
+    top: 20px;
+    height: 40px;
+    width: 40px;
+    background-color: rgba(0,0,0,.9);
+    border-radius: 0px;
+    /* image replacement */
+    overflow: hidden;
+    text-indent: 100%;
+    white-space: nowrap;
+    transition: transform 0.5s;
+}
+
+.cd-nav-trigger .cd-nav-icon {
+    /* icon created in CSS */
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    bottom: auto;
+    right: auto;
+    transform: translateX(-50%) translateY(-50%);
+    width: 20px;
+    height: 2px;
+    background-color: #ffffff;
+}
+
+.cd-nav-trigger .cd-nav-icon::before, .cd-nav-trigger .cd-nav-icon:after {
+    /* upper and lower lines of the menu icon */
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    background-color: inherit;
+    /* Force Hardware Acceleration in WebKit */
+    transform: translateZ(0);
+    backface-visibility: hidden;
+    transition: transform 0.5s, width 0.5s, top 0.3s;
+}
+
+.cd-nav-trigger .cd-nav-icon::before {
+    transform-origin: right top;
+    transform: translateY(-6px);
+}
+
+.cd-nav-trigger .cd-nav-icon::after {
+    transform-origin: right bottom;
+    transform: translateY(6px);
+}
+.no-touch .cd-nav-trigger:hover .cd-nav-icon::after {
+    top: 2px;
+}
+
+.no-touch .cd-nav-trigger:hover .cd-nav-icon::before {
+    top: -2px;
+}
+
+.cd-nav-trigger svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.cd-nav-trigger circle {
+    transition: stroke-dashoffset 0.4s 0s;
+}
+.navigation-is-open .cd-nav-trigger {
+    transform: rotate(180deg);
+}
+.navigation-is-open .cd-nav-trigger .cd-nav-icon::after,
+.navigation-is-open .cd-nav-trigger .cd-nav-icon::before {
+    /* animate arrow --> from hamburger to arrow */
+    width: 50%;
+    transition: transform 0.5s, width 0.5s;
+}
+.navigation-is-open .cd-nav-trigger .cd-nav-icon::before {
+    transform: rotate(45deg);
+}
+.navigation-is-open .cd-nav-trigger .cd-nav-icon::after {
+    transform: rotate(-45deg);
+}
+.no-touch .navigation-is-open .cd-nav-trigger:hover .cd-nav-icon::after, .no-touch .navigation-is-open .cd-nav-trigger:hover .cd-nav-icon::before {
+    top: 0;
+}
+.navigation-is-open .cd-nav-trigger circle {
+    stroke-dashoffset: 0;
+    transition: stroke-dashoffset 0.4s 0.3s;
+}
+@media only screen and (min-width: 1170px) {
+    .cd-nav-trigger {
+        top: 40px;
+    }
+}
+
+.cd-nav {
+    position: fixed;
+    z-index: 1200;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-color: rgba(0,0,0,.9);
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 0s 0.7s, opacity 0s 0.7s;
+}
+.cd-nav .cd-navigation-wrapper {
+    /* all navigation content */
+    height: 100%;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    padding: 40px 5% 40px calc(5% + 80px);
+    /* Force Hardware Acceleration in WebKit */
+    transform: translateZ(0);
+    backface-visibility: hidden;
+    transform: translateX(-50%);
+    transition: transform 0.7s;
+    transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
+}
+.navigation-is-open .cd-nav {
+    visibility: visible;
+    opacity: 1;
+    transition: visibility 0s 0s, opacity 0s 0s;
+}
+.navigation-is-open .cd-nav .cd-navigation-wrapper {
+    transform: translateX(0);
+    transition: transform 0.5s;
+    transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
+}
+.cd-nav h2 {
+    position: relative;
+    margin-bottom: 1.7em;
+    font-size: 1.3rem;
+    font-weight: 800;
+    color: #e8e8e8;
+    text-transform: uppercase;
+}
+.cd-nav h2::after {
+    /* bottom separation line */
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: -20px;
+    height: 1px;
+    width: 60px;
+    background-color: currentColor;
+}
+.cd-nav .cd-primary-nav {
+    margin-top: 60px;
+    padding: 0;
+    list-style: none;
+}
+.cd-nav .cd-primary-nav li {
+    margin: 1.6em 0;
+}
+.cd-nav .cd-primary-nav a {
+    /*font-family: "Merriweather", serif;*/
+    font-size: 2.4rem;
+    color: rgba(255, 255, 255, 0.7);
+    display: inline-block;
+}
+
+
+.cd-nav .cd-contact-info {
+    margin-top: 80px;
+    padding: 0;
+    list-style: none;
+}
+.cd-nav .cd-contact-info li {
+    /*font-family: "Merriweather", serif;*/
+    margin-bottom: 1.5em;
+    line-height: 1.2;
+    color: rgba(255, 255, 255, 0.6);
+}
+.cd-nav .cd-contact-info a {
+    color: #ffffff;
+}
+.cd-nav .cd-contact-info span {
+    display: block;
+}
+.cd-nav .cd-contact-info li, .cd-nav .cd-contact-info a, .cd-nav .cd-contact-info span {
+    font-size: 1.6rem;
+}
+@media only screen and (min-width: 1170px) {
+    .cd-nav .cd-navigation-wrapper {
+        padding: 62px 20%;
+    }
+    .cd-nav .cd-navigation-wrapper::after {
+        clear: both;
+        content: "";
+        display: table;
+    }
+    .cd-nav .cd-half-block {
+        width: 50%;
+        float: left;
+    }
+    .cd-nav .cd-primary-nav {
+        margin-top: 0;
+    }
+    .cd-nav h2 {
+        font-size: 1.5rem;
+        margin-bottom: 5.6em;
+    }
+    .cd-nav .cd-primary-nav li {
+        margin: 1em 0;
+    }
+    .cd-nav .cd-primary-nav a {
+        font-size: 2.5rem;
+        font-weight: 300;
+    }
+    .cd-nav .cd-contact-info {
+        margin-top: 120px;
+        text-align: right;
+    }
+    .cd-nav .cd-contact-info li {
+        margin-bottom: 2.4em;
+    }
+    .cd-nav .cd-contact-info li, .cd-nav .cd-contact-info a, .cd-nav .cd-contact-info span {
+        font-size: 1.6rem;
+        line-height: 25px;
+    }
+}
+
+.no-js main {
+    height: auto;
+    overflow: visible;
+}
+
+.no-js .cd-nav {
+    position: static;
+    visibility: visible;
+}
+.no-js .cd-nav .cd-navigation-wrapper {
+    height: auto;
+    overflow: visible;
+    padding: 100px 5%;
+    transform: translateX(0);
+}

MissNationSharedUI/wwwroot/assets/sass/layout/_nav-side.scss

@@ -0,0 +1,288 @@
+/*------------------------------------------------------------------
+    left side nav fixed
+-------------------------------------------------------------------*/
+
+body.left-nav-fixed {
+    overflow-x: hidden;
+}
+
+.left-nav-fixed .wrapper  {
+    margin-left: 260px;
+}
+
+.left-nav-fixed .logo-area  {
+    padding: 40px 20px;
+    display: inline-block;
+    width: 100%;
+}
+.left-nav-fixed .logo-brand  {
+    float: none;
+    margin: 0;
+}
+
+.left-nav-fixed #header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 300;
+    width: 260px;
+    height: 100%;
+    background-color: #FFF;
+    border-right: 1px solid #eee;
+}
+
+.border-less {
+    border: none !important;
+}
+
+
+.left-nav-fixed header.header-full-width .container,
+.left-nav-fixed header .container {
+    width: 100%;
+    padding: 0;
+}
+
+.left-nav-fixed .container {
+    width: auto;
+    padding: 0 30px;
+}
+
+.left-nav-fixed .menuzord-menu>li>a,
+.left-nav-fixed header.sticky .menuzord-menu>li>a {
+    padding: 0;
+}
+
+.left-nav-fixed .menuzord-menu li,
+.left-nav-fixed .menuzord-menu li a{
+    width: 100%;
+}
+
+.left-nav-fixed  .menuzord-menu>li>a {
+    line-height: 40px;
+    padding: 0 20px;
+}
+
+.left-nav-fixed .menuzord-menu li ul {
+    margin-left: 258px;
+    margin-top: -40px;
+}
+
+.left-nav-fixed .menuzord-menu li .megamenu-row ul {
+    margin-left: 0;
+    margin-top: 0;
+}
+
+.left-nav-fixed  .menuzord-menu>li>.megamenu {
+    width: 800px;
+    padding: 20px;
+    left: 260px;
+    position: absolute;
+    display: none;
+    z-index: 99;
+    border-top: none;
+    background: none;
+    margin-top: -40px;
+    background: #fff;
+}
+
+
+.left-nav-fixed header .light-header,
+.left-nav-fixed header.sticky .light-header,
+.left-nav-fixed #header.transparent-header.sticky .light-header,
+.left-nav-fixed .light-nav {
+    background: none !important;
+}
+
+.left-nav-fixed header.sticky .header-sticky {
+    box-shadow: none;
+}
+
+.left-nav-fixed header.sticky .header-sticky,
+.left-nav-fixed header.transparent-header {
+    position: static;
+    width: 100%;
+}
+
+
+.left-nav-fixed .menuzord-menu>li>a,
+.left-nav-fixed header.sticky .menuzord-menu>li>a,
+.left-nav-fixed .logo-brand, header.sticky .logo-brand,
+.left-nav-fixed header li.nav-icon i,
+.left-nav-fixed header.sticky li.nav-icon i {
+    -webkit-transition: none;
+    -moz-transition: none;
+    transition: none;
+}
+
+.left-nav-fixed .menuzord-menu li .indicator {
+    margin-left: 3px;
+    float: right;
+}
+
+.side-social-link {
+    margin-top: 50px;
+    display: inline-block;
+    padding: 0 20px;
+    text-align: center;
+}
+
+.side-social-link a {
+    display: inline-block;
+    margin: 0 2px;
+    color: #bababa;
+    width: 35px;
+    height: 35px;
+    line-height: 35px;
+    text-align: center;
+    border: 1px solid #bababa;
+    border-radius: 50%;
+}
+
+.side-social-link a:hover {
+    color: #fff;
+}
+
+
+
+.left-nav-fixed .menuzord-menu>li>a {
+    color: #222;
+}
+
+/*dark nav*/
+
+
+.left-nav-fixed.dark-side-nav #header {
+    background-color: #333;
+    border-right: none;
+}
+
+
+.left-nav-fixed.dark-side-nav .menuzord-menu>li>a {
+    color: #fff;
+}
+
+/*nav toggle*/
+
+.side-nav-toggle {
+    position: absolute;
+    right: -50px;
+    top: 15px;
+    background-color: #fff;
+    padding: 5px 10px;
+    color: #222;
+}
+
+.side-nav-close .wrapper {
+    margin-left: 0px !important;
+}
+
+.side-nav-close #header {
+    left: -260px !important;
+}
+
+
+.side-nav-open .wrapper {
+    margin-left: 260px;
+}
+
+.side-nav-open #header {
+    left: 0px;
+}
+
+/*side-push-nav*/
+
+.side-push-nav .container {
+    width: 1170px;
+}
+
+.side-push-nav .wrapper,
+.side-push-nav #header {
+    transition:all 0.3s;
+}
+
+/*responsive issue fix*/
+
+body {
+  overflow-x: hidden;
+}
+
+.body_has-navbar-left {
+  .container {
+    max-width: 1170px;
+  }
+}
+
+@media (min-width: 768px) {
+  .body_has-navbar-left {
+    .container {
+      max-width: 505px;
+    }
+  }
+}
+
+@media (min-width: 1012px) {
+  .body_has-navbar-left {
+    .container {
+      max-width: 750px;
+    }
+  }
+}
+
+@media (min-width: 1230px) {
+  .body_has-navbar-left {
+    .container {
+      max-width: 970px;
+    }
+  }
+}
+
+@media (min-width: 1430px) {
+  .body_has-navbar-left {
+    .container {
+      max-width: 1170px;
+    }
+  }
+}
+
+
+//
+
+@media (min-width: 768px) {
+  .body_has-navbar-left {
+    .portfolio.col-3 {
+      .portfolio-item {
+        width: 100%;
+      }
+    }
+  }
+}
+
+@media (min-width: 1012px) {
+  .body_has-navbar-left {
+    .portfolio.col-3 {
+      .portfolio-item {
+        width: 50%;
+      }
+    }
+  }
+}
+
+@media (min-width: 1230px) {
+  .body_has-navbar-left {
+    .portfolio.col-3 {
+      .portfolio-item {
+        width: 50%;
+      }
+    }
+  }
+}
+
+@media (min-width: 1430px) {
+  .body_has-navbar-left {
+    .portfolio.col-3 {
+      .portfolio-item {
+        width: 33.33333333%;
+      }
+    }
+  }
+}

MissNationSharedUI/wwwroot/assets/sass/layout/_navbar.scss

@@ -0,0 +1,666 @@
+.menuzord {
+  width: 100%;
+  float: left;
+  position: relative;
+  text-transform: uppercase;
+  letter-spacing: .5px;
+  background: none;
+  padding: 0;
+}
+
+.logo-brand {
+  float: left;
+  height: 50px;
+  margin-right: 30px;
+  font-size: 20px;
+  line-height: 50px;
+  font-weight: 600;
+  color: #666;
+}
+
+.logo-brand img {
+  position: relative;
+  top: -2px;
+  display: inline-block;
+  max-height: 100%;
+  padding: 2px 0;
+}
+
+.menuzord-menu {
+  margin: 0;
+  padding: 0;
+  float: left;
+  list-style: none
+}
+
+.menuzord-menu.menuzord-right {
+  float: right
+}
+
+.menuzord-menu ul.dropdown li a,
+.menuzord-menu > li > .megamenu a,
+.menuzord-menu > li > .megamenu h5 {
+  color: #222;
+}
+
+.menuzord-menu > li > .megamenu h5 {
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 20px;
+  padding-left: 10px;
+}
+
+.menuzord-menu > li > .megamenu .megamenu-row li a {
+  padding: 8px 10px;
+  width: 100%;
+  display: inline-block;
+  font-size: 12px;
+}
+
+.menuzord-menu a {
+  transition: color .3s, background .3s;
+}
+
+.menuzord-menu.scrollable>.scrollable-fix {
+  display: none
+}
+
+.menuzord-menu > li {
+  display: inline-block;
+  float: left;
+  margin-left: 2px;
+}
+
+.menuzord-menu > li > a {
+  display: inline-block;
+  text-decoration: none;
+  font-size: 13px;
+  font-weight: normal;
+  outline: 0;
+  -webkit-tap-highlight-color: transparent;
+  padding: 0 12px;
+  color: #333;
+}
+
+.menuzord-menu > li.active > a,
+.menuzord-menu > li:hover > a {
+  color: #333
+}
+
+.menuzord-menu ul.dropdown,
+.menuzord-menu ul.dropdown li ul.dropdown {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: none;
+  position: absolute;
+  z-index: 1000;
+  min-width: 190px;
+  white-space: nowrap;
+  background: #fff
+}
+
+.menuzord-menu ul.dropdown li ul.dropdown {
+  left: 100%;
+  top:-1px;
+}
+
+.menuzord-menu ul.dropdown li {
+  clear: both;
+  width: 100%;
+  border: 0;
+  font-size: 12px;
+  position: relative
+}
+
+.menuzord-menu ul.dropdown li a {
+  width: 100%;
+  background: 0 0;
+  padding: 10px 25px 10px 22px;
+  color: #222;
+  text-decoration: none;
+  display: inline-block;
+  float: left;
+  clear: both;
+  position: relative;
+  outline: 0;
+}
+
+.menuzord-menu ul.dropdown li:hover > a {
+  padding-right: 19px;
+  color: #333;
+}
+
+.menuzord-menu ul.dropdown.dropdown-left {
+  left: auto;
+}
+
+.menuzord-menu ul.dropdown li ul.dropdown.dropdown-left {
+  left: auto;
+  right: 100%;
+}
+
+.menuzord-menu li .indicator {
+  margin-left: 3px;
+}
+
+.menuzord-menu li ul.dropdown li .indicator {
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  font-size: 15px
+}
+
+.menuzord-menu > li > .megamenu {
+  width: 100%;
+  padding: 20px;
+  left: 0;
+  position: absolute;
+  display: none;
+  z-index: 1000;
+  border-top: solid 1px #f0f0f0;
+  background: #fff
+}
+
+.menuzord-menu > li > .megamenu.megamenu-half-width {
+  width: 50%;
+  left: auto
+}
+
+.menuzord-menu > li > .megamenu.megamenu-quarter-width {
+  width: 25%;
+  left: auto
+}
+
+.menuzord-menu > li > .megamenu .megamenu-row {
+  width: 100%;
+  margin-top: 15px
+}
+
+.menuzord-menu > li > .megamenu .megamenu-row:first-child {
+  margin-top: 0
+}
+
+.menuzord-menu > li > .megamenu .megamenu-row:after,
+.menuzord-menu > li > .megamenu .megamenu-row:before {
+  display: table;
+  content: "";
+  line-height: 0
+}
+
+.menuzord-menu>li>.megamenu .megamenu-row:after {
+  clear: both
+}
+
+.menuzord-menu>li>.megamenu .megamenu-row .col1,
+.menuzord-menu>li>.megamenu .megamenu-row .col10,
+.menuzord-menu>li>.megamenu .megamenu-row .col11,
+.menuzord-menu>li>.megamenu .megamenu-row .col12,
+.menuzord-menu>li>.megamenu .megamenu-row .col2,
+.menuzord-menu>li>.megamenu .megamenu-row .col3,
+.menuzord-menu>li>.megamenu .megamenu-row .col4,
+.menuzord-menu>li>.megamenu .megamenu-row .col5,
+.menuzord-menu>li>.megamenu .megamenu-row .col6,
+.menuzord-menu>li>.megamenu .megamenu-row .col7,
+.menuzord-menu>li>.megamenu .megamenu-row .col8,
+.menuzord-menu>li>.megamenu .megamenu-row .col9 {
+  display: block;
+  min-height: 20px;
+  float: left;
+  margin-left: 3%
+}
+
+.menuzord-menu>li>.megamenu .megamenu-row [class*=col]:first-child {
+  margin-left: 0
+}
+
+.menuzord-menu>li>.megamenu .megamenu-row .col1 {
+  width: 5.583333333333%
+}
+
+.menuzord-menu>li>.megamenu .megamenu-row .col2 {
+  width: 14.166666666666%
+}
+
+.menuzord-menu>li>.megamenu .megamenu-row .col3 {
+  width: 22.75%
+}
+
+.menuzord-menu>li>.megamenu .megamenu-row .col4 {
+  width: 31.333333333333%
+}
+
+.menuzord-menu>li>.megamenu .megamenu-row .col5 {
+  width: 39.916666666667%
+}
+
+.menuzord-menu>li>.megamenu .megamenu-row .col6 {
+  width: 48.5%
+}
+
+.menuzord-menu>li>.megamenu .megamenu-row .col7 {
+  width: 57.083333333333%
+}
+
+.menuzord-menu>li>.megamenu .megamenu-row .col8 {
+  width: 65.666666666667%
+}
+
+.menuzord-menu>li>.megamenu .megamenu-row .col9 {
+  width: 74.25%
+}
+
+.menuzord-menu>li>.megamenu .megamenu-row .col10 {
+  width: 82.833333333334%
+}
+
+.menuzord-menu>li>.megamenu .megamenu-row .col11 {
+  width: 91.416666666667%
+}
+
+.menuzord-menu>li>.megamenu .megamenu-row .col12 {
+  width: 100%
+}
+
+.menuzord .showhide {
+  width: 30px;
+  height: 46px;
+  padding: 13px 0 0;
+  display: none;
+  float: right;
+  text-decoration: none;
+  outline: 0;
+  -webkit-tap-highlight-color: transparent
+}
+
+.menuzord .showhide em {
+  width: 20px;
+  height: 3px;
+  margin: 3.5px 0px 0;
+  float: right;
+  background: #777
+}
+
+.menuzord-menu > li > a > .fa {
+  margin: 0 5px 0 0;
+  font-size: 14px;
+  float: left;
+  line-height: inherit;
+  color: inherit;
+}
+
+.menuzord-menu>li.search form {
+  float: left;
+  padding: 22px 16px 17px;
+}
+
+.menuzord-tabs {
+  width: 100%;
+  float: left
+}
+
+.menuzord-tabs-nav {
+  width: 20%;
+  margin: 0;
+  padding: 0;
+  float: left;
+  list-style: none
+}
+
+.menuzord-tabs-nav>li>a {
+  width: 100%;
+  padding: 7px 16px;
+  float: left;
+  font-size: 13px;
+  text-decoration: none;
+  color: #666;
+  border: 1px solid #f0f0f0;
+  outline: 0
+}
+
+.menuzord-tabs-nav li.active a,
+.menuzord-tabs-nav li:hover a {
+  background: #f0f0f0
+}
+
+.menuzord-tabs-content {
+  width: 80%;
+  min-height: 30px;
+  padding: 20px;
+  float: right;
+  display: none;
+  font-size: 13px;
+  border: 1px solid #f0f0f0
+}
+
+.menuzord-tabs-content.active {
+  display: block
+}
+
+.menuzord-menu ul.dropdown,
+.menuzord-menu ul.dropdown li ul.dropdown{
+  background: #fff;
+  border: 1px solid #efefef;
+}
+
+.menuzord-menu ul.dropdown li:hover > a{
+  color: #fff;
+}
+
+.menuzord-menu > li > .megamenu {
+  border-top: none;
+  background: #fff;
+  border: 1px solid #efefef;
+}
+
+.menuzord-tabs-nav > li > a {
+  color: #fff;
+}
+
+.navbar-search .form-control {
+  border-radius: 0;
+}
+
+
+// New header and navbar
+@media (max-width: 768px) {
+  .wrapper {
+    // margin-top: 50px;
+  }
+
+  .l-header {
+    position: fixed;
+    width: 100%;
+    top: 0px;
+    z-index: 1000;
+    background: #fff;
+    box-shadow: 0 2px 2px rgba(0,0,0,.1);
+  }
+
+  .menuzord-responsive .menuzord-menu > li.nav-divider {
+    display: none;
+  }
+
+  .l-navbar_t-light,
+  .l-navbar_t-light-trans,
+  .l-navbar_t-dark .showhide em,
+  .l-navbar_t-semi-trans .showhide em,
+  .l-navbar_t-dark-trans .showhide em {
+    background: #fff;
+  }
+
+  .l-navbar_t-dark,
+  .l-navbar_t-semi-trans,
+  .l-navbar_t-dark-trans {
+    background: #0a0a0a;
+  }
+}
+
+@media (min-width: 769px) {
+  .l-header_overlay {
+    position: absolute;
+    z-index: 1200;
+    top: 0;
+    width: 100%;
+  }
+
+  .menuzord-menu .megamenu,
+  .menuzord-menu .dropdown {
+    text-align: left;
+    border: 0 !important;
+  }
+
+  .menuzord-menu .megamenu,
+  .menuzord-menu .dropdown,
+  .l-navbar-wrapper_has-sticky .l-navbar,
+  .l-navbar_s-left {
+    box-shadow: 0 1px 2px rgba(0,0,0,.1);
+  }
+
+  .logo-brand {
+    height: 100px;
+    display: inline-block;
+  }
+
+  .l-navbar-wrapper_has-sticky .logo-brand {
+    display: block;
+  }
+
+  .logo-brand,
+  .c-nav_s-standard > li > a {
+    line-height: 100px;
+  }
+
+  .c-nav_s-bg > li > a {
+    line-height: 40px;
+  }
+
+  .c-nav_s-bg > li.active > a,
+  .c-nav_s-bg > li:hover > a {
+    color: #fff !important;
+  }
+
+  .c-nav_s-outline > li > a {
+    border: 1px solid transparent;
+    line-height: 38px;
+  }
+
+  .c-nav_s-underline > li > a {
+    line-height: 99px;
+    border-bottom: 1px solid transparent;
+  }
+
+  .l-navbar_expand .c-nav_s-bg > li > a,
+  .l-navbar_expand .c-nav_s-outline > li > a {
+    margin: 30px 0;
+  }
+
+  .l-navbar_compact .c-nav_s-bg > li > a,
+  .l-navbar_compact .c-nav_s-outline > li > a {
+    margin: 10px 0;
+  }
+
+  .l-navbar-wrapper_has-sticky .c-nav_s-bg > li > a,
+  .l-navbar-wrapper_has-sticky .c-nav_s-outline > li > a {
+    margin: 0;
+  }
+
+  .l-navbar-wrapper_has-sticky .c-nav_s-outline > li > a {
+    line-height: 58px;
+  }
+
+  .menuzord-menu .dropdown > li > a,
+  .menuzord-menu .megamenu-row li > a {
+    line-height: 18px;
+  }
+
+  .l-navbar-wrapper,
+  .logo-brand,
+  .menuzord-menu > li > a {
+    transition: height .3s, line-height .3s, margin .3s;
+  }
+
+  .l-navbar_t-light {
+    background: #fff;
+  }
+
+  .l-navbar_t-dark {
+    background: rgba(10,10,10, 1);
+  }
+
+  .l-navbar_t-dark .menuzord-menu > li > a,
+  .l-navbar_t-semi-trans .menuzord-menu > li > a,
+  .l-navbar_t-dark-trans .menuzord-menu > li > a {
+    color: #fff;
+  }
+
+  .l-navbar_t-semi-trans {
+    background: rgba(10,10,10,.5);
+  }
+
+  .l-navbar_t-light-trans,
+  .l-navbar_t-dark-trans,
+  .l-navbar_t-semi-trans {
+    transition: background-color .3s;
+  }
+
+  .l-navbar_compact .logo-brand {
+    height: 60px;
+  }
+
+  .l-navbar_compact .logo-brand,
+  .l-navbar_compact .c-nav_s-standard > li > a {
+    line-height: 60px;
+  }
+
+  .l-navbar_compact.l-navbar_s-center .logo-brand {
+    height: 100px;
+  }
+
+  .l-navbar_s-center {
+    text-align: center;
+  }
+
+  .l-navbar_s-center.l-navbar_t-light {
+    border-top-color: #ddd;
+  }
+
+  .l-navbar_s-center.l-navbar_t-light-trans .menuzord-menu,
+  .l-navbar_s-center.l-navbar_t-dark-trans .menuzord-menu,
+  .l-navbar_s-center.l-navbar_t-semi-trans .menuzord-menu {
+    border-top-color: rgba(10,10,10,.2);
+  }
+
+  .l-navbar_s-center.l-navbar_t-dark {
+    border-top-color: #222;
+  }
+
+  .l-navbar_s-center .logo-brand {
+    float: none;
+  }
+
+  .l-navbar_s-center .menuzord-menu,
+  .l-navbar_s-center .menuzord-menu > li {
+    float: none;
+    text-align: center;
+  }
+
+  .l-navbar_s-center .logo-brand.sticky-fix {
+    float: left;
+  }
+
+  .l-navbar-wrapper_has-sticky .l-navbar_s-center .menuzord-menu.menuzord-right,
+  .l-navbar-wrapper_has-sticky .l-navbar_s-center .menuzord-menu.pull-right {
+    float: right;
+  }
+
+  .l-navbar_s-floating {
+    width: 1170px;
+    margin: auto;
+    margin-top: 50px;
+  }
+
+  .l-navbar-wrapper_has-sticky .l-navbar_s-floating {
+    margin-top: 0;
+  }
+
+  .l-navbar-wrapper_has-sticky .l-navbar_t-semi-trans,
+  .l-navbar-wrapper_has-sticky .l-navbar_t-dark-trans {
+    background: #0a0a0a;
+  }
+
+  .l-navbar-wrapper_has-sticky .l-navbar_t-light-trans {
+    background: #fff;
+  }
+
+  .l-navbar-wrapper_has-sticky .logo-brand,
+  .l-navbar-wrapper_has-sticky .menuzord-menu > li > a {
+    line-height: 60px;
+  }
+
+  .l-navbar-wrapper_has-sticky .logo-brand {
+    height: 60px;
+  }
+
+  .body_has-navbar-left .wrapper {
+    margin-left: 260px;
+  }
+
+  .body_has-navbar-left .l-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 1000;
+    width: 260px;
+  }
+
+  .body_has-navbar-left .l-navbar_s-left {
+    height: 100%;
+  }
+
+  .l-navbar_s-left.l-navbar_t-dark {
+    background: #333;
+  }
+
+  .l-navbar_s-left .container,
+  .l-navbar_s-left .container-fluid {
+    width: auto;
+    padding: 0;
+  }
+
+  .l-navbar_s-left .logo-brand,
+  .l-navbar_s-left .menuzord-menu,
+  .l-navbar_s-left .menuzord-menu > li {
+    float: none;
+  }
+
+  .l-navbar_s-left .logo-brand {
+    display: block;
+    margin: 40px 20px;
+    text-align: center;
+  }
+
+  .l-navbar_s-left .menuzord-menu > li {
+    display: block;
+    margin: 0;
+  }
+
+  .l-navbar_s-left .menuzord-menu > li > a {
+    display: block;
+    padding: 0 20px;
+  }
+
+  .l-navbar_s-left .menuzord-menu > li > a {
+    line-height: 40px;
+  }
+
+  .l-navbar_s-left .menuzord-menu > li > .dropdown,
+  .l-navbar_s-left .menuzord-menu > li > .megamenu {
+    left: 260px !important;
+    margin-top: -40px;
+  }
+
+  .l-navbar_s-left .menuzord-menu > li > .megamenu {
+    width: 800px;
+    padding: 20px;
+  }
+
+  .l-navbar_s-left .menuzord-menu > li.nav-divider {
+    display: none;
+  }
+
+  .l-navbar_s-left .menuzord-menu > li > .navbar-search {
+    width: 450px;
+  }
+
+  .nav-divider a {
+    cursor: text;
+  }
+
+  .l-navbar_bottom {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+  }
+}

MissNationSharedUI/wwwroot/assets/sass/layout/_pagination.scss

@@ -0,0 +1,28 @@
+.custom-pagination > li:first-child > a,
+.custom-pagination > li:first-child > span,
+.custom-pagination > li:last-child > a,
+.custom-pagination > li:last-child > span{
+  border-radius: 0;
+}
+
+.custom-pagination > li > a {
+  margin: 0 3px;
+  color: #424242;
+}
+
+.custom-pagination > li > a:hover {
+  color:#000 ;
+}
+
+.custom-pagination.pagination>.active>a,
+.custom-pagination.pagination>.active>a:focus,
+.custom-pagination.pagination>.active>a:hover,
+.custom-pagination.pagination>.active>span,
+.custom-pagination.pagination>.active>span:focus,
+.custom-pagination.pagination>.active>span:hover {
+  z-index: 2;
+  color: #fff;
+  cursor: default;
+  background-color: #222;
+  border-color: #222;
+}

MissNationSharedUI/wwwroot/assets/sass/layout/_portfolio.scss

@@ -0,0 +1,295 @@
+.portfolio {
+  margin: 50px 0;
+}
+
+.portfolio .portfolio-item {
+  float: left;
+}
+
+.portfolio .portfolio-item .thumb {
+  position: relative;
+}
+
+.portfolio .portfolio-item .thumb img{
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.portfolio-hover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin: 0;
+  border: 20px solid rgba(0, 0, 0, 0.1);
+  background-color: rgba(255, 255, 255, 0.90);
+  opacity: 0;
+  transition: all 0.3s;
+}
+
+
+.portfolio-item:hover .portfolio-hover,
+.portfolio-item:hover .portfolio-hover .portfolio-description,
+.portfolio-item:hover .portfolio-hover .action-btn {
+  opacity: 1;
+}
+
+
+.portfolio-item:hover .portfolio-hover .portfolio-description {
+  bottom: 45%;
+  margin-bottom: -90px;
+}
+
+.portfolio-item:hover .portfolio-hover .action-btn {
+  top: 40%;
+  margin-top: -55px;
+}
+
+.portfolio-hover .portfolio-description {
+  position: absolute;
+  bottom: 0%;
+  width: 100%;
+  opacity: 0;
+  transform: translateY(-55%);
+  transition: all 0.3s;
+}
+
+
+.portfolio-hover .action-btn {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  opacity: 0;
+  text-align: center;
+  transform: translateY(45%);
+  transition: all 0.3s;
+  font-size: 35px;
+}
+
+.portfolio-description,
+.portfolio-description h4 a,
+.portfolio-hover .action-btn a {
+  text-align: center;
+  color: #222;
+}
+
+.portfolio-description h4 {
+  margin-bottom: 5px;
+  font-size: 14px;
+  text-transform: uppercase;
+  letter-spacing: 4px;
+}
+
+.portfolio-description p {
+  font-size:12px;
+  margin-bottom: 0;
+  text-transform: uppercase;
+  /*font-family: 'Abel', sans-serif;*/
+  font-weight: normal;
+  letter-spacing: 3px;
+  color: #757575;
+}
+
+.portfolio-description a,
+.portfolio-title a {
+  color: #757575;
+}
+
+/*gutter*/
+
+.portfolio.gutter .portfolio-item {
+  padding: 10px;
+}
+
+
+/*portfolio 2 grid*/
+
+.portfolio.col-2 .portfolio-item {
+  width: 49.99%;
+}
+
+
+/*portfolio 3 grid*/
+
+.portfolio.col-3 .portfolio-item {
+  width: 33.3333333%;
+}
+
+/*portfolio 4 grid*/
+
+.portfolio.col-4 .portfolio-item {
+  width: 24.98%;
+}
+
+/*portfolio 5 grid*/
+
+.portfolio.col-5 .portfolio-item {
+  width: 19.99%;
+}
+
+/*portfolio 6 grid*/
+
+.portfolio.col-6 .portfolio-item {
+  width: 16.666666667%;
+}
+
+.portfolio-filter {
+  margin:0px;
+  padding: 0px;
+  list-style: none;
+}
+
+.portfolio-filter li {
+  display: inline-block;
+}
+
+.portfolio-filter li a {
+  color: #a9a8a8;
+  margin: 0 15px;
+  text-transform: uppercase;
+  font-size: 14px;
+  /*font-family: 'Abel', sans-serif;*/
+  letter-spacing: 3px;
+}
+
+
+.portfolio-filter li a:hover,
+.portfolio-filter li.active a{
+  color: #222222;
+}
+
+
+
+/* ----------------------------------------------------------------
+	portfolio with title
+-----------------------------------------------------------------*/
+
+
+.portfolio-with-title .portfolio-item:hover .portfolio-hover .action-btn {
+  top: 50%;
+  margin-top: -45px;
+}
+
+.portfolio-with-title .portfolio-title {
+  padding: 15px 0px;
+}
+
+.portfolio-with-title .portfolio-title h4,
+.portfolio-with-title .portfolio-title h4 a {
+  margin: 0;
+  font-size: 14px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color:#222
+}
+
+.portfolio-with-title .portfolio-title h3,
+.portfolio-with-title .portfolio-title h3 a {
+  margin: 0 0 10px 0;
+  font-size: 18px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color:#222
+}
+
+.portfolio-with-title .portfolio-title p {
+  margin: 0;
+  font-size: 12px;
+  text-transform: uppercase;
+  /*font-family: 'Abel', sans-serif;*/
+  font-weight: normal;
+  letter-spacing: 1px;
+  color: #7e7e7e;
+}
+
+
+.portfolio-with-title.portfolio-masonry .portfolio-title {
+  padding: 15px;
+}
+
+
+.portfolio-with-title.portfolio-masonry.gutter .portfolio-title {
+  padding: 15px 0;
+}
+
+/* ----------------------------------------------------------------
+	portfolio masonry
+-----------------------------------------------------------------*/
+
+
+.portfolio-masonry {
+
+}
+
+/* clear fix */
+.portfolio-masonry:after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
+/* ---- .grid-item ---- */
+
+.portfolio-masonry .portfolio-item {
+  float: left;
+}
+
+.portfolio-masonry .portfolio-item-width2 { width: 200px; }
+.portfolio-masonry .portfolio-item-height2 { height: 200px; }
+
+
+.portfolio-nav-row {
+  position: relative;
+  padding: 40px 0;
+}
+
+.portfolio-nav {
+  position: absolute;
+  top: 50%;
+  left: auto;
+  right: 10px;
+  max-width: 300px;
+  margin-top: -12px;
+}
+
+.portfolio-nav.left {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: auto;
+  max-width: 300px;
+  margin-top: -12px;
+}
+
+.portfolio-nav a {
+  display: block;
+  float: left;
+  text-align: center;
+  color: #aeaeae;
+  margin-left: 20px;
+}
+
+.portfolio-nav.left a {
+  margin-right: 20px;
+  margin-left: 0;
+}
+
+.portfolio-nav a:hover,
+.portfolio-nav a:hover span{
+  color: #323232;
+  transition: all 0.3s;
+}
+
+.portfolio-nav a span, .portfolio-nav a span i {
+  display: inline-block;
+  margin-top: 0;
+  transition: all 0.3s;
+}
+
+
+.portfolio-gap-less .portfolio {
+  margin: 0px;
+}
+

MissNationSharedUI/wwwroot/assets/sass/layout/_post.scss

@@ -0,0 +1,31 @@
+.video-fit  {
+  width: 100%;
+  padding-top: 50%;
+  position: relative;
+}
+
+.audio-fit {
+  width: 100%;
+  padding-top: 20%;
+  position: relative;
+}
+
+.video-fit iframe,
+.video-fit object,
+.video-fit embed {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.audio-fit iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  /*height: 100%;*/
+  border: none;
+}

MissNationSharedUI/wwwroot/assets/sass/layout/_preloader.scss

@@ -0,0 +1,46 @@
+#tb-preloader {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 999999;
+  display: block;
+  background: #fff;
+}
+
+.tb-preloader-wave {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 60px;
+  height: 60px;
+  margin: -30px 0 0 -30px;
+}
+
+.tb-preloader-wave:before,
+.tb-preloader-wave:after {
+  position: absolute;
+  display: inline-block;
+  content: "";
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: #222;
+  animation: preloader-wave 1.6s linear infinite;
+}
+
+.tb-preloader-wave:after {
+  animation-delay: -0.8s;
+}
+
+@keyframes preloader-wave {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 0;
+  }
+}

MissNationSharedUI/wwwroot/assets/sass/layout/_product.scss

@@ -0,0 +1,420 @@
+.cart-info .megamenu-quarter-width {
+  width: 450px !important;
+}
+
+.cart-table-list,
+.cart-table-list i{
+  color: #222;
+  border: none;
+}
+
+header li.nav-icon .cart-table-list a {
+  line-height: normal;
+  color: #222;
+}
+
+.total-cart {
+  display: inline-block;
+  width: 100%;
+  border-top: 1px solid rgba(0,0,0,.2);
+  padding-top: 20px;
+  margin-bottom: 20px;
+  float: right;
+  color: #222;
+  text-align: right;
+}
+
+.total-cart ul {
+  float: right;
+  list-style: none;
+  padding: 0;
+  width: 100%;
+}
+
+.total-cart ul li{
+  display: block;
+  overflow: hidden;
+}
+
+.total-cart ul li span {
+  width: 100px;
+  display: inline-block;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.cart-table-list a.close img {
+  width: 11px;
+  height: 11px;
+}
+
+.cart-table-list td img {
+  width: 50px;
+  height: auto;
+}
+
+
+.s-cart-btn a {
+  margin: 0 0 10px 10px;
+  color: #fff !important;
+}
+
+.cart-table-list.table>tbody>tr>td {
+  border: none;
+  line-height: 20px;
+  height: 20px;
+  vertical-align: middle;
+}
+
+.product-list {
+  margin-bottom: 50px;
+  min-height: 440px;
+}
+
+.product-list .product-img {
+  position: relative;
+  width: 100%;
+  /*height: 340px;*/
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+
+.product-img:hover>a:nth-of-type(2) {
+  opacity: 1;
+  z-index: 2;
+}
+
+.product-img>a:nth-of-type(2) {
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+}
+
+.sale-label {
+  position: absolute;
+  left: 10px;
+  top:10px;
+  width: 50px;
+  height: 50px;
+  line-height: 50px;
+  border-radius: 50%;
+  text-align: center;
+  color: #fff;
+  text-transform: uppercase;
+  z-index: 10;
+}
+
+.product-img>a, .product-img:hover>a {
+  -webkit-transition: all .5s ease;
+  -o-transition: all .5s ease;
+  transition: all .5s ease;
+}
+
+
+.product-list .product-img img,
+.product-img img, .product-img>a {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.product-title h5 {
+  margin-bottom: 10px;
+  font-size: 12px;
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
+.product-title h5 a {
+  color: #222;
+}
+
+.product-price {
+  font-size: 18px;
+  margin-bottom: 5px;
+}
+
+.product-price del {
+  color: #837f7e;
+  font-size: 14px;
+}
+
+.product-rating {
+  display: inline-block;
+  width: 100%;
+  margin-bottom: 15px;
+  color: #9b9a9a;
+}
+
+
+.product-cart {
+  font-size: 12px;
+}
+
+
+.product-grid input {
+  box-shadow: none;
+  border-radius: 0;
+  height: 40px;
+}
+
+
+.product-grid input:focus,
+.product-grid .form-control:focus,
+.portfolio-meta .form-control:focus{
+  box-shadow: none;
+  border-color: #000;
+}
+
+
+.product-grid button.btn,
+.p-values,
+.full-width button.btn{
+  width: 100%;
+}
+
+.fit-img img {
+  width: 100%;
+  height: auto;
+}
+
+.product-grid .form-control,
+.p-quantity .form-control,
+.portfolio-meta .form-control {
+  box-shadow: none;
+}
+
+.p-quantity {
+  /*padding: 0;*/
+  list-style: none;
+  margin-bottom: 0;
+}
+
+.p-values {
+  display: inline-block;
+}
+
+.p-values ul {
+  float: left;
+}
+
+.p-quantity li  {
+  float: left;
+  width: 130px;
+  letter-spacing: 2px;
+  color: #000;
+  margin: 15px 0;
+  font-size: 12px;
+  text-transform: uppercase;
+}
+
+.p-quantity li label {
+  padding-top: 7px;
+  font-weight: normal;
+}
+
+.p-quantity .input-group-btn:first-child>.btn,
+.p-quantity .input-group-btn:first-child>.btn-group{
+  margin-right: -1px;
+}
+
+
+.p-quantity .btn.focus,
+.p-quantity .btn:focus,
+.p-quantity .btn:hover {
+  color: #222 !important;
+}
+
+.product-grid .col-lg-1,
+.product-grid .col-lg-10,
+.product-grid .col-lg-11,
+.product-grid .col-lg-12,
+.product-grid .col-lg-2,
+.product-grid .col-lg-3,
+.product-grid .col-lg-4,
+.product-grid .col-lg-5,
+.product-grid .col-lg-6,
+.product-grid .col-lg-7,
+.product-grid .col-lg-8,
+.product-grid .col-lg-9,
+.product-grid .col-md-1,
+.product-grid .col-md-10,
+.product-grid .col-md-11,
+.product-grid .col-md-12,
+.product-grid .col-md-2,
+.product-grid .col-md-3,
+.product-grid .col-md-4,
+.product-grid .col-md-5,
+.product-grid .col-md-6,
+.product-grid .col-md-7,
+.product-grid .col-md-8,
+.product-grid .col-md-9,
+.product-grid .col-sm-1,
+.product-grid .col-sm-10,
+.product-grid .col-sm-11,
+.product-grid .col-sm-12,
+.product-grid .col-sm-2,
+.product-grid .col-sm-3,
+.product-grid .col-sm-4,
+.product-grid .col-sm-5,
+.product-grid .col-sm-6,
+.product-grid .col-sm-7,
+.product-grid .col-sm-8,
+.product-grid .col-sm-9,
+.product-grid .col-xs-1,
+.product-grid .col-xs-10,
+.product-grid .col-xs-11,
+.product-grid .col-xs-12,
+.product-grid .col-xs-2,
+.product-grid .col-xs-3,
+.product-grid .col-xs-4,
+.product-grid .col-xs-5,
+.product-grid .col-xs-6,
+.product-grid .col-xs-7,
+.product-grid .col-xs-8,
+.product-grid .col-xs-9 {
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+
+.product-grid .row {
+  margin-right: -15px;
+  margin-left: -15px;
+}
+
+
+.stock .number-item {
+  font-size: 30px;
+  color: #757575;
+}
+
+.stock .status {
+  color: #fff;
+  padding: 5px 10px;
+  display: initial;
+  border-radius: 2px;
+  letter-spacing: normal;
+}
+
+.review-avatar {
+  width: 60px;
+  margin-right: 10px;
+  height: auto;
+}
+
+.review-rating i {
+  padding: 0 !important;
+}
+
+.review-rating {
+  float: right;
+}
+
+
+.cart-table   {
+  border: 1px solid #ddd;
+}
+
+.cart-table  td a {
+  color: #222;
+}
+
+.cart-table  td a:hover {
+  color: #000;
+}
+
+.cart-table thead th {
+  text-transform: uppercase;
+}
+
+
+.cart-table.table>tbody>tr>td,
+.cart-table.table>tbody>tr>th,
+.cart-table.table>tfoot>tr>td,
+.cart-table.table>tfoot>tr>th,
+.cart-table.table>thead>tr>td,
+.cart-table.table>thead>tr>th {
+  vertical-align: middle;
+}
+
+.cart-img img {
+  width: 60px;
+  height: auto;
+}
+
+
+.cart-action input {
+  padding: 6px 3px 6px 6px;
+}
+
+.cart-action input,
+.cart-action button {
+  float: left;
+  margin-right: 3px;
+}
+
+.cart-action button:hover i {
+  color: #222;
+}
+
+.cart-quantity {
+  width: 45px;
+  border-radius: 0;
+}
+
+.coupon-form input {
+  height: 40px;
+  border-radius: 0;
+}
+
+.coupon-form label {
+  font-weight: normal;
+  text-transform: uppercase;
+}
+
+.cart-total {
+  font-size: 16px;
+}
+
+.cart-btn-row a {
+  margin-right: 0;
+  margin-left: 10px;
+}
+
+.coupon-form label  {
+  margin-right: 20px;
+}
+.coupon-form input {
+  margin-right: 10px;
+}
+
+.pro-box .one-third,
+.featured-box.pro-box  .one-third:nth-child(2){
+  padding:10px 5px;
+}
+
+.panel {
+  margin-bottom: 20px;
+  background-color: #fff;
+  border: none;
+  border-radius: 0;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.shop-view-mode {
+  margin-top: 5px;
+  display: inline-block;
+}
+
+.shop-view-mode a {
+  margin-left: 15px;
+  color: #adadad;
+}
+
+.shop-view-mode a:hover {
+  color: #222;
+}

MissNationSharedUI/wwwroot/assets/sass/layout/_scroll-to-top.scss

@@ -0,0 +1,23 @@
+.lift-off {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+  background: rgba(0,0,0,.6);
+  color: #fff;
+  text-align: center;
+  transition: all .3s;
+}
+
+.lift-off_show {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.lift-off_hide {
+  visibility: hidden;
+  opacity: 0;
+  transform: translateY(40px);
+}

MissNationSharedUI/wwwroot/assets/sass/layout/_tb-grid.scss

@@ -0,0 +1,55 @@
+.tb-grid {
+  width: 100%;
+  margin: auto;
+
+  .box,
+  .box2,
+  .box3 {
+    display: inline-block;
+  }
+
+  .box {
+    width:33.3333%;
+    padding-top: 33.3333%;
+  }
+
+  .box2 {
+    width:66.6666%;
+    padding-top: 33.3333%;
+  }
+
+  .box3 {
+    width:66.6666%;
+    padding-top: 66.6666%;
+  }
+
+  .box-nano {
+    position: relative;
+    width: 50%;
+    margin: 0;
+    padding-top: 50%;
+    float: left;
+  }
+
+  .item > .item-inner,
+  .box-nano > .item-inner {
+    position: absolute;
+    margin: 0;
+    top: 5px;
+    right: 5px;
+    bottom: 5px;
+    left: 5px;
+    background-size: cover;
+    background-position: 50% 0;
+    background-repeat: no-repeat;
+    cursor: crosshair;
+
+  }
+
+  .items > .item-inner {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+}

MissNationSharedUI/wwwroot/assets/sass/layout/_topbar.scss

@@ -0,0 +1,111 @@
+.top-bar {
+  height: 40px;
+  line-height: 40px;
+  border-bottom: 1px solid #eee;
+}
+
+.top-bar .gray-bg {
+  background: #f5f5f5;
+}
+
+.top-social-link a{
+  color: #aaaaaa;
+  display: inline-block;
+  margin-right: 10px;
+}
+
+
+.top-social-link a:hover,
+.top-link li a:hover {
+  color: #222;
+}
+
+.top-link {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  float: right;
+}
+
+.top-link li {
+  display: inline-block;
+  margin:0 5px;
+}
+
+.top-link li i,
+.top-link li a i{
+  margin-right: 10px;
+}
+
+.top-link li,
+.top-link li a{
+  color: #aaaaaa;
+}
+
+.top-link.text-uppercase {
+  font-size: 12px;
+}
+
+
+.top-bar .col-lg-1,
+.top-bar .col-lg-10,
+.top-bar .col-lg-11,
+.top-bar .col-lg-12,
+.top-bar .col-lg-2,
+.top-bar .col-lg-3,
+.top-bar .col-lg-4,
+.top-bar .col-lg-5,
+.top-bar .col-lg-6,
+.top-bar .col-lg-7,
+.top-bar .col-lg-8,
+.top-bar .col-lg-9,
+.top-bar .col-md-1,
+.top-bar .col-md-10,
+.top-bar .col-md-11,
+.top-bar .col-md-12,
+.top-bar .col-md-2,
+.top-bar .col-md-3,
+.top-bar .col-md-4,
+.top-bar .col-md-5,
+.top-bar .col-md-6,
+.top-bar .col-md-7,
+.top-bar .col-md-8,
+.top-bar .col-md-9,
+.top-bar .col-sm-1,
+.top-bar .col-sm-10,
+.top-bar .col-sm-11,
+.top-bar .col-sm-12,
+.top-bar .col-sm-2,
+.top-bar .col-sm-3,
+.top-bar .col-sm-4,
+.top-bar .col-sm-5,
+.top-bar .col-sm-6,
+.top-bar .col-sm-7,
+.top-bar .col-sm-8,
+.top-bar .col-sm-9,
+.top-bar .col-xs-1,
+.top-bar .col-xs-10,
+.top-bar .col-xs-11,
+.top-bar .col-xs-12,
+.top-bar .col-xs-2,
+.top-bar .col-xs-3,
+.top-bar .col-xs-4,
+.top-bar .col-xs-5,
+.top-bar .col-xs-6,
+.top-bar .col-xs-7,
+.top-bar .col-xs-8,
+.top-bar .col-xs-9 {
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+.top-link.divider li:after{
+  content: '/';
+  padding-left: 13px;
+  display: inline-block;
+}
+
+.top-link.divider li:last-child:after {
+  content: '';
+  display: inline-block;
+}

MissNationSharedUI/wwwroot/assets/sass/layout/_typist.scss

@@ -0,0 +1,27 @@
+@keyframes blink {
+  0% { opacity: 1.0; }
+  50% { opacity: 0.0; }
+  100% { opacity: 1.0; }
+}
+
+.typist-blink:after {
+  content: " ";
+  display: inline-block;
+  height: 47px;
+  position: relative;
+  top: 10px;
+  margin-left: 3px;
+  margin-right: 7px;
+  border-right: 2px solid;
+  animation: blink 1s step-start 0s infinite;
+}
+
+.typist-blink > .selectedText {
+  display: none;
+}
+
+.typist-mark > .selectedText {
+  color: #fff;
+  background-color: #222;
+  font-style: normal;
+}

MissNationSharedUI/wwwroot/assets/sass/layout/_video-parallax.scss

@@ -0,0 +1,41 @@
+.video-parallax {
+  position: relative;
+  overflow: hidden;
+}
+
+.video-parallax .container{
+  position: absolute;
+  top: 50%;
+  z-index: 100;
+  left: 0;
+  right: 0;
+  color: #fff;
+  margin-top: -80px;
+}
+
+.video-parallax .container i{
+  font-size: 50px;
+  margin-bottom: 30px;
+  display: block;
+}
+
+.video-parallax .container+.video-wrap {
+  z-index: 1;
+}
+
+.video-wrap {
+  overflow: hidden;
+  width: 100%;
+  position: relative;
+}
+
+.video-overlay, .banner-overaly {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 5;
+  background: rgba(0,0,0,0.5);
+  -webkit-backface-visibility: hidden;
+}

MissNationSharedUI/wwwroot/assets/sass/pages/_app-landing.scss

@@ -0,0 +1,25 @@
+.app-device {
+  /*position: relative;*/
+}
+
+.app-device img {
+  position: absolute;
+  right: 10%;
+  bottom: 0;
+}
+
+.app-img-bottom {
+  min-height: 600px;
+}
+
+.app-img-bottom img {
+  position: absolute;
+  left:15%;
+  bottom: 0;
+}
+
+.app-icon i {
+  margin-right: 15px;
+  font-size: 30px;
+  color: #dedede;
+}

MissNationSharedUI/wwwroot/assets/sass/pages/_background-img.scss

@@ -0,0 +1,333 @@
+.home-banner {
+  background-image: url("../img/banner/index-banner-2.jpg")!important;
+  //background-image: url("../img/banner/home-banner1.jpg")!important;
+}
+
+.creative-banner {
+  background-image: url("../img/banner/creative-banner.jpg")!important;
+}
+
+.banner-catering {
+  background-image: url("../img/banner/catering.jpg")!important;
+}
+
+.banner-hotel {
+  background-image: url("../img/hotel/hotel_banner.jpg")!important;
+}
+
+.banner-ban2 {
+  background-image: url("../img/banner/ban2.jpg")!important;
+}
+
+.banner-01 {
+  background-image: url("../img/banner/01.jpg")!important;
+}
+
+.banner-02 {
+  background-image: url("../img/banner/02.jpg")!important;
+}
+
+.banner-04 {
+  background-image: url("../img/banner/04.jpg")!important;
+}
+
+.banner-12 {
+  background-image: url("../img/banner/12.jpg")!important;
+}
+
+.banner-13 {
+  background-image: url("../img/banner/13.jpg")!important;
+}
+
+
+.banner-14 {
+  background-image: url("../img/banner/14.jpg")!important;
+}
+
+
+.banner-15 {
+  background-image: url("../img/banner/15.jpg")!important;
+}
+
+.banner-16 {
+  background-image: url("../img/banner/16.jpg")!important;
+}
+
+.banner-17 {
+  background-image: url("../img/banner/17.jpg")!important;
+}
+
+.banner-19 {
+  background-image: url("../img/banner/19.jpg")!important;
+}
+
+.banner-20 {
+  background-image: url("../img/banner/20.jpg")!important;
+}
+
+.banner-22 {
+  background-image: url("../img/banner/22.jpg")!important;
+}
+
+.banner-23 {
+  background-image: url("../img/banner/23.jpg")!important;
+}
+
+.banner-24 {
+  background-image: url("../img/banner/24.jpg")!important;
+}
+
+.banner-25 {
+  background-image: url("../img/banner/25.jpg")!important;
+}
+
+.banner-26 {
+  background-image: url("../img/banner/26.jpg")!important;
+}
+
+.banner-27 {
+  background-image: url("../img/banner/27.jpg")!important;
+}
+
+.banner-28 {
+  background-image: url("../img/banner/28.jpg")!important;
+}
+
+.banner-07 {
+  background-image: url("../img/banner/07.jpg")!important;
+}
+
+.banner-08 {
+  background-image: url("../img/banner/08.jpg")!important;
+}
+
+.banner-09 {
+  background-image: url("../img/banner/09.jpg")!important;
+}
+
+.banner-10 {
+  background-image: url("../img/banner/10.jpg")!important;
+}
+
+.banner-11 {
+  background-image: url("../img/banner/11.jpg")!important;
+}
+
+.banner-05 {
+  background-image: url("../img/banner/05.jpg")!important;
+}
+
+.banner-06 {
+  background-image: url("../img/banner/06.jpg")!important;
+}
+
+
+.banner-p {
+  background-image:url("../img/product/p-banner.jpg")!important;
+}
+
+.banner-r {
+  background-image: url("../img/real-state/r-banner.jpg")!important;
+}
+
+.banner-spa {
+  background-image: url("../img/spa/spa-banner.jpg")!important;
+}
+
+.banner-box1 {
+  background-image: url("../img/banner/box_banner1.jpg")!important;
+}
+
+.banner-box2 {
+  background-image: url("../img/banner/box_banner2.jpg")!important;
+}
+
+.banner-box-i {
+  background-image: url("../img/banner/box_banner.jpg")!important;
+}
+
+.banner-flex3 {
+  background-image: url("../img/banner/flex/flex3.jpg")!important;
+}
+
+.banner-demo {
+  background-image: url("../img/banner/demo.jpg")!important;
+}
+
+.banner-onedot {
+  background-image: url("../img/banner/onedot.jpg")!important;
+}
+
+.banner-02p {
+  background-image: url("../img/banner/02p.jpg")!important;
+}
+
+.banner-app {
+  background-image: url("../img/app/app_banner.jpg")!important;
+}
+
+.banner-para {
+  background-image: url("../img/parallax/para_banner.jpg")!important;
+}
+
+.banner-para1 {
+  background-image: url("../img/parallax/para1.jpg")!important;
+}
+
+.banner-para2 {
+  background-image: url("../img/parallax/para2.jpg")!important;
+}
+
+.banner-para3 {
+  background-image: url("../img/parallax/para3.jpg")!important;
+}
+
+.banner-para4 {
+  background-image: url("../img/parallax/para4.jpg")!important;
+}
+
+.banner-para5 {
+  background-image: url("../img/parallax/para5.jpg")!important;
+}
+
+.banner-para6 {
+  background-image: url("../img/parallax/para6.jpg")!important;
+}
+
+.banner-para7 {
+  background-image: url("../img/parallax/para7.jpg")!important;
+}
+
+.banner-para8 {
+  background-image: url("../img/parallax/para8.jpg")!important;
+}
+
+.banner-sb1 {
+  background-image: url("../img/about/sb-1.jpg")!important;
+}
+
+.banner-03 {
+  background-image: url("../img/about/03.jpg") !important;
+}
+
+.banner-contact {
+  background-image: url("../img/contact-banner.jpg")!important;
+}
+
+/*--------------------------------------
+    parallax images
+--------------------------------------*/
+
+.parallax-4 {
+  background-image: url("../img/parallax/4.jpg")!important;
+}
+
+.parallax-5 {
+  background-image: url("../img/parallax/5.jpg")!important;
+}
+
+.parallax-6 {
+  background-image: url("../img/parallax/6.jpg")!important;
+}
+
+.parallax-7 {
+  background-image: url("../img/parallax/7.jpg")!important;
+}
+
+.parallax-8 {
+  background-image: url("../img/parallax/8.jpg")!important;
+}
+
+.parallax-9 {
+  background-image: url("../img/parallax/9.jpg")!important;
+}
+
+.parallax-10 {
+  background-image: url("../img/parallax/10.jpg")!important;
+}
+.parallax-11 {
+  background-image: url("../img/parallax/11.jpg")!important;
+}
+
+.parallax-12 {
+  background-image: url("../img/parallax/12.jpg")!important;
+}
+
+.parallax-13 {
+  background-image: url("../img/parallax/13.jpg")!important;
+}
+
+.parallax-14 {
+  background-image: url("../img/parallax/14.jpg")!important;
+}
+
+.parallax-15 {
+  background-image: url("../img/parallax/15.jpg")!important;
+}
+
+.parallax-16 {
+  background-image: url("../img/parallax/16.jpg")!important;
+}
+
+.parallax-17 {
+  background-image: url("../img/parallax/17.jpg")!important;
+}
+
+.parallax-18 {
+  background-image: url("../img/parallax/18.jpg")!important;
+}
+
+.parallax-19 {
+  background-image: url("../img/parallax/19.jpg")!important;
+}
+
+
+.parallax-p15 {
+  background: url("../img/post/p15.jpg") center center no-repeat!important;
+  background-size: cover!important;
+  height: 599px!important;
+}
+
+.fast-food {
+  background: url("../img/restaurant/fast-food.jpg") right 30px no-repeat!important;
+}
+
+.parallax-hot {
+  background-image: url("../img/hotel/hotparallax.jpg")!important;
+}
+
+.parallax-ev-p {
+  background-image: url("../img/parallax/ev-p.jpg")!important;
+}
+
+.parallax-p {
+  background-image: url("../img/product/p-parallax.jpg")!important;
+}
+
+.parallax-r {
+  background-image: url("../img/real-state/r-parallax.jpg")!important;
+}
+
+.parallax-r-2 {
+  background-image: url("../img/real-state/r-parallax-2.jpg")!important;
+}
+
+.parallax-s {
+  background-image: url("../img/spa/s-parallax.jpg")!important;
+}
+
+/**/
+
+.post-p8 {
+  background: url("../img/post/p8.jpg") right 100px no-repeat!important;
+}
+
+.post-p9 {
+  background: url("../img/post/p9.jpg") left 150px no-repeat!important;
+}
+
+.post-p9-alt {
+  background: url("../img/post/p9.jpg") left 100px no-repeat!important;
+}
+
+

MissNationSharedUI/wwwroot/assets/sass/pages/_catering.scss

@@ -0,0 +1,58 @@
+
+.catering-form .form-control  {
+  height: 65px;
+  border: none;
+}
+
+.catering-form input {
+  width: 400px !important;
+}
+
+.catering-form select {
+  width: 200px !important;
+}
+
+.app-down-row {
+  position: relative;
+  height: 510px;
+}
+
+.app-down-row .cater-avatar {
+  position: absolute;
+  left: 0;
+  top: -65px;
+}
+
+.app-btn a {
+  margin-right: 10px;
+}
+
+.catering-list .post-single .post-desk {
+  padding: 30px 0;
+  height: 180px;
+}
+
+.app-down-row .app-info  {
+  font-weight: 300;
+}
+
+.app-down-row .app-info span {
+  font-weight: bold;
+}
+
+.float-left {
+  float: left;
+}
+
+.txt-extra-xl {
+  font-size: 70px;
+}
+
+.light-txt-trans {
+  color: rgba(255,255,255,.5);
+}
+
+.f-menu-desk {
+  color: #959595;
+  margin-bottom: 15px;
+}

MissNationSharedUI/wwwroot/assets/sass/pages/_contact-us.scss

@@ -0,0 +1,35 @@
+
+.contact-comments .col-md-6, .contact-comments .col-md-12 {
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+.form-control {
+  box-shadow: none;
+  border: 1px solid #e5e5e5;
+  border-radius: 3px;
+}
+.form-control:focus {
+  border-color: #222;
+  box-shadow: none;
+}
+
+.contact-comments .form-control {
+  border-radius: 0;
+  height: 40px;
+}
+
+.contact-comments .cmnt-text {
+  height: 95px;
+}
+
+.contact-comments label {
+  font-weight: normal;
+  text-transform: uppercase;
+  color: #7e7e7e;
+}
+
+
+address p {
+  margin-bottom: 0px;
+}

MissNationSharedUI/wwwroot/assets/sass/pages/_decor.scss

@@ -0,0 +1,44 @@
+
+//.slide-top-adjust {
+//  top: -100px;
+//  position: relative;
+//}
+//
+//.sticky + .slide-top-adjust {
+//  top: -60px;
+//}
+
+
+.decor-category a {
+  overflow: hidden;
+  margin-bottom: 20px;
+  display: block;
+  position: relative;
+
+}
+
+.decor-category a img {
+  transition: all .3s ease-in-out;
+}
+
+.decor-category a:hover img {
+  transform: scale(1.3);
+}
+
+.decor-category a .title {
+  position: absolute;
+  top: 35%;
+  right: 10%;
+  text-align: right;
+  font-size: 24px;
+  font-weight: 300;
+  text-transform: uppercase;
+}
+
+.decor-category a .title.dark {
+  color: #222;
+}
+
+.decor-category a .title.light {
+  color: #fff;
+}

MissNationSharedUI/wwwroot/assets/sass/pages/_error-404.scss

@@ -0,0 +1,48 @@
+/*------------------------------------------------------------------
+    error 404
+-------------------------------------------------------------------*/
+.error404 {
+    color: #222222;
+    font-size: 140px;
+    line-height: 140px;
+    display: block;
+    margin-top: 20px;
+    font-weight: 100;
+}
+
+.error-txt {
+    font-size: 22px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 50px;
+    display: block;
+}
+
+.error-info {
+    padding-left: 60px;
+    border-left: 1px solid #ddd;
+}
+
+.error-parallax {
+    background-image: url("../img/parallax/404_parallax.jpg");
+    background-size: cover;
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    height: 100vh;
+}
+
+.error-parallax .error-avatar {
+    margin-top: 180px;
+    display: block;
+    margin-bottom: 50px;
+}
+
+.error-parallax .error-info {
+    padding-left: 0px;
+    border-left: none;
+}
+
+.error-parallax .error-info .error404,
+.error-parallax .error-info .error-txt {
+    color: #fff;
+}

MissNationSharedUI/wwwroot/assets/sass/pages/_event.scss

@@ -0,0 +1,25 @@
+
+.ticket-register .form-control{
+  border-radius: 5px;
+  height: 40px;
+  color: #A7A7A7;
+}
+.ticket-register .form-group,
+.register-member a {
+  margin: 0 5px;
+}
+
+
+.register-member a {
+  display: inline-block;
+  width: 60px;
+  height: 60px;
+  margin-bottom: 10px;
+
+}
+
+.register-member a img{
+  width: 100%;
+  height: auto;
+  border-radius: 50%;
+}

MissNationSharedUI/wwwroot/assets/sass/pages/_fashion.scss

@@ -0,0 +1,62 @@
+
+.fashion-title h1 {
+  font-size: 100px;
+  font-weight: 100;
+  letter-spacing: 5px;
+  margin-bottom: 0;
+}
+
+.fashion-footer p {
+  line-height: 20px;
+  font-size: 13px;
+}
+
+.fashion-footer .subscribe-form {
+  width: 100%;
+  display: inline-block;
+  margin-bottom: 30px;
+}
+
+
+.fashion-footer .subscribe-form input {
+  background: #f8f8f8;
+  width: 65% !important;
+  border-radius: 4px;
+}
+
+.fashion-footer ul {
+  padding: 0;
+  list-style: none;
+}
+
+.fashion-footer ul li a{
+  color: #6f7273;
+  text-transform: uppercase;
+  margin-bottom: 10px;
+  display: block;
+  font-size: 13px;
+}
+
+.fashion-footer ul li a:hover {
+  color: #222;
+}
+
+.fashion-footer .social-link a{
+  color: #cdcdcd;
+  border: 1px solid #cdcdcd;
+  width: 35px;
+  height: 35px;
+  line-height: 35px;
+  text-align: center;
+  display: inline-block;
+  margin-right: 10px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  border-radius: 50%;
+}
+
+.fashion-footer .social-link a:hover {
+  background: #5a5a5a;
+  color: #fff;
+  border: 1px solid transparent;
+}

MissNationSharedUI/wwwroot/assets/sass/pages/_gym.scss

@@ -0,0 +1,17 @@
+.gym-schedule {
+  display: block;
+
+  li{
+    margin-bottom: 10px;
+    border-bottom: 1px solid rgba(255,255,255,.5);
+    padding-bottom: 10px;
+    font-size: 16px;
+    i{
+      padding-right: 10px;
+    }
+    .opening-hour {
+      text-align: right;
+      float: right;
+    }
+  }
+}

MissNationSharedUI/wwwroot/assets/sass/pages/_hotel.scss

@@ -0,0 +1,12 @@
+.amenities-list li:last-child {
+  border-bottom: 1px solid #9e9e9e;
+}
+
+.amenities-list li {
+  border-top: 1px solid #9e9e9e;
+  padding: 10px 0;
+}
+
+.hotel-intro-box-resize .post-single {
+  width: 250px;
+}

MissNationSharedUI/wwwroot/assets/sass/pages/_intro.scss

@@ -0,0 +1,66 @@
+.banner-intro {
+  background-image: url("../img/intro/intro-banner.jpg")!important;
+}
+
+.intro-title h2 {
+  font-size: 36px;
+}
+
+.intro-title p {
+  font-size: 16px;
+  font-weight: 300;
+  color: #fff !important;
+  letter-spacing: 2px;
+}
+
+.intro-title p span {
+  font-size: 26px;
+}
+
+.intro-title i {
+  font-size: 26px;
+  color: rgba(255,255,255,.5);
+  line-height: 20px;
+  top: 4px;
+  position: relative;
+  right: 10px;
+}
+
+.intro-title .btn {
+  line-height: 32px;
+}
+
+.intro-title a:hover i,
+.intro-title a:focus i {
+  color: #222;
+}
+
+.intro-portfolio img {
+  margin-bottom: 30px;
+}
+
+.intro-portfolio .fit-img {
+  margin-bottom: 20px;
+}
+
+.intro-portfolio a img,
+.intro-portfolio a img:hover {
+  -webkit-transition: all 0.3s ease;
+  -moz-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+
+.intro-portfolio a img:hover {
+  opacity: .8;
+
+}
+
+.intro-portfolio a {
+  text-transform: uppercase;
+  color: #222;
+}
+
+.dark-bg-alt .intro-portfolio  a {
+  text-transform: uppercase;
+  color: #fff;
+}

MissNationSharedUI/wwwroot/assets/sass/pages/_login.scss

@@ -0,0 +1,136 @@
+/*------------------------------------------------------------------
+    login
+-------------------------------------------------------------------*/
+
+.login {
+    position: relative;
+}
+
+.login .form-control {
+    box-shadow: none;
+    height: 40px;
+}
+
+.login .form-group {
+    margin-bottom: 20px;
+}
+
+.login .form-group label {
+    font-weight: normal;
+}
+
+.login .container{
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    margin-top: -330px;
+}
+
+.login.register .container{
+    position: static;
+    top: auto;
+    width: 100%;
+    margin-top:  0px;
+}
+
+.login-bg {
+    background: #f5f5f5;
+    height: 100vh;
+}
+
+.login-parallax {
+    background-image: url("../img/parallax/3.jpg");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-attachment: fixed;
+    background-size: cover;
+}
+
+.login-parallax .login-box {
+    background: rgba(255,255,255,0.9);
+}
+
+.login-box {
+    width: 450px;
+    margin: 0 auto;
+    background: #fff;
+    padding: 30px;
+}
+
+.login-box.gray-bg {
+    background: #f5f5f5;
+    width: auto;
+}
+
+.login-logo {
+    padding: 50px 0;
+}
+
+.full-width {
+    width: 100%;
+    position: relative;
+}
+
+.login-social-link {
+    display: inline-block;
+    margin-bottom: 15px;
+    width: 100%;
+}
+
+.login-social-link a.facebook {
+    background: #3b5999;
+    margin-right: 22px;
+    float: left;
+}
+
+.login-social-link a.facebook:hover {
+    background: #30497d;
+    color: #fff;
+}
+
+.login-social-link a {
+    color: #fff;
+    padding: 10px 38px;
+    border-radius: 4px;
+    width: 47%;
+    text-align: center;
+}
+
+.login-social-link a.twitter {
+    background: #63c6ff;
+    float: left;
+}
+
+.login-social-link a.twitter:hover {
+    background: #4c98c4;
+    color: #fff;
+}
+
+.copyright-row {
+    color: #fff;
+    margin-top: 20px;
+}
+
+/**/
+
+.login-accordion > dd {
+    padding: 10px 0;
+}
+
+
+.login-accordion .login .form-control,
+.tab-pane .form-control {
+    border-radius: 0;
+}
+
+.dark-txt {
+    color: #222;
+}
+
+.border-less-input input {
+    border: none;
+}
+
+.login-bg-input input {
+    background: #f5f5f5;
+}

MissNationSharedUI/wwwroot/assets/sass/pages/_magazine.scss

@@ -0,0 +1,190 @@
+.magazine-slider {
+  margin-top: 0;
+}
+
+.magazine-slider img {
+  height: 424px;
+}
+
+.magazine-slider .container {
+  width: auto;
+}
+
+.magazine-grid .row {
+  margin-right: -10px;
+  margin-left: -10px;
+}
+
+.magazine-grid .col-lg-1,
+.magazine-grid .col-lg-10,
+.magazine-grid .col-lg-11,
+.magazine-grid .col-lg-12,
+.magazine-grid .col-lg-2,
+.magazine-grid .col-lg-3,
+.magazine-grid .col-lg-4,
+.magazine-grid .col-lg-5,
+.magazine-grid .col-lg-6,
+.magazine-grid .col-lg-7,
+.magazine-grid .col-lg-8,
+.magazine-grid .col-lg-9,
+.magazine-grid .col-md-1,
+.magazine-grid .col-md-10,
+.magazine-grid .col-md-11,
+.magazine-grid .col-md-12,
+.magazine-grid .col-md-2,
+.magazine-grid .col-md-3,
+.magazine-grid .col-md-4,
+.magazine-grid .col-md-5,
+.magazine-grid .col-md-6,
+.magazine-grid .col-md-7,
+.magazine-grid .col-md-8,
+.magazine-grid .col-md-9,
+.magazine-grid .col-sm-1,
+.magazine-grid .col-sm-10,
+.magazine-grid .col-sm-11,
+.magazine-grid .col-sm-12,
+.magazine-grid .col-sm-2,
+.magazine-grid .col-sm-3,
+.magazine-grid .col-sm-4,
+.magazine-grid .col-sm-5,
+.magazine-grid .col-sm-6,
+.magazine-grid .col-sm-7,
+.magazine-grid .col-sm-8,
+.magazine-grid .col-sm-9,
+.magazine-grid .col-xs-1,
+.magazine-grid .col-xs-10,
+.magazine-grid .col-xs-11,
+.magazine-grid .col-xs-12,
+.magazine-grid .col-xs-2,
+.magazine-grid .col-xs-3,
+.magazine-grid .col-xs-4,
+.magazine-grid .col-xs-5,
+.magazine-grid .col-xs-6,
+.magazine-grid .col-xs-7,
+.magazine-grid .col-xs-8,
+.magazine-grid .col-xs-9 {
+  padding-left:10px;
+  padding-right:10px;
+}
+
+.aside-social {
+  border: 1px solid #ddd;
+  font-size: 0;
+  margin-bottom: 20px;
+}
+
+.aside-social li {
+  border-left: 1px solid #ddd;
+  padding-top: 8px;
+  text-align: center;
+  transition: background 0.3s ease 0s;
+  width: 25%;
+}
+
+.aside-social li:hover {
+  border-left: 1px solid #333;
+  background: #333;
+  transition: background 0.3s ease 0s;
+  color: #fff;
+}
+
+.aside-social li:hover i,
+.aside-social li:hover p {
+  color: #fff;
+  transition:  0.3s ease 0s;
+}
+
+.aside-social li:first-child {
+  border-left: medium none;
+}
+
+.aside-social.list-inline > li {
+  display: inline-block;
+}
+
+.aside-social.list-inline {
+  margin-left: 0;
+}
+
+.aside-social li i {
+  color: #aaa;
+  font-size: 16px;
+  margin-top: 5px;
+  transition:  0.3s ease 0s;
+}
+
+.aside-social li p {
+  font-size: 11px;
+  margin-bottom: 6px;
+  margin-top: 5px;
+  transition:  0.3s ease 0s;
+}
+
+
+.newsletter {
+  background: url("../img/parallax/3.jpg") repeat 0 0 / cover ;
+  color: #fff;
+  margin-bottom: 20px;
+  padding: 20px;
+}
+
+.newsletter h3 {
+  margin-bottom: 10px;
+}
+
+.newsletter p {
+  line-height: 20px;
+}
+
+.round-less {
+  border-radius: 0;
+}
+
+.magazine-grid .post-single .post-desk {
+  height: auto;
+}
+
+.magazine-latest-news {
+  background: #eeeeee;
+  padding: 20px;
+  position: relative;
+}
+
+.breaking {
+  float: left;
+  margin-right: 30px;
+  background: #333;
+  color: #fff;
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding: 20px;
+  text-transform: uppercase;
+}
+
+.breaking:after {
+  left: 100%;
+  top: 50%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+  border-color: rgba(51, 51, 51, 0);
+  border-left-color: #333;
+  border-width: 10px;
+  margin-top: -10px;
+}
+
+.magazine-latest-news .news-slider {
+  margin:0  150px 0 130px;
+}
+
+.magazine-latest-news .flex-control-nav {
+  bottom: 25px;
+}
+
+.magazine-latest-news a {
+  color: #333;
+}