Add landingpage and lazyloading voor 3d map

package.json

@@ -19,9 +19,9 @@
     "@angular/platform-browser": "~10.1.3",
     "@angular/platform-browser-dynamic": "~10.1.3",
     "@angular/router": "~10.1.3",
-    "@farmmaps/common": ">=0.0.1-prerelease.434 <0.0.1",
+    "@farmmaps/common": ">=0.0.1-prerelease.454 <0.0.1",
-    "@farmmaps/common-map": ">=0.0.1-prerelease.434 <0.0.1",
+    "@farmmaps/common-map": ">=0.0.1-prerelease.454 <0.0.1",
-    "@farmmaps/common-map3d": ">=0.0.1-prerelease.434 <0.0.1",
+    "@farmmaps/common-map3d": ">=0.0.1-prerelease.454 <0.0.1",
     "@microsoft/signalr": "^3.1.3",
     "@ng-bootstrap/ng-bootstrap": "^7.0",
     "@ngrx/effects": "^10.0",
@@ -46,12 +46,12 @@
     "moment": "^2.27.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1001.3",
+    "@angular-builders/custom-webpack": "~10.0.1",
+    "@angular-devkit/build-angular": "^0.1002.0",
     "@angular-devkit/build-ng-packagr": "~0.1001.3",
     "@angular/cli": "^10.1.3",
     "@angular/compiler-cli": "~10.1.3",
     "@angular/language-service": "~10.1.3",
-    "@angular-builders/custom-webpack": "~10.0.1",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",

src/app/app-routing.module.ts

@@ -2,20 +2,32 @@ import { NgModule } from '@angular/core';
 import { RouterModule, UrlSegment } from '@angular/router';
 
 import { AuthGuard, FullScreenGuard } from '@farmmaps/common';
-import { MapComponent } from '@farmmaps/common-map';
+//import { MapComponent } from '@farmmaps/common-map';
-import { Switch2D3DComponent } from  '@farmmaps/common-map3d';
+//import { Switch2D3DComponent } from  '@farmmaps/common-map3d';
 import { LogoComponent } from './logo/logo.component';
 import { MenuComponent } from './menu/menu.component';
 import { RegisterDeviceComponent } from './registerdevice/registerdevice.component';
 import { NotImplementedComponent } from '@farmmaps/common';
 import { NavBarGuard } from 'projects/common/src/public-api';
 import { TestComponent } from './test/test.component';
+import { LandingpageComponent } from './landingpage/landingpage.component';
 
 export function urlMatcher(url: UrlSegment[]) {
   return { consumed: url };
 }
 
 const routes = [
+
+  {
+    path: '',
+    canActivate: [NavBarGuard],
+    component: LandingpageComponent
+  },
+  {
+    path: '',
+    component: LogoComponent,
+    outlet: 'header-logo'
+  },
   {
     path: '',
     component: LogoComponent,
@@ -26,11 +38,6 @@ const routes = [
     component: MenuComponent,
     outlet: 'side-panel-menu'
   },
-  {
-    path: '',
-    redirectTo: 'map',
-    pathMatch: 'full'
-  },     
   {
     path: 'editor/:type/item/:itemcode',
     canActivate: [NavBarGuard],
@@ -41,27 +48,8 @@ const routes = [
     canActivate: [NavBarGuard],
     component: NotImplementedComponent
   },
-  { path: 'map', canActivateChild: [AuthGuard],canActivate:[FullScreenGuard], children: [
+  { path: 'map', loadChildren: () => import('../../projects/common-map/src/public-api').then(m => m.AppCommonMapModule), canActivateChild: [AuthGuard], canActivate: [FullScreenGuard] },
-    {
+  { path: 'map3d', loadChildren: () => import('./map3d/map3d.module').then(m => m.Map3DModule), canActivateChild: [AuthGuard], canActivate: [FullScreenGuard] },
-      path: '',
-      component: MapComponent
-    },    
-    {
-        path: ':xCenter/:yCenter/:zoom/:rotation/:baseLayer/:queryState',
-        component: MapComponent ,
-        children: [
-          {
-            path:'',
-            component: Switch2D3DComponent,
-            outlet: 'map-controls' 
-          }
-        ]      
-    },
-    {
-      path: ':queryState',
-      component: MapComponent  
-    }      
-   ]},
   {
     path: 'registerdevice/:deviceToken',
     canActivate: [FullScreenGuard],

src/app/app.module.ts

@@ -23,6 +23,7 @@ import { SecureOAuthStorage} from '@farmmaps/common';
 import { OAuthStorage } from 'angular-oauth2-oidc';
 import {Id4AuthconfigFactory} from './id4AuthconfigFactory';
 import { TestComponent } from './test/test.component';
+import { LandingpageComponent } from './landingpage/landingpage.component';
 
 export const BOOTSTRAP_EFFECTS = new InjectionToken('Bootstrap Effects');
 
@@ -67,13 +68,13 @@ export const metaReducers: MetaReducer<any>[] = [debug];
     LogoComponent,
     MenuComponent,
     RegisterDeviceComponent,
-    TestComponent
+    TestComponent,
+    LandingpageComponent
   ],
   imports: [
     AppRoutingModule,
     AppCommonModule,
     AppCommonServiceModule.forRoot(),
-    AppCommonMapModule.forRoot(),
     BrowserModule,
     StoreModule.forRoot({},{metaReducers,runtimeChecks: { // TODO fix this should all be true
 			strictStateImmutability: false,

src/app/landingpage/landingpage.component.html

@@ -0,0 +1,138 @@
+<header id="header" class="masthead text-white text-center">
+    <div class="overlay"></div>
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-xl-9 mx-auto">
+                <h1 class="mb-5"></h1>
+            </div>
+            <div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
+                <form>
+                    <div class="form-row">
+                        <div class="col-12 col-md-9 mb-2 mb-md-0"><input class="form-control form-control-lg" type="email" placeholder="Enter your email..."></div>
+                        <div class="col-12 col-md-3"><button class="btn btn-primary btn-block btn-lg" type="submit">Sign up!</button></div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</header>
+<section class="features-icons bg-light text-center">
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-lg-4">
+                <div class="mx-auto features-icons-item mb-5 mb-lg-0 mb-lg-3">
+                    <div class="d-flex features-icons-icon"><i class="icon-screen-desktop m-auto text-primary" data-bs-hover-animate="pulse"></i></div>
+                    <h3>Fully Responsive</h3>
+                    <p class="lead mb-0">This theme will look great on any device, no matter the size!</p>
+                </div>
+            </div>
+            <div class="col-lg-4">
+                <div class="mx-auto features-icons-item mb-5 mb-lg-0 mb-lg-3">
+                    <div class="d-flex features-icons-icon"><i class="icon-layers m-auto text-primary" data-bs-hover-animate="pulse"></i></div>
+                    <h3>Bootstrap 4 Ready</h3>
+                    <p class="lead mb-0">Featuring the latest build of the new Bootstrap 4 framework!</p>
+                </div>
+            </div>
+            <div class="col-lg-4">
+                <div class="mx-auto features-icons-item mb-5 mb-lg-0 mb-lg-3">
+                    <div class="d-flex features-icons-icon"><i class="icon-check m-auto text-primary" data-bs-hover-animate="pulse"></i></div>
+                    <h3>Easy to Use</h3>
+                    <p class="lead mb-0">Ready to use with your own content, or customize the source files!</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<section class="showcase">
+    <div class="container-fluid p-0">
+        <div class="row no-gutters">
+            <div class="col-lg-6 order-lg-2 text-white showcase-img" style="background-image:url('/images/bg-showcase-1.jpg');"><span></span></div>
+            <div class="col-lg-6 my-auto order-lg-1 showcase-text">
+                <h2>Fully Responsive Design</h2>
+                <p class="lead mb-0">When you use a theme created with Bootstrap, you know that the theme will look great on any device, whether it's a phone, tablet, or desktop the page will behave responsively!</p>
+            </div>
+        </div>
+        <div class="row no-gutters">
+            <div class="col-lg-6 text-white showcase-img" style="background-image:url('/images/bg-showcase-2.jpg');"><span></span></div>
+            <div class="col-lg-6 my-auto order-lg-1 showcase-text">
+                <h2>Updated For Bootstrap 4</h2>
+                <p class="lead mb-0">Newly improved, and full of great utility classes, Bootstrap 4 is leading the way in mobile responsive web development! All of the themes are now using Bootstrap 4!</p>
+            </div>
+        </div>
+        <div class="row no-gutters">
+            <div class="col-lg-6 order-lg-2 text-white showcase-img" style="background-image:url('/images/bg-showcase-3.jpg');"><span></span></div>
+            <div class="col-lg-6 my-auto order-lg-1 showcase-text">
+                <h2>Easy to Use &amp;&nbsp;Customize</h2>
+                <p class="lead mb-0">Landing Page is just HTML and CSS with a splash of SCSS for users who demand some deeper customization options. Out of the box, just add your content and images, and your new landing page will be ready to go!</p>
+            </div>
+        </div>
+    </div>
+</section>
+<section class="testimonials text-center bg-light">
+    <div class="container">
+        <h2 class="mb-5">What people are saying...</h2>
+        <div class="row">
+            <div class="col-lg-4">
+                <div class="mx-auto testimonial-item mb-5 mb-lg-0"><img class="rounded-circle img-fluid mb-3" src="/images/testimonials-1.jpg">
+                    <h5>Margaret E.</h5>
+                    <p class="font-weight-light mb-0">"This is fantastic! Thanks so much guys!"</p>
+                </div>
+            </div>
+            <div class="col-lg-4">
+                <div class="mx-auto testimonial-item mb-5 mb-lg-0"><img class="rounded-circle img-fluid mb-3" src="/images/testimonials-2.jpg">
+                    <h5>Fred S.</h5>
+                    <p class="font-weight-light mb-0">"Bootstrap is amazing. I've been using it to create lots of super nice landing pages."</p>
+                </div>
+            </div>
+            <div class="col-lg-4">
+                <div class="mx-auto testimonial-item mb-5 mb-lg-0"><img class="rounded-circle img-fluid mb-3" src="/images/testimonials-3.jpg">
+                    <h5>Sarah W.</h5>
+                    <p class="font-weight-light mb-0">"Thanks so much for making these free resources available to us!"</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<section class="call-to-action text-white text-center" style="background:url('/images/bg-masthead.jpg') no-repeat center center;background-size:cover;">
+    <div class="overlay"></div>
+    <div class="container">
+        <div class="row">
+            <div class="col-xl-9 mx-auto">
+                <h2 class="mb-4">Ready to get started? Sign up now!</h2>
+            </div>
+            <div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
+                <form>
+                    <div class="form-row">
+                        <div class="col-12 col-md-9 mb-2 mb-md-0"><input class="form-control form-control-lg" type="email" placeholder="Enter your email..."></div>
+                        <div class="col-12 col-md-3"><button class="btn btn-primary btn-block btn-lg" type="submit">Sign up!</button></div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</section>
+<footer class="footer bg-light">
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-6 my-auto h-100 text-center text-lg-left">
+                <ul class="list-inline mb-2">
+                    <li class="list-inline-item"><a href="#">About</a></li>
+                    <li class="list-inline-item"><span>⋅</span></li>
+                    <li class="list-inline-item"><a href="#">Contact</a></li>
+                    <li class="list-inline-item"><span>⋅</span></li>
+                    <li class="list-inline-item"><a href="#">Terms of &nbsp;Use</a></li>
+                    <li class="list-inline-item"><span>⋅</span></li>
+                    <li class="list-inline-item"><a href="#">Privacy Policy</a></li>
+                </ul>
+                <p class="text-muted small mb-4 mb-lg-0">© Brand 2020. All Rights Reserved.</p>
+            </div>
+            <div class="col-lg-6 my-auto h-100 text-center text-lg-right">
+                <ul class="list-inline mb-0">
+                    <li class="list-inline-item"><a href="#"><i class="fa fa-facebook fa-2x fa-fw"></i></a></li>
+                    <li class="list-inline-item"><a href="#"><i class="fa fa-twitter fa-2x fa-fw"></i></a></li>
+                    <li class="list-inline-item"><a href="#"><i class="fa fa-instagram fa-2x fa-fw"></i></a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</footer>

src/app/landingpage/landingpage.component.scss

@@ -0,0 +1,133 @@
+@import "~bootstrap/scss/bootstrap.scss";
+
+/*!
+ * Start Bootstrap - Landing Page v5.0.8 (https://startbootstrap.com/themes/landing-page)
+ * Copyright 2013-2020 Start Bootstrap
+ * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-landing-page/blob/master/LICENSE)
+ */
+
+ body {
+    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  }
+  
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-weight: 700;
+  }
+  
+  header.masthead {
+    position: relative;
+    background-color: #343a40;
+    background-size: cover;
+    padding-top: 8rem;
+    padding-bottom: 8rem;
+  }
+  
+  header.masthead .overlay {
+    position: absolute;
+    background-color: #212529;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    opacity: 0.3;
+  }
+  
+  header.masthead h1 {
+    font-size: 2rem;
+  }
+  
+  @media (min-width: 768px) {
+    header.masthead {
+      padding-top: 12rem;
+      padding-bottom: 12rem;
+    }
+    header.masthead h1 {
+      font-size: 3rem;
+    }
+  }
+  
+  .showcase .showcase-text {
+    padding: 3rem;
+  }
+  
+  .showcase .showcase-img {
+    min-height: 30rem;
+    background-size: cover;
+  }
+  
+  @media (min-width: 768px) {
+    .showcase .showcase-text {
+      padding: 7rem;
+    }
+  }
+  
+  .features-icons {
+    padding-top: 7rem;
+    padding-bottom: 7rem;
+  }
+  
+  .features-icons .features-icons-item {
+    max-width: 20rem;
+  }
+  
+  .features-icons .features-icons-item .features-icons-icon {
+    height: 7rem;
+  }
+  
+  .features-icons .features-icons-item .features-icons-icon i {
+    font-size: 4.5rem;
+  }
+  
+  .features-icons .features-icons-item:hover .features-icons-icon i {
+    font-size: 5rem;
+  }
+  
+  .testimonials {
+    padding-top: 7rem;
+    padding-bottom: 7rem;
+  }
+  
+  .testimonials .testimonial-item {
+    max-width: 18rem;
+  }
+  
+  .testimonials .testimonial-item img {
+    max-width: 12rem;
+    box-shadow: 0px 5px 5px 0px #adb5bd;
+  }
+  
+  .call-to-action {
+    position: relative;
+    background-color: #343a40;
+    background-size: cover;
+    padding-top: 7rem;
+    padding-bottom: 7rem;
+  }
+  
+  .call-to-action .overlay {
+    position: absolute;
+    background-color: #212529;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    opacity: 0.3;
+  }
+  
+  footer.footer {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+  }
+  
+
+#header {
+    background: url("/images/pexels-pixabay-207247.jpg");
+    background-size: cover;
+    height: 100vh;
+}

src/app/landingpage/landingpage.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TestComponent } from './landingpage.component';
+
+describe('TestComponent', () => {
+  let component: TestComponent;
+  let fixture: ComponentFixture<TestComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TestComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/landingpage/landingpage.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { ItemService} from '@farmmaps/common';
+import { Observable} from 'rxjs';
+
+@Component({
+  selector: 'app-test',
+  templateUrl: './landingpage.component.html',
+  styleUrls: ['./landingpage.component.scss']
+})
+export class LandingpageComponent implements OnInit {
+
+   //public gradientItems:Observable<any[]>
+
+   constructor(private itemService$:ItemService) { 
+   }
+
+   ngOnInit(): void {
+   }
+}

src/app/map3d/map3d-router.module.ts

@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { Switch2D3DComponent} from '../../../projects/common-map3d/src/public-api';
+import { MapComponent} from '../../../projects/common-map/src/public-api';
+
+const routes = [   
+    {
+        path: '',
+        component: MapComponent   
+    },
+    {
+       path: ':xCenter/:yCenter/:zoom/:rotation/:baseLayer/:queryState',
+       component: MapComponent,
+       children: [
+         {
+           path: '',
+           component: Switch2D3DComponent,
+           outlet: 'map-controls'  
+         }
+       ]
+    },
+    {
+       path: ':queryState', 
+       component: MapComponent
+    }
+  ];
+
+  @NgModule({
+    imports: [
+        RouterModule.forChild(routes),
+    ],
+    exports: [
+        RouterModule
+    ]
+  })
+  export class Map3DRouterModule { }

src/app/map3d/map3d.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CommonMap3dModule} from '../../../projects/common-map3d/src/public-api';
+import { AppCommonMapModule} from '../../../projects/common-map/src/public-api';
+import {Map3DRouterModule} from './map3d-router.module';
+
+
+  
+  @NgModule({
+    imports: [
+        Map3DRouterModule,
+        AppCommonMapModule,        
+        CommonMap3dModule
+    ],
+    exports: [
+        RouterModule
+    ]
+  })
+  export class Map3DModule { }

src/styles.css

@@ -1 +1,97 @@
 /* You can add global styles to this file, and also import other style files */
+/* latin-ext */
+@font-face {
+    font-family: 'Lato';
+    font-style: italic;
+    font-weight: 300;
+    src: local('Lato Light Italic'), local('Lato-LightItalic'), url(https://fonts.gstatic.com/s/lato/v17/S6u_w4BMUTPHjxsI9w2_FQft1dw.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Lato';
+    font-style: italic;
+    font-weight: 300;
+    src: local('Lato Light Italic'), local('Lato-LightItalic'), url(https://fonts.gstatic.com/s/lato/v17/S6u_w4BMUTPHjxsI9w2_Gwft.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Lato';
+    font-style: italic;
+    font-weight: 400;
+    src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v17/S6u8w4BMUTPHjxsAUi-qJCY.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Lato';
+    font-style: italic;
+    font-weight: 400;
+    src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v17/S6u8w4BMUTPHjxsAXC-q.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Lato';
+    font-style: italic;
+    font-weight: 700;
+    src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v17/S6u_w4BMUTPHjxsI5wq_FQft1dw.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Lato';
+    font-style: italic;
+    font-weight: 700;
+    src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v17/S6u_w4BMUTPHjxsI5wq_Gwft.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 300;
+    src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh7USSwaPGR_p.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 300;
+    src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh7USSwiPGQ.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh6UVSwaPGR_p.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }