├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── Assets
    │   ├── font-logo.png
    │   ├── logo.svg
    │   ├── normalize.css
    │   ├── custom.css
    │   └── webflow.css
    ├── main.js
    ├── components
    │   ├── Main
    │   │   ├── SideBar
    │   │   │   ├── SideBar.vue
    │   │   │   └── SectionLeft
    │   │   │   │   ├── SectionOne.vue
    │   │   │   │   ├── SearchBox.vue
    │   │   │   │   └── LatestList.vue
    │   │   ├── Main.vue
    │   │   └── Content
    │   │   │   ├── Notification.vue
    │   │   │   ├── Futures
    │   │   │       ├── AllFutures.vue
    │   │   │       └── Content
    │   │   │       │   ├── Asia
    │   │   │       │       └── Table.vue
    │   │   │       │   ├── Americas
    │   │   │       │       └── Table.vue
    │   │   │       │   └── Europe
    │   │   │       │       └── Table.vue
    │   │   │   ├── Overview
    │   │   │       ├── AllOverall.vue
    │   │   │       └── Content
    │   │   │       │   ├── AsiaContent
    │   │   │       │       ├── Graph
    │   │   │       │       │   ├── GraphContent.vue
    │   │   │       │       │   └── GraphContentData.js
    │   │   │       │       ├── SectionContent.vue
    │   │   │       │       ├── GraphFilter.vue
    │   │   │       │       └── Table.vue
    │   │   │       │   ├── AmericaContent
    │   │   │       │       ├── Graph
    │   │   │       │       │   ├── GraphContent.vue
    │   │   │       │       │   └── GraphContentData.js
    │   │   │       │       ├── SectionContent.vue
    │   │   │       │       ├── Table.vue
    │   │   │       │       └── GraphFilter.vue
    │   │   │       │   └── EuropeContent
    │   │   │       │       ├── Graph
    │   │   │       │           ├── GraphContent.vue
    │   │   │       │           └── GraphContentData.js
    │   │   │       │       ├── SectionContent.vue
    │   │   │       │       ├── GraphFilter.vue
    │   │   │       │       └── Table.vue
    │   │   │   ├── AllContent.vue
    │   │   │   ├── Americas
    │   │   │       ├── AllAmericas.vue
    │   │   │       └── Content
    │   │   │       │   ├── Peru.vue
    │   │   │       │   ├── Canada.vue
    │   │   │       │   ├── Mexico.vue
    │   │   │       │   ├── Brazil.vue
    │   │   │       │   ├── Argentina.vue
    │   │   │       │   └── USA.vue
    │   │   │   ├── EMEA
    │   │   │       ├── AllEmea.vue
    │   │   │       └── Content
    │   │   │       │   ├── France.vue
    │   │   │       │   ├── Germany.vue
    │   │   │       │   ├── Poland.vue
    │   │   │       │   ├── Europe.vue
    │   │   │       │   ├── Denmark.vue
    │   │   │       │   └── UK.vue
    │   │   │   ├── APAC
    │   │   │       ├── AllApac.vue
    │   │   │       └── Content
    │   │   │       │   ├── India.vue
    │   │   │       │   ├── SriLanka.vue
    │   │   │       │   ├── SouthKorea.vue
    │   │   │       │   ├── HongKong.vue
    │   │   │       │   ├── China.vue
    │   │   │       │   └── Japan.vue
    │   │   │   └── SectionTabs.vue
    │   ├── Navbar
    │   │   ├── TopNav.vue
    │   │   └── MainNav.vue
    │   └── Footer
    │   │   └── Footer.vue
    ├── routes.js
    └── App.vue
├── .gitignore
├── package.json
└── readme.md


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simon01007/vue_stock-trader/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/Assets/font-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simon01007/vue_stock-trader/HEAD/src/Assets/font-logo.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | import App from './App.vue'
 4 | 
 5 | import {routes} from './routes.js'
 6 | 
 7 | Vue.config.productionTip = false
 8 | 
 9 | Vue.use(VueRouter);
10 | 
11 | const router = new VueRouter ({
12 |   mode: 'history',
13 |   routes: routes
14 | });
15 | 
16 | new Vue({
17 |   router: router,
18 |   render: h => h(App)
19 | }).$mount('#app')
20 | 


--------------------------------------------------------------------------------
/src/components/Main/SideBar/SideBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <!-- Sidebar -->
 3 |     <content-section-one />
 4 | </template>
 5 | 
 6 | <script>
 7 |     // Import our components
 8 |     import SectionOne from './SectionLeft/SectionOne.vue'
 9 | 
10 |     // Use our components in our App.vue template
11 |     export default {
12 |         components: {
13 |             contentSectionOne: SectionOne,
14 |         }
15 |     }
16 | </script>
17 | 
18 | <style>
19 | </style>


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
 8 |     <title>stock-trader</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but stock-trader doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/components/Main/Main.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="main-body w-container">
 3 |         <!-- Sidebar Section -->
 4 |         <content-section-one />
 5 |         <!-- Main Tabs & Content -->
 6 |         <content-section-two />
 7 |     </div>
 8 | </template>
 9 | 
10 | <script>
11 |     // Import our components from component directory
12 |     import SectionOne from './SideBar/SideBar.vue'
13 |     import SectionTwo from './Content/AllContent.vue'
14 | 
15 |     // Use our components in our App.vue template
16 |     export default {
17 |         components: {
18 |             contentSectionOne: SectionOne,
19 |             contentSectionTwo: SectionTwo,
20 |         }
21 |     }
22 | </script>
23 | 
24 | <style>
25 | </style>


--------------------------------------------------------------------------------
/src/components/Main/Content/Notification.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |         <div class="text-block">
 3 |             Before it&#x27;s here, it&#x27;s on the Bloomberg Terminal.
 4 |             <icon name="desktop"></icon>
 5 |             <icon name="desktop"></icon>
 6 |             <a class="link">Learn More</a>
 7 |         </div>
 8 | </template>
 9 | 
10 | <script>
11 |     // Font Awesome Icon
12 |     import 'vue-awesome/icons/desktop'
13 |     import Icon from 'vue-awesome/components/Icon'
14 | 
15 |     export default {
16 |         components: {
17 |             icon: Icon
18 |         }
19 |     }
20 | </script>
21 | 
22 | <style scoped>
23 | 
24 |     .text-block {
25 |         margin-top: 0;
26 |     }
27 | 
28 |     .link {
29 |         margin: 0 0 0 5px;
30 |         cursor: pointer;
31 |     }
32 | 
33 |     /* Icon */
34 |     svg.fa-icon {
35 |         color: white;
36 |         padding: 0.5em 0 0 0;
37 |     }
38 | 
39 | 
40 | </style>
41 | 


--------------------------------------------------------------------------------
/src/routes.js:
--------------------------------------------------------------------------------
 1 | // Set up our routes
 2 | 
 3 | import Overall from './components/Main/Content/Overview/AllOverall.vue'
 4 | import Futures from './components/Main/Content/Futures/AllFutures.vue'
 5 | import Americas from './components/Main/Content/Americas/AllAmericas.vue'
 6 | import EMEA from './components/Main/Content/EMEA/AllEmea.vue'
 7 | import APAC from './components/Main/Content/APAC/AllApac.vue'
 8 | 
 9 | export const routes = [
10 |     { 
11 |         path: '/', 
12 |         component: Overall 
13 |     },
14 |     { 
15 |         path: '/stocks', 
16 |         component: Overall 
17 |     },
18 |     { 
19 |         path: '/futures', 
20 |         component: Futures
21 |     },
22 |     { 
23 |         path: '/world-indexes/americas', 
24 |         component: Americas
25 |     },
26 |     { 
27 |         path: '/world-indexes/europe-africa-middle-east', 
28 |         component: EMEA
29 |     },
30 |     {
31 |         path:'/world-indexes/asia-pacific',
32 |         component: APAC
33 |     }
34 | ]


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="main-wrapper">
 3 |       <!-- Our Nav Bar Components-->
 4 |       <top-nav-bar />
 5 |       <main-nav-bar />
 6 |       <!-- Main Content-->
 7 |       <main-contain-body />
 8 |       <!-- Footer -->
 9 |       <main-footer />
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | // Import our components from component directory
15 | import TopBar from './components/Navbar/TopNav.vue'
16 | import MainBar from './components/Navbar/MainNav.vue'
17 | import MainContent from './components/Main/Main.vue'
18 | import Footer from './components/Footer/Footer.vue'
19 | 
20 | // Use our components in our App.vue template
21 | export default {
22 |   components: {
23 |     topNavBar: TopBar,
24 |     mainNavBar: MainBar,
25 |     mainContainBody: MainContent,
26 |     mainFooter: Footer
27 |   }
28 | }
29 | </script>
30 | 
31 | <style scoped>
32 |   @import './Assets/normalize.css';
33 |   @import './Assets/webflow.css';
34 |   @import './Assets/custom.css';
35 |   
36 | </style>


--------------------------------------------------------------------------------
/src/components/Main/Content/Futures/AllFutures.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <!-- All Content -->
 4 |         <div class="div-block-5 pattern-div"></div>
 5 |             <!-- America Future Table -->
 6 |             <america-future />
 7 |         <div class="div-block-5 pattern-div"></div>
 8 |             <!-- Europe Future Table -->
 9 |             <europe-future />
10 |         <div class="div-block-5 pattern-div"></div>
11 |             <!-- Asia Future Table -->
12 |             <asia-future />
13 |     </div>
14 | </template>
15 | 
16 | <script>
17 |     // Import our components from component directory
18 |     import AmericaFutures from './Content/Americas/Table.vue'
19 |     import EuropeFutures from './Content/Europe/Table.vue'
20 |     import AsiaFutures from './Content/Asia/Table.vue'
21 | 
22 |     // Use our components in our App.vue template
23 |     export default {
24 |         components: {
25 |             americaFuture: AmericaFutures,
26 |             europeFuture: EuropeFutures,
27 |             asiaFuture: AsiaFutures
28 |         }
29 |     }
30 | </script>
31 | 
32 | <style>
33 | </style>


--------------------------------------------------------------------------------
/src/components/Navbar/TopNav.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="top-nav-section">
 3 |         <div class="top-nav w-container">
 4 |             <a href="#" class="link link-br">Bloomberg the Company &amp; Its Products
 5 |                 <span><icon name="caret-down"></icon></span>
 6 |             </a>
 7 |             <a href="#" class="link link-br">Bloomberg Anywhere Remote Login</a>
 8 |             <a href="#" class="link">Bloomberg Terminal Demo Request</a>
 9 |         </div>
10 |     </div>
11 | </template>
12 | 
13 | <script scoped>
14 |     // Font Awesome Icon
15 |     import 'vue-awesome/icons/caret-down'
16 |     import Icon from 'vue-awesome/components/Icon'
17 |     export default {
18 |         components: {
19 |             icon: Icon,
20 |         }
21 |     }
22 | </script>
23 | 
24 | 
25 | <style scoped>
26 |     @import './../../Assets/normalize.css';
27 |     @import './../../Assets/webflow.css';
28 |     @import './../../Assets/custom.css';
29 | 
30 |     svg {
31 |         color: lightgray;
32 |         height: 14px;
33 |     }
34 |     svg.fa-icon {
35 |         padding: 0.2em 0 0 0;
36 |     }
37 | 
38 | </style>
39 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/Overview/AllOverall.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <div class="div-block-5 pattern-div"></div>
 4 |             <!-- America Section -->
 5 |             <main-section-content />
 6 |         <div class="div-block-5 pattern-div"></div>
 7 |             <!-- Europe, Middle East and Africa Section -->
 8 |             <main-section-content-two />
 9 |         <div class="div-block-5 pattern-div"></div>
10 |             <!-- Asia Pacific Section -->
11 |             <main-section-content-three />
12 |     </div>
13 | </template>
14 | 
15 | <script>
16 |     import AmericaSectionContent from './Content/AmericaContent/SectionContent.vue'
17 |     import EuropeSectionContent from './Content/EuropeContent/SectionContent.vue'
18 |     import AsiaSectionContent from './Content/AsiaContent/SectionContent.vue'
19 | 
20 |     export default {
21 |         components: {
22 |             mainSectionContent: AmericaSectionContent,
23 |             mainSectionContentTwo: EuropeSectionContent,
24 |             mainSectionContentThree: AsiaSectionContent
25 |         }
26 |     }
27 | </script>
28 | 
29 | 
30 | <style scoped>
31 | 
32 | </style>
33 | 
34 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/Overview/Content/AsiaContent/Graph/GraphContent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <!-- Our Chart Div -->
 3 |     <div class="bg">
 4 |         <canvas id="asia-chart"></canvas>
 5 |     </div>
 6 | </template>
 7 | 
 8 | <script>
 9 |     import Chart from 'chart.js';
10 |     import planetChartData from './GraphContentData.js'
11 | 
12 |     export default {
13 |         methods: {
14 |             createChart(chartId, chartData) {
15 |                 const ctx = document.getElementById(chartId);
16 |                 const myChart = new Chart(ctx, {
17 |                     type: chartData.type,
18 |                     data: chartData.data,
19 |                     options: chartData.options,
20 |                 });
21 |             }
22 |         },
23 |         data() {
24 |             return {
25 |                 planetChartData: planetChartData,
26 |             }
27 |         },
28 |         mounted() {
29 |             this.createChart('asia-chart', this.planetChartData);
30 |         }
31 |     }
32 | </script>
33 | 
34 | <style scoped>
35 | 
36 |     .planet-chart {
37 |         padding: 1em;
38 |     }
39 |     .bg {
40 |         background-color: #2b343f;
41 |     }
42 | 
43 | </style>
44 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/Overview/Content/AmericaContent/Graph/GraphContent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <!-- Our Chart Div -->
 3 |     <div class="bg">
 4 |         <canvas id="planet-chart"></canvas>
 5 |     </div>
 6 | </template>
 7 | 
 8 | <script>
 9 |     import Chart from 'chart.js';
10 |     import planetChartData from './GraphContentData.js'
11 | 
12 |     export default {
13 |         methods: {
14 |             createChart(chartId, chartData) {
15 |                 const ctx = document.getElementById(chartId);
16 |                 const myChart = new Chart(ctx, {
17 |                     type: chartData.type,
18 |                     data: chartData.data,
19 |                     options: chartData.options,
20 |                 });
21 |             }
22 |         },
23 |         data() {
24 |             return {
25 |                 planetChartData: planetChartData,
26 |             }
27 |         },
28 |         mounted() {
29 |             this.createChart('planet-chart', this.planetChartData);
30 |         }
31 |     }
32 | </script>
33 | 
34 | <style scoped>
35 | 
36 |     .planet-chart {
37 |         padding: 1em;
38 |     }
39 |     .bg {
40 |         background-color: #2b343f;
41 |     }
42 | 
43 | </style>
44 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/Overview/Content/EuropeContent/Graph/GraphContent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <!-- Our Chart Div -->
 3 |     <div class="bg">
 4 |         <canvas id="europe-chart2"></canvas>
 5 |     </div>
 6 | </template>
 7 | 
 8 | <script>
 9 |     import Chart from 'chart.js';
10 |     import planetChartData from './GraphContentData.js'
11 | 
12 |     export default {
13 |         methods: {
14 |             createChart(chartId, chartData) {
15 |                 const ctx = document.getElementById(chartId);
16 |                 const myChart = new Chart(ctx, {
17 |                     type: chartData.type,
18 |                     data: chartData.data,
19 |                     options: chartData.options,
20 |                 });
21 |             }
22 |         },
23 |         data() {
24 |             return {
25 |                 planetChartData: planetChartData,
26 |             }
27 |         },
28 |         mounted() {
29 |             this.createChart('europe-chart2', this.planetChartData);
30 |         }
31 |     }
32 | </script>
33 | 
34 | <style scoped>
35 | 
36 |     .planet-chart {
37 |         padding: 1em;
38 |     }
39 |     .bg {
40 |         background-color: #2b343f;
41 |     }
42 | 
43 | </style>
44 | 


--------------------------------------------------------------------------------
/src/components/Main/SideBar/SectionLeft/SectionOne.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="div-block-2">
 3 |         <div class="section-front-box"></div>
 4 |         <h4 class="heading">Markets</h4>
 5 |         <h1 class="heading-2">Stocks</h1>
 6 |         <div class="pattern-box-border">
 7 |             <!-- Search Box -->
 8 |             <search-box />
 9 |         </div>
10 |         <div class="section-front-box light-box"></div>
11 |         <!-- Latest li items -->
12 |         <latest-ul-list />
13 |     </div>
14 | </template>
15 | 
16 | <script>
17 |     import SectionBox from './SearchBox.vue'
18 |     import LatestList from './LatestList.vue'
19 | 
20 |     export default {
21 |         components: {
22 |             searchBox: SectionBox,
23 |             latestUlList: LatestList
24 |         }
25 |     };
26 | </script>
27 | 
28 | 
29 | <style scoped>
30 |     @import './../../../../Assets/normalize.css';
31 |     @import './../../../../Assets/webflow.css';
32 |     @import './../../../../Assets/custom.css';
33 | 
34 |     /* Border Style Pattern */
35 |     .section-front-box {
36 |         height: 1.4em;
37 |         margin-top: 2em;
38 |     }
39 |     .light-box {
40 |         margin-top: 3em;
41 |     }
42 | 
43 | 
44 | </style>
45 | 
46 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "stock-trader",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve --open",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "amcharts3": "amcharts/amcharts3",
12 |     "babel-preset-stage-2": "^6.24.1",
13 |     "chart.js": "^2.7.2",
14 |     "copy-webpack-plugin": "^4.5.1",
15 |     "vue": "^2.5.13",
16 |     "vue-awesome": "^3.0.0",
17 |     "vue-chartjs": "^3.3.1",
18 |     "vue-router": "^3.0.1",
19 |     "vuex": "^3.0.1"
20 |   },
21 |   "devDependencies": {
22 |     "@vue/cli-plugin-babel": "^3.0.0-beta.6",
23 |     "@vue/cli-plugin-eslint": "^3.0.0-beta.6",
24 |     "@vue/cli-service": "^3.0.0-beta.6",
25 |     "vue-template-compiler": "^2.5.13"
26 |   },
27 |   "babel": {
28 |     "presets": [
29 |       "@vue/app"
30 |     ]
31 |   },
32 |   "eslintConfig": {
33 |     "root": true,
34 |     "extends": [
35 |       "plugin:vue/essential",
36 |       "eslint:recommended"
37 |     ]
38 |   },
39 |   "postcss": {
40 |     "plugins": {
41 |       "autoprefixer": {}
42 |     }
43 |   },
44 |   "browserslist": [
45 |     "> 1%",
46 |     "last 2 versions",
47 |     "not ie <= 8"
48 |   ]
49 | }
50 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/AllContent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="div-block-3 w-clearfix mt">
 3 |     <!-- All Content -->
 4 |         <notification-window />
 5 |         <main-content-tabs />
 6 |         <!-- Render Components according to Routes -->
 7 |         <router-view></router-view>
 8 |             <!-- Overview Section -->
 9 |             <!-- <overview-section /> -->
10 |             <!-- Futures Section -->
11 |             <!-- <futures-section /> -->
12 |     </div>
13 | </template>
14 | 
15 | <script>
16 |     // Import our components from component directory
17 |     import TerminalNotification from './Notification.vue'
18 |     import SectionTabs from './SectionTabs.vue'
19 |     // Our Tab Content
20 |     import Overview from './Overview/AllOverall.vue'
21 |     import Futures from './Futures/AllFutures.vue'
22 | 
23 |     // Use our components in our App.vue template
24 |     export default {
25 |         components: {
26 |             notificationWindow: TerminalNotification,
27 |             mainContentTabs: SectionTabs,
28 |             overviewSection: Overview,
29 |             futuresSection: Futures
30 |         }
31 |     }
32 | </script>
33 | 
34 | <style scoped>
35 |     .mt {
36 |         margin-top: 2em;
37 |     }
38 | </style>


--------------------------------------------------------------------------------
/src/components/Footer/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="footer-container">
 3 |         <div class="footer w-container">
 4 |             <div class="div-block-11 footer-div footer-left">
 5 |                 <a href="#" class="footer-item">Terms of Service</a>
 6 |                 <a href="#" class="footer-item">Trademarks</a>
 7 |                 <a href="#" class="footer-item">Privacy Policy</a>
 8 |                 <div class="text-block-5">©2018 Bloomberg L.P. All Rights Reserved</div>
 9 |             </div>
10 |             <div class="div-block-11 footer-div footer-right">
11 |                 <a href="#" class="footer-item">Careers</a>
12 |                 <a href="#" class="footer-item">Made in NYC</a>
13 |                 <a href="#" class="footer-item">Advertise</a>
14 |                 <a href="#" class="footer-item">Ad Choices</a>
15 |                 <div class="w-clearfix">
16 |                     <a href="#" class="footer-item footer-item-two">Help</a>
17 |                     <a href="#" class="footer-item footer-item-two">Website Feedback</a>
18 |                 </div>
19 |             </div>
20 |         </div>
21 |     </div>
22 | </template>
23 | 
24 | <script>
25 |     export default {
26 |         
27 |     }
28 | </script>
29 | 
30 | <style scoped>
31 | 
32 | </style>
33 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/Overview/Content/AmericaContent/SectionContent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="display-block">
 3 |         <h3 class="heading-3 selected-tab">Americas</h3>
 4 |         <div>
 5 |             <!-- Graph Filter Component -->
 6 |             <graph-filter-selection />
 7 |             <!-- Chart Border -->
 8 |             <div class="pattern-box-border chart-box">
 9 |                 <!-- Chart Component-->
10 |                 <main-graph />
11 |             </div>
12 |             <div class="div-block-5 pattern-div"></div>
13 |             <!-- Table -->
14 |             <div class="table-div">
15 |                 <main-table />
16 |             </div>
17 |         </div>
18 |     </div>
19 | </template>
20 | 
21 | <script>
22 |     import GraphFilter from './GraphFilter.vue'
23 |     import Chart from './Graph/GraphContent'
24 |     import Table from './Table.vue'
25 | 
26 |     export default {
27 |         components: {
28 |             graphFilterSelection: GraphFilter,
29 |             mainGraph: Chart,
30 |             mainTable: Table
31 |         }
32 |     }
33 | </script>
34 | 
35 | 
36 | <style scoped>
37 |     .table-div {
38 |         margin-bottom: 2em;
39 |     }
40 |     .heading-3:hover {
41 |         cursor: pointer;
42 |         color: #fb8b1e;
43 |     }
44 | 
45 | </style>
46 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/Overview/Content/AsiaContent/SectionContent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="display-block">
 3 |         <h3 class="heading-3 selected-tab">Asia Pacific</h3>
 4 |         <div>
 5 |             <!-- Graph Filter Component -->
 6 |             <graph-filter-selection />
 7 |             <!-- Chart Border -->
 8 |             <div class="pattern-box-border chart-box">
 9 |                 <!-- Chart Component-->
10 |                 <main-graph />
11 |             </div>
12 |             <div class="div-block-5 pattern-div"></div>
13 |             <!-- Table -->
14 |             <div class="table-div">
15 |                 <main-table />
16 |             </div>
17 |         </div>
18 |     </div>
19 | </template>
20 | 
21 | <script>
22 |     import GraphFilter from './GraphFilter.vue'
23 |     import Chart from './Graph/GraphContent'
24 |     import Table from './Table.vue'
25 | 
26 |     export default {
27 |         components: {
28 |             graphFilterSelection: GraphFilter,
29 |             mainGraph: Chart,
30 |             mainTable: Table
31 |         }
32 |     }
33 | </script>
34 | 
35 | 
36 | <style scoped>
37 |     .table-div {
38 |         margin-bottom: 2em;
39 |     }
40 |     .heading-3:hover {
41 |         cursor: pointer;
42 |         color: #fb8b1e;
43 |     }
44 | 
45 | </style>
46 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/Overview/Content/EuropeContent/SectionContent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="display-block">
 3 |         <h3 class="heading-3 selected-tab">Europe, Middle East & Africa</h3>
 4 |         <div>
 5 |             <!-- Graph Filter Component -->
 6 |             <graph-filter-selection />
 7 |             <!-- Chart Border -->
 8 |             <div class="pattern-box-border chart-box">
 9 |                 <!-- Chart Component-->
10 |                 <main-graph />
11 |             </div>
12 |             <div class="div-block-5 pattern-div"></div>
13 |             <!-- Table -->
14 |             <div class="table-div">
15 |                 <main-table />
16 |             </div>
17 |         </div>
18 |     </div>
19 | </template>
20 | 
21 | <script>
22 |     import GraphFilter from './GraphFilter.vue'
23 |     import Chart from './Graph/GraphContent'
24 |     import Table from './Table.vue'
25 | 
26 |     export default {
27 |         components: {
28 |             graphFilterSelection: GraphFilter,
29 |             mainGraph: Chart,
30 |             mainTable: Table
31 |         }
32 |     }
33 | </script>
34 | 
35 | 
36 | <style scoped>
37 |     .table-div {
38 |         margin-bottom: 2em;
39 |     }
40 |     .heading-3:hover {
41 |         cursor: pointer;
42 |         color: #fb8b1e;
43 |     }
44 | 
45 | </style>
46 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/Americas/AllAmericas.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <!-- All Content -->
 4 |         <div class="div-block-5 pattern-div"></div>
 5 |             <!-- Country Table -->
 6 |             <america />
 7 |         <div class="div-block-5 pattern-div"></div>
 8 |             <argentina />
 9 |         <div class="div-block-5 pattern-div"></div>
10 |             <peru />
11 |         <div class="div-block-5 pattern-div"></div>
12 |             <brazil />
13 |         <div class="div-block-5 pattern-div"></div>
14 |             <canada />
15 |         <div class="div-block-5 pattern-div"></div>
16 |             <mexico />
17 |     </div>
18 | </template>
19 | 
20 | <script>
21 |     // Import our components from component directory
22 |     import America from './Content/USA.vue'
23 |     import Argentina from './Content/Argentina.vue'
24 |     import Peru from './Content/Peru.vue'
25 |     import Brazil from './Content/Brazil.vue'
26 |     import Canada from './Content/Canada.vue'
27 |     import Mexico from './Content/Mexico.vue'
28 | 
29 |     // Use our components in our App.vue template
30 |     export default {
31 |         components: {
32 |             america: America,
33 |             argentina: Argentina,
34 |             peru: Peru,
35 |             brazil: Brazil,
36 |             canada: Canada,
37 |             mexico: Mexico
38 |         }
39 |     }
40 | </script>
41 | 
42 | <style>
43 | </style>


--------------------------------------------------------------------------------
/src/components/Main/Content/EMEA/AllEmea.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <!-- All Content -->
 4 |         <div class="div-block-5 pattern-div"></div>
 5 |             <!-- Country Table -->
 6 |             <europe />
 7 |         <div class="div-block-5 pattern-div"></div>
 8 |             <united-kingdom />
 9 |         <div class="div-block-5 pattern-div"></div>
10 |             <france />
11 |         <div class="div-block-5 pattern-div"></div>
12 |             <germany />
13 |         <div class="div-block-5 pattern-div"></div>
14 |             <poland />
15 |         <div class="div-block-5 pattern-div"></div>
16 |             <denmark />
17 |     </div>
18 | </template>
19 | 
20 | <script>
21 |     // Import our components from component directory
22 |     import Europe from './Content/Europe.vue'
23 |     import UK from './Content/UK.vue'
24 |     import France from './Content/France.vue'
25 |     import Germany from './Content/Germany.vue'
26 |     import Poland from './Content/Poland.vue'
27 |     import Denmark from './Content/Denmark.vue'
28 | 
29 |     // Use our components in our App.vue template
30 |     export default {
31 |         components: {
32 |             europe: Europe,
33 |             unitedKingdom: UK,
34 |             france: France,
35 |             germany: Germany,
36 |             poland: Poland,
37 |             denmark: Denmark
38 |         }
39 |     }
40 | </script>
41 | 
42 | <style>
43 | </style>


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # Bloomberg Markets Stock Page
 2 | 
 3 | This project is a Front-End clone of the [Bloomberg Markets Stock Page](https://www.bloomberg.com/markets/stocks) landing page (04/2018) built with [Vue JS](https://vuejs.org/) and [Charts JS](http://www.chartjs.org/).
 4 | 
 5 | A Tool used to aid the Front-End Design - [Webflow](https://webflow.com/).
 6 | 
 7 | ## Usage
 8 | 
 9 | > A Vue.js project, built with the Vue CLI.
10 | > This project was bootstrapped with [vue-cli](https://github.com/vuejs/vue-cli)
11 | 
12 | ### Deployed
13 | Deployed via [Surge](https://surge.sh/) at https://bloomberg-markets.surge.sh/
14 | 
15 | ## Instructions
16 | ### Build Setup
17 | 
18 | ``` bash
19 | # install dependencies
20 | yarn install
21 | 
22 | # serve with hot reload at localhost:8080
23 | yarn serve
24 | 
25 | # build for production with minification
26 | yarn build
27 | ```
28 | 
29 | For a detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
30 | 
31 | ### Note
32 | > Mobile & Tablet responsive designs have not been done yet. 
33 | 
34 | #### Resources
35 | * Vue Awesome Icons - https://github.com/Justineo/vue-awesome
36 | * Font-Awesome icon gallery - https://fontawesome.com/icons?d=gallery
37 | * Amcharts with Vue JS - https://www.amcharts.com/kbase/using-amcharts-vue-js-webpack/ - (path: `node_modules/@vue/cli-service/webpack.config.js`).
38 | * Chart JS - https://alligator.io/vuejs/vue-chart-js/


--------------------------------------------------------------------------------
/src/components/Main/Content/APAC/AllApac.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <!-- All Content -->
 4 |         <div class="div-block-5 pattern-div"></div>
 5 |             <!-- Country Table -->
 6 |             <japan />
 7 |         <div class="div-block-5 pattern-div"></div>
 8 |             <china />
 9 |         <div class="div-block-5 pattern-div"></div>
10 |             <hong-kong />
11 |         <div class="div-block-5 pattern-div"></div>
12 |             <south-korea />
13 |         <div class="div-block-5 pattern-div"></div>
14 |             <india />
15 |         <div class="div-block-5 pattern-div"></div>
16 |             <sri-lanka />
17 |     </div>
18 | </template>
19 | 
20 | <script>
21 |     // Import our components from component directory
22 |     import Japan from './Content/Japan.vue'
23 |     import China from './Content/China.vue'
24 |     import HongKong from './Content/HongKong.vue'
25 |     import SouthKorea from './Content/SouthKorea.vue'
26 |     import India from './Content/India.vue'
27 |     import SriLanka from './Content/SriLanka.vue'
28 | 
29 |     // Use our components in our App.vue template
30 |     export default {
31 |         components: {
32 |             japan: Japan,
33 |             china: China,
34 |             hongKong: HongKong,
35 |             southKorea: SouthKorea,
36 |             india: India,
37 |             sriLanka: SriLanka
38 |         }
39 |     }
40 | </script>
41 | 
42 | <style>
43 | </style>


--------------------------------------------------------------------------------
/src/components/Main/Content/SectionTabs.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="div-block-4 main-tab-div">
 3 |         <router-link to="/stocks" class="router-link" activeClass="selected">
 4 |             <h3 class="heading-3 main-tabs">Overview</h3>
 5 |         </router-link>
 6 |         <router-link to="/futures" class="router-link" activeClass="selected">
 7 |             <h3 class="heading-3 main-tabs">Futures</h3>
 8 |         </router-link>
 9 |         <router-link to="/world-indexes/americas" class="router-link" activeClass="selected">
10 |             <h3 class="heading-3 main-tabs">Americas</h3>
11 |         </router-link>
12 |         <router-link to="/world-indexes/europe-africa-middle-east" class="router-link" activeClass="selected">
13 |             <h3 class="heading-3 main-tabs">EMEA</h3>
14 |         </router-link>
15 |         <router-link to="/world-indexes/asia-pacific" class="router-link" activeClass="selected">
16 |             <h3 class="heading-3 main-tabs">APAC</h3>
17 |         </router-link>
18 |     </div>
19 | </template>
20 | 
21 | <script>
22 |     export default {
23 |         
24 |     }
25 | </script>
26 | 
27 | <style scoped>
28 |     .router-link{
29 |         text-decoration: none;
30 |         color: black;
31 |     }
32 |     .heading-3 {
33 |         cursor: pointer;
34 |     }
35 |     .heading-3:hover {
36 |         color: #fb8b1e;
37 |     }
38 |     .selected {
39 |         color: #fb8b1e;
40 |     }
41 | 
42 | </style>
43 | 


--------------------------------------------------------------------------------
/src/components/Main/SideBar/SectionLeft/SearchBox.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="div-block-6">
 3 |         <div class="w-form">
 4 |         <form id="email-form" name="email-form" data-name="Email Form" class="form">
 5 |             <input type="text" class="text-field quote-search w-input" maxlength="256" name="search" data-name="search" placeholder="Quote Search" id="search">
 6 |             <!-- <icon name="search"></icon> -->
 7 |         </form>
 8 |             <div class="success-message w-form-done"></div>
 9 |                 <div class="w-form-fail">
10 |                     <div>Oops! Something went wrong while submitting the form.</div>
11 |                 </div>
12 |         </div>
13 |         <div class="text-block-3">Recently Viewed:</div>
14 |         <div class="text-block-4">AACO:US</div>
15 |     </div>
16 | </template>
17 | 
18 | <script>
19 |     // Font Awesome Icon
20 |     import 'vue-awesome/icons/search'
21 |     import Icon from 'vue-awesome/components/Icon'
22 | 
23 |     export default {
24 |         components: {
25 |             icon: Icon,
26 |         }
27 |     }
28 | </script>
29 | 
30 | 
31 | <style scoped>
32 |     @import './../../../../Assets/normalize.css';
33 |     @import './../../../../Assets/webflow.css';
34 |     @import './../../../../Assets/custom.css';
35 | 
36 |     input::placeholder {
37 |         color: #fb8b1e;
38 |     }
39 |     .w-form {
40 |         margin: 0;
41 |     }
42 |     .text-block-3 {
43 |         border-top: 0.5px solid lightgrey;
44 |         padding-top: 0.6em;
45 |     }
46 | </style>
47 | 


--------------------------------------------------------------------------------
/src/Assets/logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px">
 4 | <g>
 5 | 	<g>
 6 | 		<rect x="181.793" y="363.598" width="148.402" height="148.402" fill="#FFFFFF"/>
 7 | 	</g>
 8 | </g>
 9 | <g>
10 | 	<g>
11 | 		<rect x="181.793" y="181.793" width="148.402" height="148.402" fill="#FFFFFF"/>
12 | 	</g>
13 | </g>
14 | <g>
15 | 	<g>
16 | 		<rect x="363.598" width="148.402" height="148.402" fill="#FFFFFF"/>
17 | 	</g>
18 | </g>
19 | <g>
20 | 	<g>
21 | 		<rect y="181.793" width="148.402" height="148.402" fill="#FFFFFF"/>
22 | 	</g>
23 | </g>
24 | <g>
25 | 	<g>
26 | 		<rect width="148.402" height="148.402" fill="#FFFFFF"/>
27 | 	</g>
28 | </g>
29 | <g>
30 | 	<g>
31 | 		<rect x="181.793" width="148.402" height="148.402" fill="#FFFFFF"/>
32 | 	</g>
33 | </g>
34 | <g>
35 | 	<g>
36 | 		<rect y="363.598" width="148.402" height="148.402" fill="#FFFFFF"/>
37 | 	</g>
38 | </g>
39 | <g>
40 | 	<g>
41 | 		<rect x="363.598" y="363.598" width="148.402" height="148.402" fill="#FFFFFF"/>
42 | 	</g>
43 | </g>
44 | <g>
45 | 	<g>
46 | 		<rect x="363.598" y="181.793" width="148.402" height="148.402" fill="#FFFFFF"/>
47 | 	</g>
48 | </g>
49 | <g>
50 | </g>
51 | <g>
52 | </g>
53 | <g>
54 | </g>
55 | <g>
56 | </g>
57 | <g>
58 | </g>
59 | <g>
60 | </g>
61 | <g>
62 | </g>
63 | <g>
64 | </g>
65 | <g>
66 | </g>
67 | <g>
68 | </g>
69 | <g>
70 | </g>
71 | <g>
72 | </g>
73 | <g>
74 | </g>
75 | <g>
76 | </g>
77 | <g>
78 | </g>
79 | </svg>
80 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/Overview/Content/AsiaContent/Graph/GraphContentData.js:
--------------------------------------------------------------------------------
 1 | export const planetChartData = {
 2 |     type: 'line',
 3 |     data: {
 4 |         labels: ['11a', '12p', '1p', '2p', '3p', '4p', '5p'],
 5 |         datasets: [
 6 |             { // first line graph
 7 |                 label: 'INDU:IND',
 8 |                 data: [0.74, 0.62, 0.58, 0.43, 0.31, 0.34, 0.51, 0.47],
 9 |                 fill: false,
10 |                 backgroundColor: [
11 |                     '#fb8b1e', // Orange
12 |                 ],
13 |                 borderColor: [
14 |                     '#fb8b1e',
15 |                 ],
16 |                 borderWidth: 3
17 |             },
18 |             { // another line graph
19 |                 label: 'SPX:IND',
20 |                 data: [0.78, 0.64, 0.61, 0.28, 0.37, 0.42, 0.27, 0.38],
21 |                 fill: false,
22 |                 backgroundColor: [
23 |                     '#5e80e5' // Blue
24 |                 ],
25 |                 borderColor: [
26 |                     '#5e80e5',
27 |                 ],
28 |                 borderWidth: 3
29 |             },
30 |             { // another line graph
31 |                 label: 'CCMP:IND',
32 |                 data: [0.64, 0.52, 0.52, 0.48, 0.35, 0.54, 0.50, 0.49],
33 |                 fill: false,
34 |                 backgroundColor: [
35 |                     '#ee5c78', // Red
36 |                 ],
37 |                 borderColor: [
38 |                     '#ee5c78',
39 |                 ],
40 |                 borderWidth: 3
41 |             }
42 |         ]
43 |     },
44 |     options: {
45 |         responsive: true,
46 |         lineTension: 1,
47 |         scales: {
48 |             yAxes: [{
49 |                 ticks: {
50 |                     beginAtZero: true,
51 |                     padding: 25,
52 |                 }
53 |             }]
54 |         }
55 |     }
56 | }
57 | 
58 | export default planetChartData;


--------------------------------------------------------------------------------
/src/components/Main/Content/Overview/Content/AmericaContent/Graph/GraphContentData.js:
--------------------------------------------------------------------------------
 1 | export const planetChartData = {
 2 |     type: 'line',
 3 |     data: {
 4 |         labels: ['11a', '12p', '1p', '2p', '3p', '4p', '5p'],
 5 |         datasets: [
 6 |             { // first line graph
 7 |                 label: 'INDU:IND',
 8 |                 data: [0.74, 0.62, 0.58, 0.43, 0.31, 0.34, 0.51, 0.47],
 9 |                 fill: false,
10 |                 backgroundColor: [
11 |                     '#fb8b1e', // Orange
12 |                 ],
13 |                 borderColor: [
14 |                     '#fb8b1e',
15 |                 ],
16 |                 borderWidth: 3
17 |             },
18 |             { // another line graph
19 |                 label: 'SPX:IND',
20 |                 data: [0.78, 0.64, 0.61, 0.28, 0.37, 0.42, 0.27, 0.38],
21 |                 fill: false,
22 |                 backgroundColor: [
23 |                     '#5e80e5' // Blue
24 |                 ],
25 |                 borderColor: [
26 |                     '#5e80e5',
27 |                 ],
28 |                 borderWidth: 3
29 |             },
30 |             { // another line graph
31 |                 label: 'CCMP:IND',
32 |                 data: [0.64, 0.52, 0.52, 0.48, 0.35, 0.54, 0.50, 0.49],
33 |                 fill: false,
34 |                 backgroundColor: [
35 |                     '#ee5c78', // Red
36 |                 ],
37 |                 borderColor: [
38 |                     '#ee5c78',
39 |                 ],
40 |                 borderWidth: 3
41 |             }
42 |         ]
43 |     },
44 |     options: {
45 |         responsive: true,
46 |         lineTension: 1,
47 |         scales: {
48 |             yAxes: [{
49 |                 ticks: {
50 |                     beginAtZero: true,
51 |                     padding: 25,
52 |                 }
53 |             }]
54 |         }
55 |     }
56 | }
57 | 
58 | export default planetChartData;


--------------------------------------------------------------------------------
/src/components/Main/Content/Overview/Content/EuropeContent/Graph/GraphContentData.js:
--------------------------------------------------------------------------------
 1 | export const planetChartData = {
 2 |     type: 'line',
 3 |     data: {
 4 |         labels: ['11a', '12p', '1p', '2p', '3p', '4p', '5p'],
 5 |         datasets: [
 6 |             { // first line graph
 7 |                 label: 'INDU:IND',
 8 |                 data: [0.74, 0.62, 0.58, 0.43, 0.31, 0.34, 0.51, 0.47],
 9 |                 fill: false,
10 |                 backgroundColor: [
11 |                     '#fb8b1e', // Orange
12 |                 ],
13 |                 borderColor: [
14 |                     '#fb8b1e',
15 |                 ],
16 |                 borderWidth: 3
17 |             },
18 |             { // another line graph
19 |                 label: 'SPX:IND',
20 |                 data: [0.78, 0.64, 0.61, 0.28, 0.37, 0.42, 0.27, 0.38],
21 |                 fill: false,
22 |                 backgroundColor: [
23 |                     '#5e80e5' // Blue
24 |                 ],
25 |                 borderColor: [
26 |                     '#5e80e5',
27 |                 ],
28 |                 borderWidth: 3
29 |             },
30 |             { // another line graph
31 |                 label: 'CCMP:IND',
32 |                 data: [0.64, 0.52, 0.52, 0.48, 0.35, 0.54, 0.50, 0.49],
33 |                 fill: false,
34 |                 backgroundColor: [
35 |                     '#ee5c78', // Red
36 |                 ],
37 |                 borderColor: [
38 |                     '#ee5c78',
39 |                 ],
40 |                 borderWidth: 3
41 |             }
42 |         ]
43 |     },
44 |     options: {
45 |         responsive: true,
46 |         lineTension: 1,
47 |         scales: {
48 |             yAxes: [{
49 |                 ticks: {
50 |                     beginAtZero: true,
51 |                     padding: 25,
52 |                 }
53 |             }]
54 |         }
55 |     }
56 | }
57 | 
58 | export default planetChartData;


--------------------------------------------------------------------------------
/src/components/Main/SideBar/SectionLeft/LatestList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <ul class="latest-list">
 3 |         <li class="list-item">
 4 |             <div class="div-block-10 list-item-div">
 5 |             <div class="latest-list-item-time">
 6 |                 <icon name="clock"></icon>
 7 |                 44 Minutes Ago
 8 |             </div>
 9 |             <a href="#" class="list-item-link">
10 |                 <h5 class="heading-4">Dollar Strengthens as U.S. Treasury Yields Near 3%: Markets Wrap</h5>
11 |             </a>
12 |             </div>
13 |         </li>
14 |         <li class="list-item">
15 |             <div class="div-block-10 list-item-div">
16 |             <div class="latest-list-item-time">
17 |                 <icon name="clock"></icon>
18 |                 AN HOUR AGO
19 |             </div>
20 |             <a href="#" class="list-item-link">
21 |                 <h5 class="heading-4">China's Tech Stocks Struggle Under ZTE Ban, IPhone Sales Concern</h5>
22 |             </a>
23 |             </div>
24 |         </li>
25 |         <li class="list-item">
26 |             <div class="div-block-10 list-item-div">
27 |             <div class="latest-list-item-time">
28 |                 <icon name="clock"></icon>
29 |                 12 AM
30 |             </div>
31 |             <a href="#" class="list-item-link">
32 |                 <h5 class="heading-4">Theme-Park Owner's Scary Dubai Stock Drop May Get Even Worse</h5>
33 |             </a>
34 |             </div>
35 |         </li>
36 |         <li class="list-item">
37 |             <div class="div-block-10 list-item-div">
38 |             <div class="latest-list-item-time">
39 |                 <icon name="clock"></icon>
40 |                 02/04/2018
41 |             </div>
42 |             <a href="#" class="list-item-link">
43 |                 <h5 class="heading-4">Tech Drags Stocks Lower; Oil Falls as Dollar Gains: Markets Wrap</h5>
44 |             </a>
45 |             </div>
46 |         </li>
47 |     </ul>
48 | </template>
49 | 
50 | <script>
51 |     // Font Awesome Icon
52 |     import 'vue-awesome/icons/clock'
53 |     import Icon from 'vue-awesome/components/Icon'
54 | 
55 |     export default {
56 |         components: {
57 |             icon: Icon,
58 |         }
59 |     }
60 | </script>
61 | 
62 | <style scoped>
63 | 
64 |     /* Clock Icon */
65 |     svg.fa-icon {
66 |         width: 15px;
67 |         height: 9px;
68 |         margin: 5px 0 0 0;
69 |     }
70 | 
71 |     /* List Items */
72 |     .list-item-link {
73 |         color: black;
74 |         text-decoration: none;
75 |         cursor: pointer;
76 |     }
77 |     .list-item-link:hover {
78 |         color: #fb8b1e;
79 |     }
80 | 
81 | </style>
82 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/Overview/Content/AsiaContent/GraphFilter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="div-block-12">
 3 |         <div class="div-block-7 time-frame-box">
 4 |             <div class="time-box-one b-r w-clearfix">
 5 |                 <div class="text-block-6 selected">1D</div>
 6 |             </div>
 7 |             <div class="time-box-one b-r w-clearfix">
 8 |                 <div class="text-block-6">1M</div>
 9 |             </div>
10 |             <div class="time-box-one b-r w-clearfix">
11 |                 <div class="text-block-6">1Y</div>
12 |             </div>
13 |             <div class="time-box-one b-r w-clearfix">
14 |                 <div class="text-block-6">5Y</div>
15 |             </div>
16 |             <div class="time-box-one time-label-box w-clearfix">
17 |                 <div class="text-block-6 text-label">Time Frame</div>
18 |             </div>
19 |         </div>
20 |         <div class="div-block-7 time-frame-box time-frame-box-two input-box w-clearfix">
21 |             <div class="text-block-7">
22 |                 <input placeholder="Add Comparison" />
23 |             </div>
24 |             <div class="div-block-13">
25 |                 <span class="plus"><icon class="plus-icn" name="plus"></icon></span>
26 |             </div>
27 |         </div>
28 |         <div class="div-block-7 time-frame-box time-frame-box-two time-frame-box-three w-clearfix">
29 |             <div class="text-block-7 text-drop-down">
30 |                 Indicators
31 |                 <span><icon class="caret-down" name="caret-down"></icon></span>
32 |             </div>
33 |         </div>
34 |     </div>
35 | </template>
36 | 
37 | <script>
38 |     // Font Awesome Icon
39 |     import 'vue-awesome/icons/plus'
40 |     import 'vue-awesome/icons/caret-down'
41 |     import Icon from 'vue-awesome/components/Icon'
42 | 
43 |     export default {
44 |         components: {
45 |             icon: Icon
46 |         }
47 |     }
48 | </script>
49 | 
50 | <style scoped>
51 | 
52 |     .br {
53 |         border-right: 0.5px solid lightgray;
54 |     }
55 |     .text-block-6 {
56 |         cursor: pointer;
57 |     }
58 |     .selected {
59 |         color: #fb8b1e;
60 |         cursor: default;
61 |     }
62 |     .text-label {
63 |         cursor: default;
64 |     }
65 |     input {
66 |         border: none;
67 |         outline: none;
68 |         width: 8.5em;
69 |     }
70 |     .div-block-13 {
71 |         cursor: pointer;
72 |     }
73 |     .text-drop-down {
74 |         cursor: pointer;
75 |     }
76 | 
77 |     /* Icons */
78 |     .plus-icn {
79 |         color: white;
80 |         margin: 0.5em 0.7em;
81 |     }
82 |     .caret-down {
83 |         color: #fb8b1e;
84 |     }
85 | 
86 | </style>
87 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/Overview/Content/EuropeContent/GraphFilter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="div-block-12">
 3 |         <div class="div-block-7 time-frame-box">
 4 |             <div class="time-box-one b-r w-clearfix">
 5 |                 <div class="text-block-6 selected">1D</div>
 6 |             </div>
 7 |             <div class="time-box-one b-r w-clearfix">
 8 |                 <div class="text-block-6">1M</div>
 9 |             </div>
10 |             <div class="time-box-one b-r w-clearfix">
11 |                 <div class="text-block-6">1Y</div>
12 |             </div>
13 |             <div class="time-box-one b-r w-clearfix">
14 |                 <div class="text-block-6">5Y</div>
15 |             </div>
16 |             <div class="time-box-one time-label-box w-clearfix">
17 |                 <div class="text-block-6 text-label">Time Frame</div>
18 |             </div>
19 |         </div>
20 |         <div class="div-block-7 time-frame-box time-frame-box-two input-box w-clearfix">
21 |             <div class="text-block-7">
22 |                 <input placeholder="Add Comparison" />
23 |             </div>
24 |             <div class="div-block-13">
25 |                 <span class="plus"><icon class="plus-icn" name="plus"></icon></span>
26 |             </div>
27 |         </div>
28 |         <div class="div-block-7 time-frame-box time-frame-box-two time-frame-box-three w-clearfix">
29 |             <div class="text-block-7 text-drop-down">
30 |                 Indicators
31 |                 <span><icon class="caret-down" name="caret-down"></icon></span>
32 |             </div>
33 |         </div>
34 |     </div>
35 | </template>
36 | 
37 | <script>
38 |     // Font Awesome Icon
39 |     import 'vue-awesome/icons/plus'
40 |     import 'vue-awesome/icons/caret-down'
41 |     import Icon from 'vue-awesome/components/Icon'
42 | 
43 |     export default {
44 |         components: {
45 |             icon: Icon
46 |         }
47 |     }
48 | </script>
49 | 
50 | <style scoped>
51 | 
52 |     .br {
53 |         border-right: 0.5px solid lightgray;
54 |     }
55 |     .text-block-6 {
56 |         cursor: pointer;
57 |     }
58 |     .selected {
59 |         color: #fb8b1e;
60 |         cursor: default;
61 |     }
62 |     .text-label {
63 |         cursor: default;
64 |     }
65 |     input {
66 |         border: none;
67 |         outline: none;
68 |         width: 8.5em;
69 |     }
70 |     .div-block-13 {
71 |         cursor: pointer;
72 |     }
73 |     .text-drop-down {
74 |         cursor: pointer;
75 |     }
76 | 
77 |     /* Icons */
78 |     .plus-icn {
79 |         color: white;
80 |         margin: 0.5em 0.7em;
81 |     }
82 |     .caret-down {
83 |         color: #fb8b1e;
84 |     }
85 | 
86 | </style>
87 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/APAC/Content/India.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <h3 class="heading-3 selected-tab">India</h3>
  4 |         <hr>
  5 |         <table id="argentina">
  6 |             <tr class="header">
  7 |                 <th>Name</th>
  8 |                 <th>Value</th>
  9 |                 <th>Net Change</th>
 10 |                 <th>% Change</th>
 11 |                 <th>1 Month</th>
 12 |                 <th>1 Year</th>
 13 |                 <th>Time (Edit)</th>
 14 |                 <th class="data-graph">2 Day</th>
 15 |             </tr>
 16 |             <tr class="data">
 17 |                 <td>INDU:IND 
 18 |                 <br>
 19 |                     <strong>JONES INDUS. AVG</strong>
 20 |                 </td>
 21 |                 <td>24,024.13</td>
 22 |                 <td class="red">-424.56</td>
 23 |                 <td class="red">-1.74%</td>
 24 |                 <td class="green">+2.09%</td>
 25 |                 <td class="green">+14.42%</td>
 26 |                 <td>4/24/2018</td>
 27 |             </tr>
 28 |             <tr class="data">
 29 |                 <td>SPX:IND 
 30 |                 <br>
 31 |                     <strong>S&P 500 INDEX</strong>
 32 |                 </td>
 33 |                 <td>2,631.78</td>
 34 |                 <td class="red">-2.78</td>
 35 |                 <td class="red">-0.11%</td>
 36 |                 <td class="green">+1.68%</td>
 37 |                 <td class="green">+10.18%</td>
 38 |                 <td>9:34 AM</td>
 39 |             </tr>
 40 |             <tr class="data">
 41 |                 <td>CCMP:IND 
 42 |                 <br>
 43 |                     <strong>NASDAQ COMPOSITE INDEX</strong>
 44 |                 </td>
 45 |                 <td>7,003.78</td>
 46 |                 <td class="red">-3.61</td>
 47 |                 <td class="red">-0.05%</td>
 48 |                 <td class="green">+3.00%</td>
 49 |                 <td class="green">+16.24%</td>
 50 |                 <td>10:14 AM</td>
 51 |             </tr>
 52 |         </table>
 53 |     </div>
 54 | </template>
 55 | 
 56 | <script>
 57 |     export default {
 58 |         
 59 |     }
 60 | </script>
 61 | 
 62 | 
 63 | <style scoped>
 64 | 
 65 | #argentina {
 66 |     border-collapse: collapse;
 67 |     width: 100%;
 68 | }
 69 | 
 70 | hr {
 71 |     border-top: 1px solid grey;
 72 | }
 73 | 
 74 | #argentina td, #argentina th {
 75 |     border-bottom: 1px dotted grey;
 76 |     padding: 8px;
 77 | }
 78 | 
 79 | 
 80 | #argentina tr {
 81 |     text-transform: uppercase;
 82 |     font-family: BWHaasText-55Roman,"Helvetica Neue",Helvetica,Arial,sans-serif;
 83 |     color: #555;
 84 |     font-size: 0.85em;
 85 |     font-weight: 300;
 86 | }
 87 | 
 88 | #argentina strong {
 89 |     color: black;
 90 |     font-size: 1.15em;
 91 | }
 92 | 
 93 | .red {
 94 |     color: #ff433d;
 95 | }
 96 | 
 97 | .green {
 98 |     color: #1dcc92;
 99 | }
100 | 
101 | #argentina th {
102 |     padding-top: 12px;
103 |     padding-bottom: 12px;
104 |     text-align: left;
105 |     background-color: transparent;
106 |     color: #555;
107 |     font-size: 1em;
108 |     font-weight: 500;
109 | }
110 | 
111 | </style>
112 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/Americas/Content/Peru.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <h3 class="heading-3 selected-tab">Peru</h3>
  4 |         <hr>
  5 |         <table id="argentina">
  6 |             <tr class="header">
  7 |                 <th>Name</th>
  8 |                 <th>Value</th>
  9 |                 <th>Net Change</th>
 10 |                 <th>% Change</th>
 11 |                 <th>1 Month</th>
 12 |                 <th>1 Year</th>
 13 |                 <th>Time (Edit)</th>
 14 |                 <th class="data-graph">2 Day</th>
 15 |             </tr>
 16 |             <tr class="data">
 17 |                 <td>INDU:IND 
 18 |                 <br>
 19 |                     <strong>JONES INDUS. AVG</strong>
 20 |                 </td>
 21 |                 <td>24,024.13</td>
 22 |                 <td class="red">-424.56</td>
 23 |                 <td class="red">-1.74%</td>
 24 |                 <td class="green">+2.09%</td>
 25 |                 <td class="green">+14.42%</td>
 26 |                 <td>4/24/2018</td>
 27 |             </tr>
 28 |             <tr class="data">
 29 |                 <td>SPX:IND 
 30 |                 <br>
 31 |                     <strong>S&P 500 INDEX</strong>
 32 |                 </td>
 33 |                 <td>2,631.78</td>
 34 |                 <td class="red">-2.78</td>
 35 |                 <td class="red">-0.11%</td>
 36 |                 <td class="green">+1.68%</td>
 37 |                 <td class="green">+10.18%</td>
 38 |                 <td>9:34 AM</td>
 39 |             </tr>
 40 |             <tr class="data">
 41 |                 <td>CCMP:IND 
 42 |                 <br>
 43 |                     <strong>NASDAQ COMPOSITE INDEX</strong>
 44 |                 </td>
 45 |                 <td>7,003.78</td>
 46 |                 <td class="red">-3.61</td>
 47 |                 <td class="red">-0.05%</td>
 48 |                 <td class="green">+3.00%</td>
 49 |                 <td class="green">+16.24%</td>
 50 |                 <td>10:14 AM</td>
 51 |             </tr>
 52 |         </table>
 53 |     </div>
 54 | </template>
 55 | 
 56 | <script>
 57 |     export default {
 58 |         
 59 |     }
 60 | </script>
 61 | 
 62 | 
 63 | <style scoped>
 64 | 
 65 | #argentina {
 66 |     border-collapse: collapse;
 67 |     width: 100%;
 68 | }
 69 | 
 70 | hr {
 71 |     border-top: 1px solid grey;
 72 | }
 73 | 
 74 | #argentina td, #argentina th {
 75 |     border-bottom: 1px dotted grey;
 76 |     padding: 8px;
 77 | }
 78 | 
 79 | 
 80 | #argentina tr {
 81 |     text-transform: uppercase;
 82 |     font-family: BWHaasText-55Roman,"Helvetica Neue",Helvetica,Arial,sans-serif;
 83 |     color: #555;
 84 |     font-size: 0.85em;
 85 |     font-weight: 300;
 86 | }
 87 | 
 88 | #argentina strong {
 89 |     color: black;
 90 |     font-size: 1.15em;
 91 | }
 92 | 
 93 | .red {
 94 |     color: #ff433d;
 95 | }
 96 | 
 97 | .green {
 98 |     color: #1dcc92;
 99 | }
100 | 
101 | #argentina th {
102 |     padding-top: 12px;
103 |     padding-bottom: 12px;
104 |     text-align: left;
105 |     background-color: transparent;
106 |     color: #555;
107 |     font-size: 1em;
108 |     font-weight: 500;
109 | }
110 | 
111 | </style>
112 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/EMEA/Content/France.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <h3 class="heading-3 selected-tab">France</h3>
  4 |         <hr>
  5 |         <table id="argentina">
  6 |             <tr class="header">
  7 |                 <th>Name</th>
  8 |                 <th>Value</th>
  9 |                 <th>Net Change</th>
 10 |                 <th>% Change</th>
 11 |                 <th>1 Month</th>
 12 |                 <th>1 Year</th>
 13 |                 <th>Time (Edit)</th>
 14 |                 <th class="data-graph">2 Day</th>
 15 |             </tr>
 16 |             <tr class="data">
 17 |                 <td>INDU:IND 
 18 |                 <br>
 19 |                     <strong>JONES INDUS. AVG</strong>
 20 |                 </td>
 21 |                 <td>24,024.13</td>
 22 |                 <td class="red">-424.56</td>
 23 |                 <td class="red">-1.74%</td>
 24 |                 <td class="green">+2.09%</td>
 25 |                 <td class="green">+14.42%</td>
 26 |                 <td>4/24/2018</td>
 27 |             </tr>
 28 |             <tr class="data">
 29 |                 <td>SPX:IND 
 30 |                 <br>
 31 |                     <strong>S&P 500 INDEX</strong>
 32 |                 </td>
 33 |                 <td>2,631.78</td>
 34 |                 <td class="red">-2.78</td>
 35 |                 <td class="red">-0.11%</td>
 36 |                 <td class="green">+1.68%</td>
 37 |                 <td class="green">+10.18%</td>
 38 |                 <td>9:34 AM</td>
 39 |             </tr>
 40 |             <tr class="data">
 41 |                 <td>CCMP:IND 
 42 |                 <br>
 43 |                     <strong>NASDAQ COMPOSITE INDEX</strong>
 44 |                 </td>
 45 |                 <td>7,003.78</td>
 46 |                 <td class="red">-3.61</td>
 47 |                 <td class="red">-0.05%</td>
 48 |                 <td class="green">+3.00%</td>
 49 |                 <td class="green">+16.24%</td>
 50 |                 <td>10:14 AM</td>
 51 |             </tr>
 52 |         </table>
 53 |     </div>
 54 | </template>
 55 | 
 56 | <script>
 57 |     export default {
 58 |         
 59 |     }
 60 | </script>
 61 | 
 62 | 
 63 | <style scoped>
 64 | 
 65 | #argentina {
 66 |     border-collapse: collapse;
 67 |     width: 100%;
 68 | }
 69 | 
 70 | hr {
 71 |     border-top: 1px solid grey;
 72 | }
 73 | 
 74 | #argentina td, #argentina th {
 75 |     border-bottom: 1px dotted grey;
 76 |     padding: 8px;
 77 | }
 78 | 
 79 | 
 80 | #argentina tr {
 81 |     text-transform: uppercase;
 82 |     font-family: BWHaasText-55Roman,"Helvetica Neue",Helvetica,Arial,sans-serif;
 83 |     color: #555;
 84 |     font-size: 0.85em;
 85 |     font-weight: 300;
 86 | }
 87 | 
 88 | #argentina strong {
 89 |     color: black;
 90 |     font-size: 1.15em;
 91 | }
 92 | 
 93 | .red {
 94 |     color: #ff433d;
 95 | }
 96 | 
 97 | .green {
 98 |     color: #1dcc92;
 99 | }
100 | 
101 | #argentina th {
102 |     padding-top: 12px;
103 |     padding-bottom: 12px;
104 |     text-align: left;
105 |     background-color: transparent;
106 |     color: #555;
107 |     font-size: 1em;
108 |     font-weight: 500;
109 | }
110 | 
111 | </style>
112 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/EMEA/Content/Germany.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <h3 class="heading-3 selected-tab">Germany</h3>
  4 |         <hr>
  5 |         <table id="argentina">
  6 |             <tr class="header">
  7 |                 <th>Name</th>
  8 |                 <th>Value</th>
  9 |                 <th>Net Change</th>
 10 |                 <th>% Change</th>
 11 |                 <th>1 Month</th>
 12 |                 <th>1 Year</th>
 13 |                 <th>Time (Edit)</th>
 14 |                 <th class="data-graph">2 Day</th>
 15 |             </tr>
 16 |             <tr class="data">
 17 |                 <td>INDU:IND 
 18 |                 <br>
 19 |                     <strong>JONES INDUS. AVG</strong>
 20 |                 </td>
 21 |                 <td>24,024.13</td>
 22 |                 <td class="red">-424.56</td>
 23 |                 <td class="red">-1.74%</td>
 24 |                 <td class="green">+2.09%</td>
 25 |                 <td class="green">+14.42%</td>
 26 |                 <td>4/24/2018</td>
 27 |             </tr>
 28 |             <tr class="data">
 29 |                 <td>SPX:IND 
 30 |                 <br>
 31 |                     <strong>S&P 500 INDEX</strong>
 32 |                 </td>
 33 |                 <td>2,631.78</td>
 34 |                 <td class="red">-2.78</td>
 35 |                 <td class="red">-0.11%</td>
 36 |                 <td class="green">+1.68%</td>
 37 |                 <td class="green">+10.18%</td>
 38 |                 <td>9:34 AM</td>
 39 |             </tr>
 40 |             <tr class="data">
 41 |                 <td>CCMP:IND 
 42 |                 <br>
 43 |                     <strong>NASDAQ COMPOSITE INDEX</strong>
 44 |                 </td>
 45 |                 <td>7,003.78</td>
 46 |                 <td class="red">-3.61</td>
 47 |                 <td class="red">-0.05%</td>
 48 |                 <td class="green">+3.00%</td>
 49 |                 <td class="green">+16.24%</td>
 50 |                 <td>10:14 AM</td>
 51 |             </tr>
 52 |         </table>
 53 |     </div>
 54 | </template>
 55 | 
 56 | <script>
 57 |     export default {
 58 |         
 59 |     }
 60 | </script>
 61 | 
 62 | 
 63 | <style scoped>
 64 | 
 65 | #argentina {
 66 |     border-collapse: collapse;
 67 |     width: 100%;
 68 | }
 69 | 
 70 | hr {
 71 |     border-top: 1px solid grey;
 72 | }
 73 | 
 74 | #argentina td, #argentina th {
 75 |     border-bottom: 1px dotted grey;
 76 |     padding: 8px;
 77 | }
 78 | 
 79 | 
 80 | #argentina tr {
 81 |     text-transform: uppercase;
 82 |     font-family: BWHaasText-55Roman,"Helvetica Neue",Helvetica,Arial,sans-serif;
 83 |     color: #555;
 84 |     font-size: 0.85em;
 85 |     font-weight: 300;
 86 | }
 87 | 
 88 | #argentina strong {
 89 |     color: black;
 90 |     font-size: 1.15em;
 91 | }
 92 | 
 93 | .red {
 94 |     color: #ff433d;
 95 | }
 96 | 
 97 | .green {
 98 |     color: #1dcc92;
 99 | }
100 | 
101 | #argentina th {
102 |     padding-top: 12px;
103 |     padding-bottom: 12px;
104 |     text-align: left;
105 |     background-color: transparent;
106 |     color: #555;
107 |     font-size: 1em;
108 |     font-weight: 500;
109 | }
110 | 
111 | </style>
112 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/EMEA/Content/Poland.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <h3 class="heading-3 selected-tab">Poland</h3>
  4 |         <hr>
  5 |         <table id="argentina">
  6 |             <tr class="header">
  7 |                 <th>Name</th>
  8 |                 <th>Value</th>
  9 |                 <th>Net Change</th>
 10 |                 <th>% Change</th>
 11 |                 <th>1 Month</th>
 12 |                 <th>1 Year</th>
 13 |                 <th>Time (Edit)</th>
 14 |                 <th class="data-graph">2 Day</th>
 15 |             </tr>
 16 |             <tr class="data">
 17 |                 <td>INDU:IND 
 18 |                 <br>
 19 |                     <strong>JONES INDUS. AVG</strong>
 20 |                 </td>
 21 |                 <td>24,024.13</td>
 22 |                 <td class="red">-424.56</td>
 23 |                 <td class="red">-1.74%</td>
 24 |                 <td class="green">+2.09%</td>
 25 |                 <td class="green">+14.42%</td>
 26 |                 <td>4/24/2018</td>
 27 |             </tr>
 28 |             <tr class="data">
 29 |                 <td>SPX:IND 
 30 |                 <br>
 31 |                     <strong>S&P 500 INDEX</strong>
 32 |                 </td>
 33 |                 <td>2,631.78</td>
 34 |                 <td class="red">-2.78</td>
 35 |                 <td class="red">-0.11%</td>
 36 |                 <td class="green">+1.68%</td>
 37 |                 <td class="green">+10.18%</td>
 38 |                 <td>9:34 AM</td>
 39 |             </tr>
 40 |             <tr class="data">
 41 |                 <td>CCMP:IND 
 42 |                 <br>
 43 |                     <strong>NASDAQ COMPOSITE INDEX</strong>
 44 |                 </td>
 45 |                 <td>7,003.78</td>
 46 |                 <td class="red">-3.61</td>
 47 |                 <td class="red">-0.05%</td>
 48 |                 <td class="green">+3.00%</td>
 49 |                 <td class="green">+16.24%</td>
 50 |                 <td>10:14 AM</td>
 51 |             </tr>
 52 |         </table>
 53 |     </div>
 54 | </template>
 55 | 
 56 | <script>
 57 |     export default {
 58 |         
 59 |     }
 60 | </script>
 61 | 
 62 | 
 63 | <style scoped>
 64 | 
 65 | #argentina {
 66 |     border-collapse: collapse;
 67 |     width: 100%;
 68 | }
 69 | 
 70 | hr {
 71 |     border-top: 1px solid grey;
 72 | }
 73 | 
 74 | #argentina td, #argentina th {
 75 |     border-bottom: 1px dotted grey;
 76 |     padding: 8px;
 77 | }
 78 | 
 79 | 
 80 | #argentina tr {
 81 |     text-transform: uppercase;
 82 |     font-family: BWHaasText-55Roman,"Helvetica Neue",Helvetica,Arial,sans-serif;
 83 |     color: #555;
 84 |     font-size: 0.85em;
 85 |     font-weight: 300;
 86 | }
 87 | 
 88 | #argentina strong {
 89 |     color: black;
 90 |     font-size: 1.15em;
 91 | }
 92 | 
 93 | .red {
 94 |     color: #ff433d;
 95 | }
 96 | 
 97 | .green {
 98 |     color: #1dcc92;
 99 | }
100 | 
101 | #argentina th {
102 |     padding-top: 12px;
103 |     padding-bottom: 12px;
104 |     text-align: left;
105 |     background-color: transparent;
106 |     color: #555;
107 |     font-size: 1em;
108 |     font-weight: 500;
109 | }
110 | 
111 | </style>
112 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/APAC/Content/SriLanka.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <h3 class="heading-3 selected-tab">Sri Lanka</h3>
  4 |         <hr>
  5 |         <table id="argentina">
  6 |             <tr class="header">
  7 |                 <th>Name</th>
  8 |                 <th>Value</th>
  9 |                 <th>Net Change</th>
 10 |                 <th>% Change</th>
 11 |                 <th>1 Month</th>
 12 |                 <th>1 Year</th>
 13 |                 <th>Time (Edit)</th>
 14 |                 <th class="data-graph">2 Day</th>
 15 |             </tr>
 16 |             <tr class="data">
 17 |                 <td>INDU:IND 
 18 |                 <br>
 19 |                     <strong>JONES INDUS. AVG</strong>
 20 |                 </td>
 21 |                 <td>24,024.13</td>
 22 |                 <td class="red">-424.56</td>
 23 |                 <td class="red">-1.74%</td>
 24 |                 <td class="green">+2.09%</td>
 25 |                 <td class="green">+14.42%</td>
 26 |                 <td>4/24/2018</td>
 27 |             </tr>
 28 |             <tr class="data">
 29 |                 <td>SPX:IND 
 30 |                 <br>
 31 |                     <strong>S&P 500 INDEX</strong>
 32 |                 </td>
 33 |                 <td>2,631.78</td>
 34 |                 <td class="red">-2.78</td>
 35 |                 <td class="red">-0.11%</td>
 36 |                 <td class="green">+1.68%</td>
 37 |                 <td class="green">+10.18%</td>
 38 |                 <td>9:34 AM</td>
 39 |             </tr>
 40 |             <tr class="data">
 41 |                 <td>CCMP:IND 
 42 |                 <br>
 43 |                     <strong>NASDAQ COMPOSITE INDEX</strong>
 44 |                 </td>
 45 |                 <td>7,003.78</td>
 46 |                 <td class="red">-3.61</td>
 47 |                 <td class="red">-0.05%</td>
 48 |                 <td class="green">+3.00%</td>
 49 |                 <td class="green">+16.24%</td>
 50 |                 <td>10:14 AM</td>
 51 |             </tr>
 52 |         </table>
 53 |     </div>
 54 | </template>
 55 | 
 56 | <script>
 57 |     export default {
 58 |         
 59 |     }
 60 | </script>
 61 | 
 62 | 
 63 | <style scoped>
 64 | 
 65 | #argentina {
 66 |     border-collapse: collapse;
 67 |     width: 100%;
 68 | }
 69 | 
 70 | hr {
 71 |     border-top: 1px solid grey;
 72 | }
 73 | 
 74 | #argentina td, #argentina th {
 75 |     border-bottom: 1px dotted grey;
 76 |     padding: 8px;
 77 | }
 78 | 
 79 | 
 80 | #argentina tr {
 81 |     text-transform: uppercase;
 82 |     font-family: BWHaasText-55Roman,"Helvetica Neue",Helvetica,Arial,sans-serif;
 83 |     color: #555;
 84 |     font-size: 0.85em;
 85 |     font-weight: 300;
 86 | }
 87 | 
 88 | #argentina strong {
 89 |     color: black;
 90 |     font-size: 1.15em;
 91 | }
 92 | 
 93 | .red {
 94 |     color: #ff433d;
 95 | }
 96 | 
 97 | .green {
 98 |     color: #1dcc92;
 99 | }
100 | 
101 | #argentina th {
102 |     padding-top: 12px;
103 |     padding-bottom: 12px;
104 |     text-align: left;
105 |     background-color: transparent;
106 |     color: #555;
107 |     font-size: 1em;
108 |     font-weight: 500;
109 | }
110 | 
111 | </style>
112 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/Americas/Content/Canada.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <h3 class="heading-3 selected-tab">Canada</h3>
  4 |         <hr>
  5 |         <table id="argentina">
  6 |             <tr class="header">
  7 |                 <th>Name</th>
  8 |                 <th>Value</th>
  9 |                 <th>Net Change</th>
 10 |                 <th>% Change</th>
 11 |                 <th>1 Month</th>
 12 |                 <th>1 Year</th>
 13 |                 <th>Time (Edit)</th>
 14 |                 <th class="data-graph">2 Day</th>
 15 |             </tr>
 16 |             <tr class="data">
 17 |                 <td>INDU:IND 
 18 |                 <br>
 19 |                     <strong>JONES INDUS. AVG</strong>
 20 |                 </td>
 21 |                 <td>24,024.13</td>
 22 |                 <td class="red">-424.56</td>
 23 |                 <td class="red">-1.74%</td>
 24 |                 <td class="green">+2.09%</td>
 25 |                 <td class="green">+14.42%</td>
 26 |                 <td>4/24/2018</td>
 27 |             </tr>
 28 |             <tr class="data">
 29 |                 <td>SPX:IND 
 30 |                 <br>
 31 |                     <strong>S&P 500 INDEX</strong>
 32 |                 </td>
 33 |                 <td>2,631.78</td>
 34 |                 <td class="red">-2.78</td>
 35 |                 <td class="red">-0.11%</td>
 36 |                 <td class="green">+1.68%</td>
 37 |                 <td class="green">+10.18%</td>
 38 |                 <td>9:34 AM</td>
 39 |             </tr>
 40 |             <tr class="data">
 41 |                 <td>CCMP:IND 
 42 |                 <br>
 43 |                     <strong>NASDAQ COMPOSITE INDEX</strong>
 44 |                 </td>
 45 |                 <td>7,003.78</td>
 46 |                 <td class="red">-3.61</td>
 47 |                 <td class="red">-0.05%</td>
 48 |                 <td class="green">+3.00%</td>
 49 |                 <td class="green">+16.24%</td>
 50 |                 <td>10:14 AM</td>
 51 |             </tr>
 52 |         </table>
 53 |     </div>
 54 | </template>
 55 | 
 56 | <script>
 57 |     export default {
 58 |         
 59 |     }
 60 | </script>
 61 | 
 62 | 
 63 | <style scoped>
 64 | 
 65 | #argentina {
 66 |     border-collapse: collapse;
 67 |     width: 100%;
 68 | }
 69 | 
 70 | hr {
 71 |     border-top: 1px solid grey;
 72 | }
 73 | 
 74 | #argentina td, #argentina th {
 75 |     border-bottom: 1px dotted grey;
 76 |     padding: 8px;
 77 | }
 78 | 
 79 | 
 80 | #argentina tr {
 81 |     text-transform: uppercase;
 82 |     font-family: BWHaasText-55Roman,"Helvetica Neue",Helvetica,Arial,sans-serif;
 83 |     color: #555;
 84 |     font-size: 0.85em;
 85 |     font-weight: 300;
 86 | }
 87 | 
 88 | #argentina strong {
 89 |     color: black;
 90 |     font-size: 1.15em;
 91 | }
 92 | 
 93 | .red {
 94 |     color: #ff433d;
 95 | }
 96 | 
 97 | .green {
 98 |     color: #1dcc92;
 99 | }
100 | 
101 | #argentina th {
102 |     padding-top: 12px;
103 |     padding-bottom: 12px;
104 |     text-align: left;
105 |     background-color: transparent;
106 |     color: #555;
107 |     font-size: 1em;
108 |     font-weight: 500;
109 | }
110 | 
111 | </style>
112 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/Americas/Content/Mexico.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <h3 class="heading-3 selected-tab">Mexico</h3>
  4 |         <hr>
  5 |         <table id="argentina">
  6 |             <tr class="header">
  7 |                 <th>Name</th>
  8 |                 <th>Value</th>
  9 |                 <th>Net Change</th>
 10 |                 <th>% Change</th>
 11 |                 <th>1 Month</th>
 12 |                 <th>1 Year</th>
 13 |                 <th>Time (Edit)</th>
 14 |                 <th class="data-graph">2 Day</th>
 15 |             </tr>
 16 |             <tr class="data">
 17 |                 <td>INDU:IND 
 18 |                 <br>
 19 |                     <strong>JONES INDUS. AVG</strong>
 20 |                 </td>
 21 |                 <td>24,024.13</td>
 22 |                 <td class="red">-424.56</td>
 23 |                 <td class="red">-1.74%</td>
 24 |                 <td class="green">+2.09%</td>
 25 |                 <td class="green">+14.42%</td>
 26 |                 <td>4/24/2018</td>
 27 |             </tr>
 28 |             <tr class="data">
 29 |                 <td>SPX:IND 
 30 |                 <br>
 31 |                     <strong>S&P 500 INDEX</strong>
 32 |                 </td>
 33 |                 <td>2,631.78</td>
 34 |                 <td class="red">-2.78</td>
 35 |                 <td class="red">-0.11%</td>
 36 |                 <td class="green">+1.68%</td>
 37 |                 <td class="green">+10.18%</td>
 38 |                 <td>9:34 AM</td>
 39 |             </tr>
 40 |             <tr class="data">
 41 |                 <td>CCMP:IND 
 42 |                 <br>
 43 |                     <strong>NASDAQ COMPOSITE INDEX</strong>
 44 |                 </td>
 45 |                 <td>7,003.78</td>
 46 |                 <td class="red">-3.61</td>
 47 |                 <td class="red">-0.05%</td>
 48 |                 <td class="green">+3.00%</td>
 49 |                 <td class="green">+16.24%</td>
 50 |                 <td>10:14 AM</td>
 51 |             </tr>
 52 |         </table>
 53 |     </div>
 54 | </template>
 55 | 
 56 | <script>
 57 |     export default {
 58 |         
 59 |     }
 60 | </script>
 61 | 
 62 | 
 63 | <style scoped>
 64 | 
 65 | #argentina {
 66 |     border-collapse: collapse;
 67 |     width: 100%;
 68 | }
 69 | 
 70 | hr {
 71 |     border-top: 1px solid grey;
 72 | }
 73 | 
 74 | #argentina td, #argentina th {
 75 |     border-bottom: 1px dotted grey;
 76 |     padding: 8px;
 77 | }
 78 | 
 79 | 
 80 | #argentina tr {
 81 |     text-transform: uppercase;
 82 |     font-family: BWHaasText-55Roman,"Helvetica Neue",Helvetica,Arial,sans-serif;
 83 |     color: #555;
 84 |     font-size: 0.85em;
 85 |     font-weight: 300;
 86 | }
 87 | 
 88 | #argentina strong {
 89 |     color: black;
 90 |     font-size: 1.15em;
 91 | }
 92 | 
 93 | .red {
 94 |     color: #ff433d;
 95 | }
 96 | 
 97 | .green {
 98 |     color: #1dcc92;
 99 | }
100 | 
101 | #argentina th {
102 |     padding-top: 12px;
103 |     padding-bottom: 12px;
104 |     text-align: left;
105 |     background-color: transparent;
106 |     color: #555;
107 |     font-size: 1em;
108 |     font-weight: 500;
109 | }
110 | 
111 | </style>
112 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/APAC/Content/SouthKorea.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <h3 class="heading-3 selected-tab">South Korea</h3>
  4 |         <hr>
  5 |         <table id="argentina">
  6 |             <tr class="header">
  7 |                 <th>Name</th>
  8 |                 <th>Value</th>
  9 |                 <th>Net Change</th>
 10 |                 <th>% Change</th>
 11 |                 <th>1 Month</th>
 12 |                 <th>1 Year</th>
 13 |                 <th>Time (Edit)</th>
 14 |                 <th class="data-graph">2 Day</th>
 15 |             </tr>
 16 |             <tr class="data">
 17 |                 <td>INDU:IND 
 18 |                 <br>
 19 |                     <strong>JONES INDUS. AVG</strong>
 20 |                 </td>
 21 |                 <td>24,024.13</td>
 22 |                 <td class="red">-424.56</td>
 23 |                 <td class="red">-1.74%</td>
 24 |                 <td class="green">+2.09%</td>
 25 |                 <td class="green">+14.42%</td>
 26 |                 <td>4/24/2018</td>
 27 |             </tr>
 28 |             <tr class="data">
 29 |                 <td>SPX:IND 
 30 |                 <br>
 31 |                     <strong>S&P 500 INDEX</strong>
 32 |                 </td>
 33 |                 <td>2,631.78</td>
 34 |                 <td class="red">-2.78</td>
 35 |                 <td class="red">-0.11%</td>
 36 |                 <td class="green">+1.68%</td>
 37 |                 <td class="green">+10.18%</td>
 38 |                 <td>9:34 AM</td>
 39 |             </tr>
 40 |             <tr class="data">
 41 |                 <td>CCMP:IND 
 42 |                 <br>
 43 |                     <strong>NASDAQ COMPOSITE INDEX</strong>
 44 |                 </td>
 45 |                 <td>7,003.78</td>
 46 |                 <td class="red">-3.61</td>
 47 |                 <td class="red">-0.05%</td>
 48 |                 <td class="green">+3.00%</td>
 49 |                 <td class="green">+16.24%</td>
 50 |                 <td>10:14 AM</td>
 51 |             </tr>
 52 |         </table>
 53 |     </div>
 54 | </template>
 55 | 
 56 | <script>
 57 |     export default {
 58 |         
 59 |     }
 60 | </script>
 61 | 
 62 | 
 63 | <style scoped>
 64 | 
 65 | #argentina {
 66 |     border-collapse: collapse;
 67 |     width: 100%;
 68 | }
 69 | 
 70 | hr {
 71 |     border-top: 1px solid grey;
 72 | }
 73 | 
 74 | #argentina td, #argentina th {
 75 |     border-bottom: 1px dotted grey;
 76 |     padding: 8px;
 77 | }
 78 | 
 79 | 
 80 | #argentina tr {
 81 |     text-transform: uppercase;
 82 |     font-family: BWHaasText-55Roman,"Helvetica Neue",Helvetica,Arial,sans-serif;
 83 |     color: #555;
 84 |     font-size: 0.85em;
 85 |     font-weight: 300;
 86 | }
 87 | 
 88 | #argentina strong {
 89 |     color: black;
 90 |     font-size: 1.15em;
 91 | }
 92 | 
 93 | .red {
 94 |     color: #ff433d;
 95 | }
 96 | 
 97 | .green {
 98 |     color: #1dcc92;
 99 | }
100 | 
101 | #argentina th {
102 |     padding-top: 12px;
103 |     padding-bottom: 12px;
104 |     text-align: left;
105 |     background-color: transparent;
106 |     color: #555;
107 |     font-size: 1em;
108 |     font-weight: 500;
109 | }
110 | 
111 | </style>
112 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/EMEA/Content/Europe.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <h3 class="heading-3 selected-tab">Europe</h3>
  4 |         <hr>
  5 |         <table id="argentina">
  6 |             <tr class="header">
  7 |                 <th>Name</th>
  8 |                 <th>Value</th>
  9 |                 <th>Net Change</th>
 10 |                 <th>% Change</th>
 11 |                 <th>1 Month</th>
 12 |                 <th>1 Year</th>
 13 |                 <th>Time (Edit)</th>
 14 |                 <th class="data-graph">2 Day</th>
 15 |             </tr>
 16 |             <tr class="data">
 17 |                 <td>NYA:IND 
 18 |                 <br>
 19 |                     <strong>NYSE COMPOSITE INDEX</strong>
 20 |                 </td>
 21 |                 <td>12,517.86</td>
 22 |                 <td class="red">-3.86</td>
 23 |                 <td class="red">-0.03%</td>
 24 |                 <td class="green">+0.68%</td>
 25 |                 <td class="green">+7.98%</td>
 26 |                 <td>10:05 AM</td>
 27 |             </tr>
 28 |             <tr class="data">
 29 |                 <td>SPTSX:IND 
 30 |                 <br>
 31 |                     <strong>S&P/TSX COMPOSITE INDEX</strong>
 32 |                 </td>
 33 |                 <td>15,509.75</td>
 34 |                 <td class="red">-32.75</td>
 35 |                 <td class="red">-0.25%</td>
 36 |                 <td class="green">+1.38%</td>
 37 |                 <td class="green">+0.89%</td>
 38 |                 <td>03:05 PM</td>
 39 |             </tr>
 40 |             <tr class="data">
 41 |                 <td>INDU:IND 
 42 |                 <br>
 43 |                     <strong>JONES INDUS. AVG</strong>
 44 |                 </td>
 45 |                 <td>24,024.13</td>
 46 |                 <td class="red">-424.56</td>
 47 |                 <td class="red">-1.74%</td>
 48 |                 <td class="green">+2.09%</td>
 49 |                 <td class="green">+14.42%</td>
 50 |                 <td>4/24/2018</td>
 51 |             </tr>
 52 |         </table>
 53 |     </div>
 54 | </template>
 55 | 
 56 | <script>
 57 |     export default {
 58 |         
 59 |     }
 60 | </script>
 61 | 
 62 | 
 63 | <style scoped>
 64 | 
 65 | #argentina {
 66 |     border-collapse: collapse;
 67 |     width: 100%;
 68 | }
 69 | 
 70 | hr {
 71 |     border-top: 1px solid grey;
 72 | }
 73 | 
 74 | #argentina td, #argentina th {
 75 |     border-bottom: 1px dotted grey;
 76 |     padding: 8px;
 77 | }
 78 | 
 79 | 
 80 | #argentina tr {
 81 |     text-transform: uppercase;
 82 |     font-family: BWHaasText-55Roman,"Helvetica Neue",Helvetica,Arial,sans-serif;
 83 |     color: #555;
 84 |     font-size: 0.85em;
 85 |     font-weight: 300;
 86 | }
 87 | 
 88 | #argentina strong {
 89 |     color: black;
 90 |     font-size: 1.15em;
 91 | }
 92 | 
 93 | .red {
 94 |     color: #ff433d;
 95 | }
 96 | 
 97 | .green {
 98 |     color: #1dcc92;
 99 | }
100 | 
101 | #argentina th {
102 |     padding-top: 12px;
103 |     padding-bottom: 12px;
104 |     text-align: left;
105 |     background-color: transparent;
106 |     color: #555;
107 |     font-size: 1em;
108 |     font-weight: 500;
109 | }
110 | 
111 | </style>
112 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/APAC/Content/HongKong.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <h3 class="heading-3 selected-tab">Hong Kong</h3>
  4 |         <hr>
  5 |         <table id="argentina">
  6 |             <tr class="header">
  7 |                 <th>Name</th>
  8 |                 <th>Value</th>
  9 |                 <th>Net Change</th>
 10 |                 <th>% Change</th>
 11 |                 <th>1 Month</th>
 12 |                 <th>1 Year</th>
 13 |                 <th>Time (Edit)</th>
 14 |                 <th class="data-graph">2 Day</th>
 15 |             </tr>
 16 |             <tr class="data">
 17 |                 <td>NYA:IND 
 18 |                 <br>
 19 |                     <strong>NYSE COMPOSITE INDEX</strong>
 20 |                 </td>
 21 |                 <td>12,517.86</td>
 22 |                 <td class="red">-3.86</td>
 23 |                 <td class="red">-0.03%</td>
 24 |                 <td class="green">+0.68%</td>
 25 |                 <td class="green">+7.98%</td>
 26 |                 <td>10:05 AM</td>
 27 |             </tr>
 28 |             <tr class="data">
 29 |                 <td>SPTSX:IND 
 30 |                 <br>
 31 |                     <strong>S&P/TSX COMPOSITE INDEX</strong>
 32 |                 </td>
 33 |                 <td>15,509.75</td>
 34 |                 <td class="red">-32.75</td>
 35 |                 <td class="red">-0.25%</td>
 36 |                 <td class="green">+1.38%</td>
 37 |                 <td class="green">+0.89%</td>
 38 |                 <td>03:05 PM</td>
 39 |             </tr>
 40 |             <tr class="data">
 41 |                 <td>INDU:IND 
 42 |                 <br>
 43 |                     <strong>JONES INDUS. AVG</strong>
 44 |                 </td>
 45 |                 <td>24,024.13</td>
 46 |                 <td class="red">-424.56</td>
 47 |                 <td class="red">-1.74%</td>
 48 |                 <td class="green">+2.09%</td>
 49 |                 <td class="green">+14.42%</td>
 50 |                 <td>4/24/2018</td>
 51 |             </tr>
 52 |         </table>
 53 |     </div>
 54 | </template>
 55 | 
 56 | <script>
 57 |     export default {
 58 |         
 59 |     }
 60 | </script>
 61 | 
 62 | 
 63 | <style scoped>
 64 | 
 65 | #argentina {
 66 |     border-collapse: collapse;
 67 |     width: 100%;
 68 | }
 69 | 
 70 | hr {
 71 |     border-top: 1px solid grey;
 72 | }
 73 | 
 74 | #argentina td, #argentina th {
 75 |     border-bottom: 1px dotted grey;
 76 |     padding: 8px;
 77 | }
 78 | 
 79 | 
 80 | #argentina tr {
 81 |     text-transform: uppercase;
 82 |     font-family: BWHaasText-55Roman,"Helvetica Neue",Helvetica,Arial,sans-serif;
 83 |     color: #555;
 84 |     font-size: 0.85em;
 85 |     font-weight: 300;
 86 | }
 87 | 
 88 | #argentina strong {
 89 |     color: black;
 90 |     font-size: 1.15em;
 91 | }
 92 | 
 93 | .red {
 94 |     color: #ff433d;
 95 | }
 96 | 
 97 | .green {
 98 |     color: #1dcc92;
 99 | }
100 | 
101 | #argentina th {
102 |     padding-top: 12px;
103 |     padding-bottom: 12px;
104 |     text-align: left;
105 |     background-color: transparent;
106 |     color: #555;
107 |     font-size: 1em;
108 |     font-weight: 500;
109 | }
110 | 
111 | </style>
112 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/Americas/Content/Brazil.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <h3 class="heading-3 selected-tab">Brazil</h3>
  4 |         <hr>
  5 |         <table id="argentina">
  6 |             <tr class="header">
  7 |                 <th>Name</th>
  8 |                 <th>Value</th>
  9 |                 <th>Net Change</th>
 10 |                 <th>% Change</th>
 11 |                 <th>1 Month</th>
 12 |                 <th>1 Year</th>
 13 |                 <th>Time (Edit)</th>
 14 |                 <th class="data-graph">2 Day</th>
 15 |             </tr>
 16 |             <tr class="data">
 17 |                 <td>NYA:IND 
 18 |                 <br>
 19 |                     <strong>NYSE COMPOSITE INDEX</strong>
 20 |                 </td>
 21 |                 <td>12,517.86</td>
 22 |                 <td class="red">-3.86</td>
 23 |                 <td class="red">-0.03%</td>
 24 |                 <td class="green">+0.68%</td>
 25 |                 <td class="green">+7.98%</td>
 26 |                 <td>10:05 AM</td>
 27 |             </tr>
 28 |             <tr class="data">
 29 |                 <td>SPTSX:IND 
 30 |                 <br>
 31 |                     <strong>S&P/TSX COMPOSITE INDEX</strong>
 32 |                 </td>
 33 |                 <td>15,509.75</td>
 34 |                 <td class="red">-32.75</td>
 35 |                 <td class="red">-0.25%</td>
 36 |                 <td class="green">+1.38%</td>
 37 |                 <td class="green">+0.89%</td>
 38 |                 <td>03:05 PM</td>
 39 |             </tr>
 40 |             <tr class="data">
 41 |                 <td>INDU:IND 
 42 |                 <br>
 43 |                     <strong>JONES INDUS. AVG</strong>
 44 |                 </td>
 45 |                 <td>24,024.13</td>
 46 |                 <td class="red">-424.56</td>
 47 |                 <td class="red">-1.74%</td>
 48 |                 <td class="green">+2.09%</td>
 49 |                 <td class="green">+14.42%</td>
 50 |                 <td>4/24/2018</td>
 51 |             </tr>
 52 |         </table>
 53 |     </div>
 54 | </template>
 55 | 
 56 | <script>
 57 |     export default {
 58 |         
 59 |     }
 60 | </script>
 61 | 
 62 | 
 63 | <style scoped>
 64 | 
 65 | #argentina {
 66 |     border-collapse: collapse;
 67 |     width: 100%;
 68 | }
 69 | 
 70 | hr {
 71 |     border-top: 1px solid grey;
 72 | }
 73 | 
 74 | #argentina td, #argentina th {
 75 |     border-bottom: 1px dotted grey;
 76 |     padding: 8px;
 77 | }
 78 | 
 79 | 
 80 | #argentina tr {
 81 |     text-transform: uppercase;
 82 |     font-family: BWHaasText-55Roman,"Helvetica Neue",Helvetica,Arial,sans-serif;
 83 |     color: #555;
 84 |     font-size: 0.85em;
 85 |     font-weight: 300;
 86 | }
 87 | 
 88 | #argentina strong {
 89 |     color: black;
 90 |     font-size: 1.15em;
 91 | }
 92 | 
 93 | .red {
 94 |     color: #ff433d;
 95 | }
 96 | 
 97 | .green {
 98 |     color: #1dcc92;
 99 | }
100 | 
101 | #argentina th {
102 |     padding-top: 12px;
103 |     padding-bottom: 12px;
104 |     text-align: left;
105 |     background-color: transparent;
106 |     color: #555;
107 |     font-size: 1em;
108 |     font-weight: 500;
109 | }
110 | 
111 | </style>
112 | 


--------------------------------------------------------------------------------
/src/components/Navbar/MainNav.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div data-collapse="medium" data-animation="default" data-duration="400" class="nav-bar w-nav">
  3 |         <!-- Logo and Menu Icon -->
  4 |         <div class="container-3 w-container">
  5 |             <a href="#" class="brand w-nav-brand">
  6 |                 <img src="./../../Assets/logo.svg" alt="rubic" class="image">
  7 |             </a>
  8 |             <a href="#" class="w-nav-brand ">
  9 |                 <h3 class="main-font">Bloomberg</h3>
 10 |                 <h4 class="main-font-two">Markets</h4>
 11 |             </a>
 12 |             <!-- Main Nav Bar -->
 13 |             <div class="div-block">
 14 |                 <a href="#" class="main-nav-link">Markets</a>
 15 |                 <a href="#" class="main-nav-link">Tech</a>
 16 |                 <a href="#" class="main-nav-link">Pursuits</a>
 17 |                 <a href="#" class="main-nav-link">Politics</a>
 18 |                 <a href="#" class="main-nav-link">Opinion</a>
 19 |                 <a href="#" class="main-nav-link">Businessweek</a>
 20 |             </div>
 21 |             <!-- Side Bar -->
 22 |             <nav role="navigation" class="nav-menu w-nav-menu">
 23 |                 <ul class="unordered-list w-clearfix">
 24 |                     <li class="menu-bar-items">
 25 |                         <a href="#" class="a-items">Settings</a>
 26 |                     </li>
 27 |                     <li class="menu-bar-items">
 28 |                         <a href="#" class="a-items">
 29 |                             Subscribe to Businessweek
 30 |                         </a>
 31 |                     </li>
 32 |                     <li class="menu-bar-items search-icon">
 33 |                         <icon name="search"></icon>
 34 |                     </li>
 35 |                 </ul>
 36 |             </nav>
 37 |             <!-- Search Icon -->
 38 |         </div>
 39 |     </div>
 40 | </template>
 41 | 
 42 | <script>
 43 |     // Font Awesome Icon
 44 |     import 'vue-awesome/icons/search'
 45 |     import Icon from 'vue-awesome/components/Icon'
 46 |     export default {
 47 |         components: {
 48 |             icon: Icon,
 49 |         }
 50 |     }
 51 | </script>
 52 | 
 53 | <style scoped>
 54 |     @import './../../Assets/normalize.css';
 55 |     @import './../../Assets/webflow.css';
 56 |     @import './../../Assets/custom.css';
 57 | 
 58 |     /* Bloomberg Logo */
 59 |     .main-font {
 60 |         font-weight: 700;
 61 |         font-size: 1.125rem;
 62 |         line-height: 1em;
 63 |         color: white;
 64 |         margin: 0.5em 0 0 0;
 65 |     }
 66 |     .main-font-two {
 67 |         font-size: 1.125rem;
 68 |         line-height: 1em;
 69 |         color: rgba(255,255,255,.5);
 70 |         margin: 0;
 71 |     }
 72 |     .image {
 73 |         margin: 0.7em 0.5em 0.2em 0;
 74 |         padding: 0;
 75 |         width: 28px;
 76 |     }
 77 | 
 78 |     /* Main Nav Items */
 79 |     .main-nav-link {
 80 |         margin-right: 23px;
 81 |         font-size: 16px;
 82 |     }
 83 |     .main-nav-link:hover {
 84 |         color: white;
 85 |     }
 86 | 
 87 |     /* Right Nav Bar items */
 88 |     .a-items {
 89 |         text-decoration: none;
 90 |         color: white;
 91 |     }
 92 |     .a-items:hover {
 93 |         text-decoration: underline;
 94 |     }
 95 |     /* Search Icon */
 96 |     .search-icon {
 97 |         position: absolute;
 98 |         float: right;
 99 |         margin: 0 0 0 13em;
100 |         cursor: pointer;
101 |     }
102 |     svg.fa-icon {
103 |         color: white;
104 |         height: 35px;
105 |     }
106 | 
107 |     
108 | </style>
109 | 
110 | 
111 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/APAC/Content/China.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <h3 class="heading-3 selected-tab">China</h3>
  4 |         <hr>
  5 |         <table id="all-americas">
  6 |             <tr class="header">
  7 |                 <th>Name</th>
  8 |                 <th>Value</th>
  9 |                 <th>Net Change</th>
 10 |                 <th>% Change</th>
 11 |                 <th>1 Month</th>
 12 |                 <th>1 Year</th>
 13 |                 <th>Time (Edit)</th>
 14 |                 <th class="data-graph">2 Day</th>
 15 |             </tr>
 16 |             <tr class="data">
 17 |                 <td>INDU:IND 
 18 |                 <br>
 19 |                     <strong>JONES INDUS. AVG</strong>
 20 |                 </td>
 21 |                 <td>24,024.13</td>
 22 |                 <td class="red">-424.56</td>
 23 |                 <td class="red">-1.74%</td>
 24 |                 <td class="green">+2.09%</td>
 25 |                 <td class="green">+14.42%</td>
 26 |                 <td>4/24/2018</td>
 27 |             </tr>
 28 |             <tr class="data">
 29 |                 <td>SPX:IND 
 30 |                 <br>
 31 |                     <strong>S&P 500 INDEX</strong>
 32 |                 </td>
 33 |                 <td>2,631.78</td>
 34 |                 <td class="red">-2.78</td>
 35 |                 <td class="red">-0.11%</td>
 36 |                 <td class="green">+1.68%</td>
 37 |                 <td class="green">+10.18%</td>
 38 |                 <td>9:34 AM</td>
 39 |             </tr>
 40 |             <tr class="data">
 41 |                 <td>CCMP:IND 
 42 |                 <br>
 43 |                     <strong>NASDAQ COMPOSITE INDEX</strong>
 44 |                 </td>
 45 |                 <td>7,003.78</td>
 46 |                 <td class="red">-3.61</td>
 47 |                 <td class="red">-0.05%</td>
 48 |                 <td class="green">+3.00%</td>
 49 |                 <td class="green">+16.24%</td>
 50 |                 <td>10:14 AM</td>
 51 |             </tr>
 52 |             <tr class="data">
 53 |                 <td>NYA:IND 
 54 |                 <br>
 55 |                     <strong>NYSE COMPOSITE INDEX</strong>
 56 |                 </td>
 57 |                 <td>12,517.86</td>
 58 |                 <td class="red">-3.86</td>
 59 |                 <td class="red">-0.03%</td>
 60 |                 <td class="green">+0.68%</td>
 61 |                 <td class="green">+7.98%</td>
 62 |                 <td>10:05 AM</td>
 63 |             </tr>
 64 |         </table>
 65 |     </div>
 66 | </template>
 67 | 
 68 | <script>
 69 |     export default {
 70 |         
 71 |     }
 72 | </script>
 73 | 
 74 | 
 75 | <style scoped>
 76 | 
 77 | #all-americas {
 78 |     border-collapse: collapse;
 79 |     width: 100%;
 80 | }
 81 | 
 82 | hr {
 83 |     border-top: 1px solid grey;
 84 | }
 85 | 
 86 | #all-americas td, #all-americas th {
 87 |     border-bottom: 1px dotted grey;
 88 |     padding: 8px;
 89 | }
 90 | 
 91 | 
 92 | #all-americas tr {
 93 |     text-transform: uppercase;
 94 |     font-family: BWHaasText-55Roman,"Helvetica Neue",Helvetica,Arial,sans-serif;
 95 |     color: #555;
 96 |     font-size: 0.85em;
 97 |     font-weight: 300;
 98 | }
 99 | 
100 | #all-americas strong {
101 |     color: black;
102 |     font-size: 1.15em;
103 | }
104 | 
105 | .red {
106 |     color: #ff433d;
107 | }
108 | 
109 | .green {
110 |     color: #1dcc92;
111 | }
112 | 
113 | #all-americas th {
114 |     padding-top: 12px;
115 |     padding-bottom: 12px;
116 |     text-align: left;
117 |     background-color: transparent;
118 |     color: #555;
119 |     font-size: 1em;
120 |     font-weight: 500;
121 | }
122 | 
123 | </style>
124 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/EMEA/Content/Denmark.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <h3 class="heading-3 selected-tab">Denmark</h3>
  4 |         <hr>
  5 |         <table id="all-americas">
  6 |             <tr class="header">
  7 |                 <th>Name</th>
  8 |                 <th>Value</th>
  9 |                 <th>Net Change</th>
 10 |                 <th>% Change</th>
 11 |                 <th>1 Month</th>
 12 |                 <th>1 Year</th>
 13 |                 <th>Time (Edit)</th>
 14 |                 <th class="data-graph">2 Day</th>
 15 |             </tr>
 16 |             <tr class="data">
 17 |                 <td>INDU:IND 
 18 |                 <br>
 19 |                     <strong>JONES INDUS. AVG</strong>
 20 |                 </td>
 21 |                 <td>24,024.13</td>
 22 |                 <td class="red">-424.56</td>
 23 |                 <td class="red">-1.74%</td>
 24 |                 <td class="green">+2.09%</td>
 25 |                 <td class="green">+14.42%</td>
 26 |                 <td>4/24/2018</td>
 27 |             </tr>
 28 |             <tr class="data">
 29 |                 <td>SPX:IND 
 30 |                 <br>
 31 |                     <strong>S&P 500 INDEX</strong>
 32 |                 </td>
 33 |                 <td>2,631.78</td>
 34 |                 <td class="red">-2.78</td>
 35 |                 <td class="red">-0.11%</td>
 36 |                 <td class="green">+1.68%</td>
 37 |                 <td class="green">+10.18%</td>
 38 |                 <td>9:34 AM</td>
 39 |             </tr>
 40 |             <tr class="data">
 41 |                 <td>CCMP:IND 
 42 |                 <br>
 43 |                     <strong>NASDAQ COMPOSITE INDEX</strong>
 44 |                 </td>
 45 |                 <td>7,003.78</td>
 46 |                 <td class="red">-3.61</td>
 47 |                 <td class="red">-0.05%</td>
 48 |                 <td class="green">+3.00%</td>
 49 |                 <td class="green">+16.24%</td>
 50 |                 <td>10:14 AM</td>
 51 |             </tr>
 52 |             <tr class="data">
 53 |                 <td>NYA:IND 
 54 |                 <br>
 55 |                     <strong>NYSE COMPOSITE INDEX</strong>
 56 |                 </td>
 57 |                 <td>12,517.86</td>
 58 |                 <td class="red">-3.86</td>
 59 |                 <td class="red">-0.03%</td>
 60 |                 <td class="green">+0.68%</td>
 61 |                 <td class="green">+7.98%</td>
 62 |                 <td>10:05 AM</td>
 63 |             </tr>
 64 |         </table>
 65 |     </div>
 66 | </template>
 67 | 
 68 | <script>
 69 |     export default {
 70 |         
 71 |     }
 72 | </script>
 73 | 
 74 | 
 75 | <style scoped>
 76 | 
 77 | #all-americas {
 78 |     border-collapse: collapse;
 79 |     width: 100%;
 80 | }
 81 | 
 82 | hr {
 83 |     border-top: 1px solid grey;
 84 | }
 85 | 
 86 | #all-americas td, #all-americas th {
 87 |     border-bottom: 1px dotted grey;
 88 |     padding: 8px;
 89 | }
 90 | 
 91 | 
 92 | #all-americas tr {
 93 |     text-transform: uppercase;
 94 |     font-family: BWHaasText-55Roman,"Helvetica Neue",Helvetica,Arial,sans-serif;
 95 |     color: #555;
 96 |     font-size: 0.85em;
 97 |     font-weight: 300;
 98 | }
 99 | 
100 | #all-americas strong {
101 |     color: black;
102 |     font-size: 1.15em;
103 | }
104 | 
105 | .red {
106 |     color: #ff433d;
107 | }
108 | 
109 | .green {
110 |     color: #1dcc92;
111 | }
112 | 
113 | #all-americas th {
114 |     padding-top: 12px;
115 |     padding-bottom: 12px;
116 |     text-align: left;
117 |     background-color: transparent;
118 |     color: #555;
119 |     font-size: 1em;
120 |     font-weight: 500;
121 | }
122 | 
123 | </style>
124 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/Overview/Content/AsiaContent/Table.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <table id="customers">
  3 |         <tr class="header">
  4 |             <th>Name</th>
  5 |             <th>Value</th>
  6 |             <th>Net Change</th>
  7 |             <th>% Change</th>
  8 |             <th>1 Month</th>
  9 |             <th>1 Year</th>
 10 |             <th>Time (Edit)</th>
 11 |             <th class="data-graph">2 Day</th>
 12 |         </tr>
 13 |         <tr class="data">
 14 |             <td>INDU:IND 
 15 |             <br>
 16 |                 <strong>JONES INDUS. AVG</strong>
 17 |             </td>
 18 |             <td>24,024.13</td>
 19 |             <td class="red">-424.56</td>
 20 |             <td class="red">-1.74%</td>
 21 |             <td class="green">+2.09%</td>
 22 |             <td class="green">+14.42%</td>
 23 |             <td>4/24/2018</td>
 24 |         </tr>
 25 |         <tr class="data">
 26 |             <td>SPX:IND 
 27 |             <br>
 28 |                 <strong>S&P 500 INDEX</strong>
 29 |             </td>
 30 |             <td>2,631.78</td>
 31 |             <td class="red">-2.78</td>
 32 |             <td class="red">-0.11%</td>
 33 |             <td class="green">+1.68%</td>
 34 |             <td class="green">+10.18%</td>
 35 |             <td>9:34 AM</td>
 36 |         </tr>
 37 |         <tr class="data">
 38 |             <td>CCMP:IND 
 39 |             <br>
 40 |                 <strong>NASDAQ COMPOSITE INDEX</strong>
 41 |             </td>
 42 |             <td>7,003.78</td>
 43 |             <td class="red">-3.61</td>
 44 |             <td class="red">-0.05%</td>
 45 |             <td class="green">+3.00%</td>
 46 |             <td class="green">+16.24%</td>
 47 |             <td>10:14 AM</td>
 48 |         </tr>
 49 |         <tr class="data">
 50 |             <td>NYA:IND 
 51 |             <br>
 52 |                 <strong>NYSE COMPOSITE INDEX</strong>
 53 |             </td>
 54 |             <td>12,517.86</td>
 55 |             <td class="red">-3.86</td>
 56 |             <td class="red">-0.03%</td>
 57 |             <td class="green">+0.68%</td>
 58 |             <td class="green">+7.98%</td>
 59 |             <td>10:05 AM</td>
 60 |         </tr>
 61 |         <tr class="data">
 62 |             <td>SPTSX:IND 
 63 |             <br>
 64 |                 <strong>S&P/TSX COMPOSITE INDEX</strong>
 65 |             </td>
 66 |             <td>15,509.75</td>
 67 |             <td class="red">-32.75</td>
 68 |             <td class="red">-0.25%</td>
 69 |             <td class="green">+1.38%</td>
 70 |             <td class="green">+0.89%</td>
 71 |             <td>03:05 PM</td>
 72 |         </tr>
 73 |     </table>
 74 | </template>
 75 | 
 76 | <script>
 77 |     export default {
 78 |         
 79 |     }
 80 | </script>
 81 | 
 82 | 
 83 | <style scoped>
 84 | 
 85 | #customers {
 86 |     border-collapse: collapse;
 87 |     width: 100%;
 88 | }
 89 | 
 90 | #customers td, #customers th {
 91 |     border-bottom: 1px dotted grey;
 92 |     padding: 8px;
 93 | }
 94 | 
 95 | 
 96 | #customers tr {
 97 |     text-transform: uppercase;
 98 |     font-family: BWHaasText-55Roman,"Helvetica Neue",Helvetica,Arial,sans-serif;
 99 |     color: #555;
100 |     font-size: 0.85em;
101 |     font-weight: 300;
102 | }
103 | 
104 | #customers strong {
105 |     color: black;
106 |     font-size: 1.15em;
107 | }
108 | 
109 | .red {
110 |     color: #ff433d;
111 | }
112 | 
113 | .green {
114 |     color: #1dcc92;
115 | }
116 | 
117 | #customers th {
118 |     padding-top: 12px;
119 |     padding-bottom: 12px;
120 |     text-align: left;
121 |     background-color: transparent;
122 |     color: #555;
123 |     font-size: 1em;
124 |     font-weight: 500;
125 | }
126 | 
127 | </style>
128 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/Overview/Content/AmericaContent/Table.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <table id="customers">
  3 |         <tr class="header">
  4 |             <th>Name</th>
  5 |             <th>Value</th>
  6 |             <th>Net Change</th>
  7 |             <th>% Change</th>
  8 |             <th>1 Month</th>
  9 |             <th>1 Year</th>
 10 |             <th>Time (Edit)</th>
 11 |             <th class="data-graph">2 Day</th>
 12 |         </tr>
 13 |         <tr class="data">
 14 |             <td>INDU:IND 
 15 |             <br>
 16 |                 <strong>JONES INDUS. AVG</strong>
 17 |             </td>
 18 |             <td>24,024.13</td>
 19 |             <td class="red">-424.56</td>
 20 |             <td class="red">-1.74%</td>
 21 |             <td class="green">+2.09%</td>
 22 |             <td class="green">+14.42%</td>
 23 |             <td>4/24/2018</td>
 24 |         </tr>
 25 |         <tr class="data">
 26 |             <td>SPX:IND 
 27 |             <br>
 28 |                 <strong>S&P 500 INDEX</strong>
 29 |             </td>
 30 |             <td>2,631.78</td>
 31 |             <td class="red">-2.78</td>
 32 |             <td class="red">-0.11%</td>
 33 |             <td class="green">+1.68%</td>
 34 |             <td class="green">+10.18%</td>
 35 |             <td>9:34 AM</td>
 36 |         </tr>
 37 |         <tr class="data">
 38 |             <td>CCMP:IND 
 39 |             <br>
 40 |                 <strong>NASDAQ COMPOSITE INDEX</strong>
 41 |             </td>
 42 |             <td>7,003.78</td>
 43 |             <td class="red">-3.61</td>
 44 |             <td class="red">-0.05%</td>
 45 |             <td class="green">+3.00%</td>
 46 |             <td class="green">+16.24%</td>
 47 |             <td>10:14 AM</td>
 48 |         </tr>
 49 |         <tr class="data">
 50 |             <td>NYA:IND 
 51 |             <br>
 52 |                 <strong>NYSE COMPOSITE INDEX</strong>
 53 |             </td>
 54 |             <td>12,517.86</td>
 55 |             <td class="red">-3.86</td>
 56 |             <td class="red">-0.03%</td>
 57 |             <td class="green">+0.68%</td>
 58 |             <td class="green">+7.98%</td>
 59 |             <td>10:05 AM</td>
 60 |         </tr>
 61 |         <tr class="data">
 62 |             <td>SPTSX:IND 
 63 |             <br>
 64 |                 <strong>S&P/TSX COMPOSITE INDEX</strong>
 65 |             </td>
 66 |             <td>15,509.75</td>
 67 |             <td class="red">-32.75</td>
 68 |             <td class="red">-0.25%</td>
 69 |             <td class="green">+1.38%</td>
 70 |             <td class="green">+0.89%</td>
 71 |             <td>03:05 PM</td>
 72 |         </tr>
 73 |     </table>
 74 | </template>
 75 | 
 76 | <script>
 77 |     export default {
 78 |         
 79 |     }
 80 | </script>
 81 | 
 82 | 
 83 | <style scoped>
 84 | 
 85 | #customers {
 86 |     border-collapse: collapse;
 87 |     width: 100%;
 88 | }
 89 | 
 90 | #customers td, #customers th {
 91 |     border-bottom: 1px dotted grey;
 92 |     padding: 8px;
 93 | }
 94 | 
 95 | 
 96 | #customers tr {
 97 |     text-transform: uppercase;
 98 |     font-family: BWHaasText-55Roman,"Helvetica Neue",Helvetica,Arial,sans-serif;
 99 |     color: #555;
100 |     font-size: 0.85em;
101 |     font-weight: 300;
102 | }
103 | 
104 | #customers strong {
105 |     color: black;
106 |     font-size: 1.15em;
107 | }
108 | 
109 | .red {
110 |     color: #ff433d;
111 | }
112 | 
113 | .green {
114 |     color: #1dcc92;
115 | }
116 | 
117 | #customers th {
118 |     padding-top: 12px;
119 |     padding-bottom: 12px;
120 |     text-align: left;
121 |     background-color: transparent;
122 |     color: #555;
123 |     font-size: 1em;
124 |     font-weight: 500;
125 | }
126 | 
127 | </style>
128 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/Overview/Content/EuropeContent/Table.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <table id="customers">
  3 |         <tr class="header">
  4 |             <th>Name</th>
  5 |             <th>Value</th>
  6 |             <th>Net Change</th>
  7 |             <th>% Change</th>
  8 |             <th>1 Month</th>
  9 |             <th>1 Year</th>
 10 |             <th>Time (Edit)</th>
 11 |             <th class="data-graph">2 Day</th>
 12 |         </tr>
 13 |         <tr class="data">
 14 |             <td>INDU:IND 
 15 |             <br>
 16 |                 <strong>JONES INDUS. AVG</strong>
 17 |             </td>
 18 |             <td>24,024.13</td>
 19 |             <td class="red">-424.56</td>
 20 |             <td class="red">-1.74%</td>
 21 |             <td class="green">+2.09%</td>
 22 |             <td class="green">+14.42%</td>
 23 |             <td>4/24/2018</td>
 24 |         </tr>
 25 |         <tr class="data">
 26 |             <td>SPX:IND 
 27 |             <br>
 28 |                 <strong>S&P 500 INDEX</strong>
 29 |             </td>
 30 |             <td>2,631.78</td>
 31 |             <td class="red">-2.78</td>
 32 |             <td class="red">-0.11%</td>
 33 |             <td class="green">+1.68%</td>
 34 |             <td class="green">+10.18%</td>
 35 |             <td>9:34 AM</td>
 36 |         </tr>
 37 |         <tr class="data">
 38 |             <td>CCMP:IND 
 39 |             <br>
 40 |                 <strong>NASDAQ COMPOSITE INDEX</strong>
 41 |             </td>
 42 |             <td>7,003.78</td>
 43 |             <td class="red">-3.61</td>
 44 |             <td class="red">-0.05%</td>
 45 |             <td class="green">+3.00%</td>
 46 |             <td class="green">+16.24%</td>
 47 |             <td>10:14 AM</td>
 48 |         </tr>
 49 |         <tr class="data">
 50 |             <td>NYA:IND 
 51 |             <br>
 52 |                 <strong>NYSE COMPOSITE INDEX</strong>
 53 |             </td>
 54 |             <td>12,517.86</td>
 55 |             <td class="red">-3.86</td>
 56 |             <td class="red">-0.03%</td>
 57 |             <td class="green">+0.68%</td>
 58 |             <td class="green">+7.98%</td>
 59 |             <td>10:05 AM</td>
 60 |         </tr>
 61 |         <tr class="data">
 62 |             <td>SPTSX:IND 
 63 |             <br>
 64 |                 <strong>S&P/TSX COMPOSITE INDEX</strong>
 65 |             </td>
 66 |             <td>15,509.75</td>
 67 |             <td class="red">-32.75</td>
 68 |             <td class="red">-0.25%</td>
 69 |             <td class="green">+1.38%</td>
 70 |             <td class="green">+0.89%</td>
 71 |             <td>03:05 PM</td>
 72 |         </tr>
 73 |     </table>
 74 | </template>
 75 | 
 76 | <script>
 77 |     export default {
 78 |         
 79 |     }
 80 | </script>
 81 | 
 82 | 
 83 | <style scoped>
 84 | 
 85 | #customers {
 86 |     border-collapse: collapse;
 87 |     width: 100%;
 88 | }
 89 | 
 90 | #customers td, #customers th {
 91 |     border-bottom: 1px dotted grey;
 92 |     padding: 8px;
 93 | }
 94 | 
 95 | 
 96 | #customers tr {
 97 |     text-transform: uppercase;
 98 |     font-family: BWHaasText-55Roman,"Helvetica Neue",Helvetica,Arial,sans-serif;
 99 |     color: #555;
100 |     font-size: 0.85em;
101 |     font-weight: 300;
102 | }
103 | 
104 | #customers strong {
105 |     color: black;
106 |     font-size: 1.15em;
107 | }
108 | 
109 | .red {
110 |     color: #ff433d;
111 | }
112 | 
113 | .green {
114 |     color: #1dcc92;
115 | }
116 | 
117 | #customers th {
118 |     padding-top: 12px;
119 |     padding-bottom: 12px;
120 |     text-align: left;
121 |     background-color: transparent;
122 |     color: #555;
123 |     font-size: 1em;
124 |     font-weight: 500;
125 | }
126 | 
127 | </style>
128 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/Overview/Content/AmericaContent/GraphFilter.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="div-block-12">
  3 |         <div class="div-block-7 time-frame-box">
  4 |             <div class="time-box-one b-r w-clearfix">
  5 |                 <div 
  6 |                     class="text-block-6" 
  7 |                     v-bind:class="{selected: day.id == state }"
  8 |                     v-on:click="state = day.id">
  9 |                         1D
 10 |                 </div>
 11 |             </div>
 12 |             <div class="time-box-one b-r w-clearfix">
 13 |                 <div 
 14 |                     class="text-block-6"
 15 |                     v-bind:class="{selected: month.id == state }"
 16 |                     v-on:click="state = month.id">
 17 |                         1M
 18 |                 </div>
 19 |             </div>
 20 |             <div class="time-box-one b-r w-clearfix">
 21 |                 <div 
 22 |                     class="text-block-6"
 23 |                     v-bind:class="{selected: oneYear.id == state }"
 24 |                     v-on:click="state = oneYear.id">
 25 |                         1Y
 26 |                 </div>
 27 |             </div>
 28 |             <div class="time-box-one b-r w-clearfix">
 29 |                 <div 
 30 |                     class="text-block-6"
 31 |                     v-bind:class="{selected: fiveYear.id == state }"
 32 |                     v-on:click="state = fiveYear.id">
 33 |                         5Y
 34 |                 </div>
 35 |             </div>
 36 |             <div class="time-box-one time-label-box w-clearfix">
 37 |                 <div class="text-block-6 text-label">Time Frame</div>
 38 |             </div>
 39 |         </div>
 40 |         <div class="div-block-7 time-frame-box time-frame-box-two input-box w-clearfix">
 41 |             <div class="text-block-7">
 42 |                 <input placeholder="Add Comparison" />
 43 |             </div>
 44 |             <div class="div-block-13">
 45 |                 <span class="plus"><icon class="plus-icn" name="plus"></icon></span>
 46 |             </div>
 47 |         </div>
 48 |         <div class="div-block-7 time-frame-box time-frame-box-two time-frame-box-three w-clearfix">
 49 |             <div class="text-block-7 text-drop-down">
 50 |                 Indicators
 51 |                 <span><icon class="caret-down" name="caret-down"></icon></span>
 52 |             </div>
 53 |         </div>
 54 |     </div>
 55 | </template>
 56 | 
 57 | <script>
 58 |     // Font Awesome Icon
 59 |     import 'vue-awesome/icons/plus'
 60 |     import 'vue-awesome/icons/caret-down'
 61 |     import Icon from 'vue-awesome/components/Icon'
 62 | 
 63 |     export default {
 64 |         data() {
 65 |             return {
 66 |                 state: false,
 67 |                 day: {
 68 |                     id:1
 69 |                 },
 70 |                 month: {
 71 |                     id:2
 72 |                 },
 73 |                 oneYear: {
 74 |                     id: 3
 75 |                 },
 76 |                 fiveYear: {
 77 |                     id: 4
 78 |                 }
 79 |             }
 80 |         },
 81 |         components: {
 82 |             icon: Icon
 83 |         }
 84 |     }
 85 | </script>
 86 | 
 87 | <style scoped>
 88 | 
 89 |     .br {
 90 |         border-right: 0.5px solid lightgray;
 91 |     }
 92 |     .text-block-6 {
 93 |         cursor: pointer;
 94 |     }
 95 |     .selected {
 96 |         color: #fb8b1e;
 97 |         cursor: default;
 98 |     }
 99 |     .text-label {
100 |         cursor: default;
101 |     }
102 |     input {
103 |         border: none;
104 |         outline: none;
105 |         width: 8.5em;
106 |     }
107 |     .div-block-13 {
108 |         cursor: pointer;
109 |     }
110 |     .text-drop-down {
111 |         cursor: pointer;
112 |     }
113 | 
114 |     /* Icons */
115 |     .plus-icn {
116 |         color: white;
117 |         margin: 0.5em 0.7em;
118 |     }
119 |     .caret-down {
120 |         color: #fb8b1e;
121 |     }
122 | 
123 | </style>
124 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/Futures/Content/Asia/Table.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <h3 class="heading-3 selected-tab">Asia Pacific</h3>
  4 |         <table id="asia-futures">
  5 |             <tr class="header">
  6 |                 <th>Name</th>
  7 |                 <th>Value</th>
  8 |                 <th>Net Change</th>
  9 |                 <th>% Change</th>
 10 |                 <th>1 Month</th>
 11 |                 <th>1 Year</th>
 12 |                 <th>Time (Edit)</th>
 13 |                 <th class="data-graph">2 Day</th>
 14 |             </tr>
 15 |             <tr class="data">
 16 |                 <td>INDU:IND 
 17 |                 <br>
 18 |                     <strong>JONES INDUS. AVG</strong>
 19 |                 </td>
 20 |                 <td>24,024.13</td>
 21 |                 <td class="red">-424.56</td>
 22 |                 <td class="red">-1.74%</td>
 23 |                 <td class="green">+2.09%</td>
 24 |                 <td class="green">+14.42%</td>
 25 |                 <td>4/24/2018</td>
 26 |             </tr>
 27 |             <tr class="data">
 28 |                 <td>SPX:IND 
 29 |                 <br>
 30 |                     <strong>S&P 500 INDEX</strong>
 31 |                 </td>
 32 |                 <td>2,631.78</td>
 33 |                 <td class="red">-2.78</td>
 34 |                 <td class="red">-0.11%</td>
 35 |                 <td class="green">+1.68%</td>
 36 |                 <td class="green">+10.18%</td>
 37 |                 <td>9:34 AM</td>
 38 |             </tr>
 39 |             <tr class="data">
 40 |                 <td>CCMP:IND 
 41 |                 <br>
 42 |                     <strong>NASDAQ COMPOSITE INDEX</strong>
 43 |                 </td>
 44 |                 <td>7,003.78</td>
 45 |                 <td class="red">-3.61</td>
 46 |                 <td class="red">-0.05%</td>
 47 |                 <td class="green">+3.00%</td>
 48 |                 <td class="green">+16.24%</td>
 49 |                 <td>10:14 AM</td>
 50 |             </tr>
 51 |             <tr class="data">
 52 |                 <td>NYA:IND 
 53 |                 <br>
 54 |                     <strong>NYSE COMPOSITE INDEX</strong>
 55 |                 </td>
 56 |                 <td>12,517.86</td>
 57 |                 <td class="red">-3.86</td>
 58 |                 <td class="red">-0.03%</td>
 59 |                 <td class="green">+0.68%</td>
 60 |                 <td class="green">+7.98%</td>
 61 |                 <td>10:05 AM</td>
 62 |             </tr>
 63 |             <tr class="data">
 64 |                 <td>SPTSX:IND 
 65 |                 <br>
 66 |                     <strong>S&P/TSX COMPOSITE INDEX</strong>
 67 |                 </td>
 68 |                 <td>15,509.75</td>
 69 |                 <td class="red">-32.75</td>
 70 |                 <td class="red">-0.25%</td>
 71 |                 <td class="green">+1.38%</td>
 72 |                 <td class="green">+0.89%</td>
 73 |                 <td>03:05 PM</td>
 74 |             </tr>
 75 |         </table>
 76 |     </div>
 77 | </template>
 78 | 
 79 | <script>
 80 |     export default {
 81 |         
 82 |     }
 83 | </script>
 84 | 
 85 | 
 86 | <style scoped>
 87 | 
 88 | #asia-futures {
 89 |     border-collapse: collapse;
 90 |     width: 100%;
 91 | }
 92 | 
 93 | #asia-futures td, #asia-futures th {
 94 |     border-bottom: 1px dotted grey;
 95 |     padding: 8px;
 96 | }
 97 | 
 98 | 
 99 | #asia-futures tr {
100 |     text-transform: uppercase;
101 |     font-family: BWHaasText-55Roman,"Helvetica Neue",Helvetica,Arial,sans-serif;
102 |     color: #555;
103 |     font-size: 0.85em;
104 |     font-weight: 300;
105 | }
106 | 
107 | #asia-futures strong {
108 |     color: black;
109 |     font-size: 1.15em;
110 | }
111 | 
112 | .red {
113 |     color: #ff433d;
114 | }
115 | 
116 | .green {
117 |     color: #1dcc92;
118 | }
119 | 
120 | #asia-futures th {
121 |     padding-top: 12px;
122 |     padding-bottom: 12px;
123 |     text-align: left;
124 |     background-color: transparent;
125 |     color: #555;
126 |     font-size: 1em;
127 |     font-weight: 500;
128 | }
129 | 
130 | </style>
131 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/Futures/Content/Americas/Table.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <h3 class="heading-3 selected-tab">Americas</h3>
  4 |         <table id="america-futures">
  5 |             <tr class="header">
  6 |                 <th>Name</th>
  7 |                 <th>Value</th>
  8 |                 <th>Net Change</th>
  9 |                 <th>% Change</th>
 10 |                 <th>1 Month</th>
 11 |                 <th>1 Year</th>
 12 |                 <th>Time (Edit)</th>
 13 |                 <th class="data-graph">2 Day</th>
 14 |             </tr>
 15 |             <tr class="data">
 16 |                 <td>INDU:IND 
 17 |                 <br>
 18 |                     <strong>JONES INDUS. AVG</strong>
 19 |                 </td>
 20 |                 <td>24,024.13</td>
 21 |                 <td class="red">-424.56</td>
 22 |                 <td class="red">-1.74%</td>
 23 |                 <td class="green">+2.09%</td>
 24 |                 <td class="green">+14.42%</td>
 25 |                 <td>4/24/2018</td>
 26 |             </tr>
 27 |             <tr class="data">
 28 |                 <td>SPX:IND 
 29 |                 <br>
 30 |                     <strong>S&P 500 INDEX</strong>
 31 |                 </td>
 32 |                 <td>2,631.78</td>
 33 |                 <td class="red">-2.78</td>
 34 |                 <td class="red">-0.11%</td>
 35 |                 <td class="green">+1.68%</td>
 36 |                 <td class="green">+10.18%</td>
 37 |                 <td>9:34 AM</td>
 38 |             </tr>
 39 |             <tr class="data">
 40 |                 <td>CCMP:IND 
 41 |                 <br>
 42 |                     <strong>NASDAQ COMPOSITE INDEX</strong>
 43 |                 </td>
 44 |                 <td>7,003.78</td>
 45 |                 <td class="red">-3.61</td>
 46 |                 <td class="red">-0.05%</td>
 47 |                 <td class="green">+3.00%</td>
 48 |                 <td class="green">+16.24%</td>
 49 |                 <td>10:14 AM</td>
 50 |             </tr>
 51 |             <tr class="data">
 52 |                 <td>NYA:IND 
 53 |                 <br>
 54 |                     <strong>NYSE COMPOSITE INDEX</strong>
 55 |                 </td>
 56 |                 <td>12,517.86</td>
 57 |                 <td class="red">-3.86</td>
 58 |                 <td class="red">-0.03%</td>
 59 |                 <td class="green">+0.68%</td>
 60 |                 <td class="green">+7.98%</td>
 61 |                 <td>10:05 AM</td>
 62 |             </tr>
 63 |             <tr class="data">
 64 |                 <td>SPTSX:IND 
 65 |                 <br>
 66 |                     <strong>S&P/TSX COMPOSITE INDEX</strong>
 67 |                 </td>
 68 |                 <td>15,509.75</td>
 69 |                 <td class="red">-32.75</td>
 70 |                 <td class="red">-0.25%</td>
 71 |                 <td class="green">+1.38%</td>
 72 |                 <td class="green">+0.89%</td>
 73 |                 <td>03:05 PM</td>
 74 |             </tr>
 75 |         </table>
 76 |     </div>
 77 | </template>
 78 | 
 79 | <script>
 80 |     export default {
 81 |         
 82 |     }
 83 | </script>
 84 | 
 85 | 
 86 | <style scoped>
 87 | 
 88 | #america-futures {
 89 |     border-collapse: collapse;
 90 |     width: 100%;
 91 | }
 92 | 
 93 | #america-futures td, #america-futures th {
 94 |     border-bottom: 1px dotted grey;
 95 |     padding: 8px;
 96 | }
 97 | 
 98 | 
 99 | #america-futures tr {
100 |     text-transform: uppercase;
101 |     font-family: BWHaasText-55Roman,"Helvetica Neue",Helvetica,Arial,sans-serif;
102 |     color: #555;
103 |     font-size: 0.85em;
104 |     font-weight: 300;
105 | }
106 | 
107 | #america-futures strong {
108 |     color: black;
109 |     font-size: 1.15em;
110 | }
111 | 
112 | .red {
113 |     color: #ff433d;
114 | }
115 | 
116 | .green {
117 |     color: #1dcc92;
118 | }
119 | 
120 | #america-futures th {
121 |     padding-top: 12px;
122 |     padding-bottom: 12px;
123 |     text-align: left;
124 |     background-color: transparent;
125 |     color: #555;
126 |     font-size: 1em;
127 |     font-weight: 500;
128 | }
129 | 
130 | </style>
131 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/Futures/Content/Europe/Table.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <h3 class="heading-3 selected-tab">Europe, Middle East & Africa</h3>
  4 |         <table id="europe-futures">
  5 |             <tr class="header">
  6 |                 <th>Name</th>
  7 |                 <th>Value</th>
  8 |                 <th>Net Change</th>
  9 |                 <th>% Change</th>
 10 |                 <th>1 Month</th>
 11 |                 <th>1 Year</th>
 12 |                 <th>Time (Edit)</th>
 13 |                 <th class="data-graph">2 Day</th>
 14 |             </tr>
 15 |             <tr class="data">
 16 |                 <td>INDU:IND 
 17 |                 <br>
 18 |                     <strong>JONES INDUS. AVG</strong>
 19 |                 </td>
 20 |                 <td>24,024.13</td>
 21 |                 <td class="red">-424.56</td>
 22 |                 <td class="red">-1.74%</td>
 23 |                 <td class="green">+2.09%</td>
 24 |                 <td class="green">+14.42%</td>
 25 |                 <td>4/24/2018</td>
 26 |             </tr>
 27 |             <tr class="data">
 28 |                 <td>SPX:IND 
 29 |                 <br>
 30 |                     <strong>S&P 500 INDEX</strong>
 31 |                 </td>
 32 |                 <td>2,631.78</td>
 33 |                 <td class="red">-2.78</td>
 34 |                 <td class="red">-0.11%</td>
 35 |                 <td class="green">+1.68%</td>
 36 |                 <td class="green">+10.18%</td>
 37 |                 <td>9:34 AM</td>
 38 |             </tr>
 39 |             <tr class="data">
 40 |                 <td>CCMP:IND 
 41 |                 <br>
 42 |                     <strong>NASDAQ COMPOSITE INDEX</strong>
 43 |                 </td>
 44 |                 <td>7,003.78</td>
 45 |                 <td class="red">-3.61</td>
 46 |                 <td class="red">-0.05%</td>
 47 |                 <td class="green">+3.00%</td>
 48 |                 <td class="green">+16.24%</td>
 49 |                 <td>10:14 AM</td>
 50 |             </tr>
 51 |             <tr class="data">
 52 |                 <td>NYA:IND 
 53 |                 <br>
 54 |                     <strong>NYSE COMPOSITE INDEX</strong>
 55 |                 </td>
 56 |                 <td>12,517.86</td>
 57 |                 <td class="red">-3.86</td>
 58 |                 <td class="red">-0.03%</td>
 59 |                 <td class="green">+0.68%</td>
 60 |                 <td class="green">+7.98%</td>
 61 |                 <td>10:05 AM</td>
 62 |             </tr>
 63 |             <tr class="data">
 64 |                 <td>SPTSX:IND 
 65 |                 <br>
 66 |                     <strong>S&P/TSX COMPOSITE INDEX</strong>
 67 |                 </td>
 68 |                 <td>15,509.75</td>
 69 |                 <td class="red">-32.75</td>
 70 |                 <td class="red">-0.25%</td>
 71 |                 <td class="green">+1.38%</td>
 72 |                 <td class="green">+0.89%</td>
 73 |                 <td>03:05 PM</td>
 74 |             </tr>
 75 |         </table>
 76 |     </div>
 77 | </template>
 78 | 
 79 | <script>
 80 |     export default {
 81 |         
 82 |     }
 83 | </script>
 84 | 
 85 | 
 86 | <style scoped>
 87 | 
 88 | #europe-futures {
 89 |     border-collapse: collapse;
 90 |     width: 100%;
 91 | }
 92 | 
 93 | #europe-futures td, #europe-futures th {
 94 |     border-bottom: 1px dotted grey;
 95 |     padding: 8px;
 96 | }
 97 | 
 98 | 
 99 | #europe-futures tr {
100 |     text-transform: uppercase;
101 |     font-family: BWHaasText-55Roman,"Helvetica Neue",Helvetica,Arial,sans-serif;
102 |     color: #555;
103 |     font-size: 0.85em;
104 |     font-weight: 300;
105 | }
106 | 
107 | #europe-futures strong {
108 |     color: black;
109 |     font-size: 1.15em;
110 | }
111 | 
112 | .red {
113 |     color: #ff433d;
114 | }
115 | 
116 | .green {
117 |     color: #1dcc92;
118 | }
119 | 
120 | #europe-futures th {
121 |     padding-top: 12px;
122 |     padding-bottom: 12px;
123 |     text-align: left;
124 |     background-color: transparent;
125 |     color: #555;
126 |     font-size: 1em;
127 |     font-weight: 500;
128 | }
129 | 
130 | </style>
131 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/APAC/Content/Japan.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <h3 class="heading-3 selected-tab">Japan</h3>
  4 |         <hr>
  5 |         <table id="argentina">
  6 |             <tr class="header">
  7 |                 <th>Name</th>
  8 |                 <th>Value</th>
  9 |                 <th>Net Change</th>
 10 |                 <th>% Change</th>
 11 |                 <th>1 Month</th>
 12 |                 <th>1 Year</th>
 13 |                 <th>Time (Edit)</th>
 14 |                 <th class="data-graph">2 Day</th>
 15 |             </tr>
 16 |             <tr class="data">
 17 |                 <td>INDU:IND 
 18 |                 <br>
 19 |                     <strong>JONES INDUS. AVG</strong>
 20 |                 </td>
 21 |                 <td>24,024.13</td>
 22 |                 <td class="red">-424.56</td>
 23 |                 <td class="red">-1.74%</td>
 24 |                 <td class="green">+2.09%</td>
 25 |                 <td class="green">+14.42%</td>
 26 |                 <td>4/24/2018</td>
 27 |             </tr>
 28 |             <tr class="data">
 29 |                 <td>SPX:IND 
 30 |                 <br>
 31 |                     <strong>S&P 500 INDEX</strong>
 32 |                 </td>
 33 |                 <td>2,631.78</td>
 34 |                 <td class="red">-2.78</td>
 35 |                 <td class="red">-0.11%</td>
 36 |                 <td class="green">+1.68%</td>
 37 |                 <td class="green">+10.18%</td>
 38 |                 <td>9:34 AM</td>
 39 |             </tr>
 40 |             <tr class="data">
 41 |                 <td>CCMP:IND 
 42 |                 <br>
 43 |                     <strong>NASDAQ COMPOSITE INDEX</strong>
 44 |                 </td>
 45 |                 <td>7,003.78</td>
 46 |                 <td class="red">-3.61</td>
 47 |                 <td class="red">-0.05%</td>
 48 |                 <td class="green">+3.00%</td>
 49 |                 <td class="green">+16.24%</td>
 50 |                 <td>10:14 AM</td>
 51 |             </tr>
 52 |             <tr class="data">
 53 |                 <td>NYA:IND 
 54 |                 <br>
 55 |                     <strong>NYSE COMPOSITE INDEX</strong>
 56 |                 </td>
 57 |                 <td>12,517.86</td>
 58 |                 <td class="red">-3.86</td>
 59 |                 <td class="red">-0.03%</td>
 60 |                 <td class="green">+0.68%</td>
 61 |                 <td class="green">+7.98%</td>
 62 |                 <td>10:05 AM</td>
 63 |             </tr>
 64 |             <tr class="data">
 65 |                 <td>SPTSX:IND 
 66 |                 <br>
 67 |                     <strong>S&P/TSX COMPOSITE INDEX</strong>
 68 |                 </td>
 69 |                 <td>15,509.75</td>
 70 |                 <td class="red">-32.75</td>
 71 |                 <td class="red">-0.25%</td>
 72 |                 <td class="green">+1.38%</td>
 73 |                 <td class="green">+0.89%</td>
 74 |                 <td>03:05 PM</td>
 75 |             </tr>
 76 |             <tr class="data">
 77 |                 <td>INDU:IND 
 78 |                 <br>
 79 |                     <strong>JONES INDUS. AVG</strong>
 80 |                 </td>
 81 |                 <td>24,024.13</td>
 82 |                 <td class="red">-424.56</td>
 83 |                 <td class="red">-1.74%</td>
 84 |                 <td class="green">+2.09%</td>
 85 |                 <td class="green">+14.42%</td>
 86 |                 <td>4/24/2018</td>
 87 |             </tr>
 88 |         </table>
 89 |     </div>
 90 | </template>
 91 | 
 92 | <script>
 93 |     export default {
 94 |         
 95 |     }
 96 | </script>
 97 | 
 98 | 
 99 | <style scoped>
100 | 
101 | #argentina {
102 |     border-collapse: collapse;
103 |     width: 100%;
104 | }
105 | 
106 | hr {
107 |     border-top: 1px solid grey;
108 | }
109 | 
110 | #argentina td, #argentina th {
111 |     border-bottom: 1px dotted grey;
112 |     padding: 8px;
113 | }
114 | 
115 | 
116 | #argentina tr {
117 |     text-transform: uppercase;
118 |     font-family: BWHaasText-55Roman,"Helvetica Neue",Helvetica,Arial,sans-serif;
119 |     color: #555;
120 |     font-size: 0.85em;
121 |     font-weight: 300;
122 | }
123 | 
124 | #argentina strong {
125 |     color: black;
126 |     font-size: 1.15em;
127 | }
128 | 
129 | .red {
130 |     color: #ff433d;
131 | }
132 | 
133 | .green {
134 |     color: #1dcc92;
135 | }
136 | 
137 | #argentina th {
138 |     padding-top: 12px;
139 |     padding-bottom: 12px;
140 |     text-align: left;
141 |     background-color: transparent;
142 |     color: #555;
143 |     font-size: 1em;
144 |     font-weight: 500;
145 | }
146 | 
147 | </style>
148 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/EMEA/Content/UK.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <h3 class="heading-3 selected-tab">United Kingdom</h3>
  4 |         <hr>
  5 |         <table id="argentina">
  6 |             <tr class="header">
  7 |                 <th>Name</th>
  8 |                 <th>Value</th>
  9 |                 <th>Net Change</th>
 10 |                 <th>% Change</th>
 11 |                 <th>1 Month</th>
 12 |                 <th>1 Year</th>
 13 |                 <th>Time (Edit)</th>
 14 |                 <th class="data-graph">2 Day</th>
 15 |             </tr>
 16 |             <tr class="data">
 17 |                 <td>INDU:IND 
 18 |                 <br>
 19 |                     <strong>JONES INDUS. AVG</strong>
 20 |                 </td>
 21 |                 <td>24,024.13</td>
 22 |                 <td class="red">-424.56</td>
 23 |                 <td class="red">-1.74%</td>
 24 |                 <td class="green">+2.09%</td>
 25 |                 <td class="green">+14.42%</td>
 26 |                 <td>4/24/2018</td>
 27 |             </tr>
 28 |             <tr class="data">
 29 |                 <td>SPX:IND 
 30 |                 <br>
 31 |                     <strong>S&P 500 INDEX</strong>
 32 |                 </td>
 33 |                 <td>2,631.78</td>
 34 |                 <td class="red">-2.78</td>
 35 |                 <td class="red">-0.11%</td>
 36 |                 <td class="green">+1.68%</td>
 37 |                 <td class="green">+10.18%</td>
 38 |                 <td>9:34 AM</td>
 39 |             </tr>
 40 |             <tr class="data">
 41 |                 <td>CCMP:IND 
 42 |                 <br>
 43 |                     <strong>NASDAQ COMPOSITE INDEX</strong>
 44 |                 </td>
 45 |                 <td>7,003.78</td>
 46 |                 <td class="red">-3.61</td>
 47 |                 <td class="red">-0.05%</td>
 48 |                 <td class="green">+3.00%</td>
 49 |                 <td class="green">+16.24%</td>
 50 |                 <td>10:14 AM</td>
 51 |             </tr>
 52 |             <tr class="data">
 53 |                 <td>NYA:IND 
 54 |                 <br>
 55 |                     <strong>NYSE COMPOSITE INDEX</strong>
 56 |                 </td>
 57 |                 <td>12,517.86</td>
 58 |                 <td class="red">-3.86</td>
 59 |                 <td class="red">-0.03%</td>
 60 |                 <td class="green">+0.68%</td>
 61 |                 <td class="green">+7.98%</td>
 62 |                 <td>10:05 AM</td>
 63 |             </tr>
 64 |             <tr class="data">
 65 |                 <td>SPTSX:IND 
 66 |                 <br>
 67 |                     <strong>S&P/TSX COMPOSITE INDEX</strong>
 68 |                 </td>
 69 |                 <td>15,509.75</td>
 70 |                 <td class="red">-32.75</td>
 71 |                 <td class="red">-0.25%</td>
 72 |                 <td class="green">+1.38%</td>
 73 |                 <td class="green">+0.89%</td>
 74 |                 <td>03:05 PM</td>
 75 |             </tr>
 76 |             <tr class="data">
 77 |                 <td>INDU:IND 
 78 |                 <br>
 79 |                     <strong>JONES INDUS. AVG</strong>
 80 |                 </td>
 81 |                 <td>24,024.13</td>
 82 |                 <td class="red">-424.56</td>
 83 |                 <td class="red">-1.74%</td>
 84 |                 <td class="green">+2.09%</td>
 85 |                 <td class="green">+14.42%</td>
 86 |                 <td>4/24/2018</td>
 87 |             </tr>
 88 |         </table>
 89 |     </div>
 90 | </template>
 91 | 
 92 | <script>
 93 |     export default {
 94 |         
 95 |     }
 96 | </script>
 97 | 
 98 | 
 99 | <style scoped>
100 | 
101 | #argentina {
102 |     border-collapse: collapse;
103 |     width: 100%;
104 | }
105 | 
106 | hr {
107 |     border-top: 1px solid grey;
108 | }
109 | 
110 | #argentina td, #argentina th {
111 |     border-bottom: 1px dotted grey;
112 |     padding: 8px;
113 | }
114 | 
115 | 
116 | #argentina tr {
117 |     text-transform: uppercase;
118 |     font-family: BWHaasText-55Roman,"Helvetica Neue",Helvetica,Arial,sans-serif;
119 |     color: #555;
120 |     font-size: 0.85em;
121 |     font-weight: 300;
122 | }
123 | 
124 | #argentina strong {
125 |     color: black;
126 |     font-size: 1.15em;
127 | }
128 | 
129 | .red {
130 |     color: #ff433d;
131 | }
132 | 
133 | .green {
134 |     color: #1dcc92;
135 | }
136 | 
137 | #argentina th {
138 |     padding-top: 12px;
139 |     padding-bottom: 12px;
140 |     text-align: left;
141 |     background-color: transparent;
142 |     color: #555;
143 |     font-size: 1em;
144 |     font-weight: 500;
145 | }
146 | 
147 | </style>
148 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/Americas/Content/Argentina.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <h3 class="heading-3 selected-tab">Argentina</h3>
  4 |         <hr>
  5 |         <table id="argentina">
  6 |             <tr class="header">
  7 |                 <th>Name</th>
  8 |                 <th>Value</th>
  9 |                 <th>Net Change</th>
 10 |                 <th>% Change</th>
 11 |                 <th>1 Month</th>
 12 |                 <th>1 Year</th>
 13 |                 <th>Time (Edit)</th>
 14 |                 <th class="data-graph">2 Day</th>
 15 |             </tr>
 16 |             <tr class="data">
 17 |                 <td>INDU:IND 
 18 |                 <br>
 19 |                     <strong>JONES INDUS. AVG</strong>
 20 |                 </td>
 21 |                 <td>24,024.13</td>
 22 |                 <td class="red">-424.56</td>
 23 |                 <td class="red">-1.74%</td>
 24 |                 <td class="green">+2.09%</td>
 25 |                 <td class="green">+14.42%</td>
 26 |                 <td>4/24/2018</td>
 27 |             </tr>
 28 |             <tr class="data">
 29 |                 <td>SPX:IND 
 30 |                 <br>
 31 |                     <strong>S&P 500 INDEX</strong>
 32 |                 </td>
 33 |                 <td>2,631.78</td>
 34 |                 <td class="red">-2.78</td>
 35 |                 <td class="red">-0.11%</td>
 36 |                 <td class="green">+1.68%</td>
 37 |                 <td class="green">+10.18%</td>
 38 |                 <td>9:34 AM</td>
 39 |             </tr>
 40 |             <tr class="data">
 41 |                 <td>CCMP:IND 
 42 |                 <br>
 43 |                     <strong>NASDAQ COMPOSITE INDEX</strong>
 44 |                 </td>
 45 |                 <td>7,003.78</td>
 46 |                 <td class="red">-3.61</td>
 47 |                 <td class="red">-0.05%</td>
 48 |                 <td class="green">+3.00%</td>
 49 |                 <td class="green">+16.24%</td>
 50 |                 <td>10:14 AM</td>
 51 |             </tr>
 52 |             <tr class="data">
 53 |                 <td>NYA:IND 
 54 |                 <br>
 55 |                     <strong>NYSE COMPOSITE INDEX</strong>
 56 |                 </td>
 57 |                 <td>12,517.86</td>
 58 |                 <td class="red">-3.86</td>
 59 |                 <td class="red">-0.03%</td>
 60 |                 <td class="green">+0.68%</td>
 61 |                 <td class="green">+7.98%</td>
 62 |                 <td>10:05 AM</td>
 63 |             </tr>
 64 |             <tr class="data">
 65 |                 <td>SPTSX:IND 
 66 |                 <br>
 67 |                     <strong>S&P/TSX COMPOSITE INDEX</strong>
 68 |                 </td>
 69 |                 <td>15,509.75</td>
 70 |                 <td class="red">-32.75</td>
 71 |                 <td class="red">-0.25%</td>
 72 |                 <td class="green">+1.38%</td>
 73 |                 <td class="green">+0.89%</td>
 74 |                 <td>03:05 PM</td>
 75 |             </tr>
 76 |             <tr class="data">
 77 |                 <td>INDU:IND 
 78 |                 <br>
 79 |                     <strong>JONES INDUS. AVG</strong>
 80 |                 </td>
 81 |                 <td>24,024.13</td>
 82 |                 <td class="red">-424.56</td>
 83 |                 <td class="red">-1.74%</td>
 84 |                 <td class="green">+2.09%</td>
 85 |                 <td class="green">+14.42%</td>
 86 |                 <td>4/24/2018</td>
 87 |             </tr>
 88 |         </table>
 89 |     </div>
 90 | </template>
 91 | 
 92 | <script>
 93 |     export default {
 94 |         
 95 |     }
 96 | </script>
 97 | 
 98 | 
 99 | <style scoped>
100 | 
101 | #argentina {
102 |     border-collapse: collapse;
103 |     width: 100%;
104 | }
105 | 
106 | hr {
107 |     border-top: 1px solid grey;
108 | }
109 | 
110 | #argentina td, #argentina th {
111 |     border-bottom: 1px dotted grey;
112 |     padding: 8px;
113 | }
114 | 
115 | 
116 | #argentina tr {
117 |     text-transform: uppercase;
118 |     font-family: BWHaasText-55Roman,"Helvetica Neue",Helvetica,Arial,sans-serif;
119 |     color: #555;
120 |     font-size: 0.85em;
121 |     font-weight: 300;
122 | }
123 | 
124 | #argentina strong {
125 |     color: black;
126 |     font-size: 1.15em;
127 | }
128 | 
129 | .red {
130 |     color: #ff433d;
131 | }
132 | 
133 | .green {
134 |     color: #1dcc92;
135 | }
136 | 
137 | #argentina th {
138 |     padding-top: 12px;
139 |     padding-bottom: 12px;
140 |     text-align: left;
141 |     background-color: transparent;
142 |     color: #555;
143 |     font-size: 1em;
144 |     font-weight: 500;
145 | }
146 | 
147 | </style>
148 | 


--------------------------------------------------------------------------------
/src/components/Main/Content/Americas/Content/USA.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <h3 class="heading-3 selected-tab">United States</h3>
  4 |         <hr>
  5 |         <table id="all-americas">
  6 |             <tr class="header">
  7 |                 <th>Name</th>
  8 |                 <th>Value</th>
  9 |                 <th>Net Change</th>
 10 |                 <th>% Change</th>
 11 |                 <th>1 Month</th>
 12 |                 <th>1 Year</th>
 13 |                 <th>Time (Edit)</th>
 14 |                 <th class="data-graph">2 Day</th>
 15 |             </tr>
 16 |             <tr class="data">
 17 |                 <td>INDU:IND 
 18 |                 <br>
 19 |                     <strong>JONES INDUS. AVG</strong>
 20 |                 </td>
 21 |                 <td>24,024.13</td>
 22 |                 <td class="red">-424.56</td>
 23 |                 <td class="red">-1.74%</td>
 24 |                 <td class="green">+2.09%</td>
 25 |                 <td class="green">+14.42%</td>
 26 |                 <td>4/24/2018</td>
 27 |             </tr>
 28 |             <tr class="data">
 29 |                 <td>SPX:IND 
 30 |                 <br>
 31 |                     <strong>S&P 500 INDEX</strong>
 32 |                 </td>
 33 |                 <td>2,631.78</td>
 34 |                 <td class="red">-2.78</td>
 35 |                 <td class="red">-0.11%</td>
 36 |                 <td class="green">+1.68%</td>
 37 |                 <td class="green">+10.18%</td>
 38 |                 <td>9:34 AM</td>
 39 |             </tr>
 40 |             <tr class="data">
 41 |                 <td>CCMP:IND 
 42 |                 <br>
 43 |                     <strong>NASDAQ COMPOSITE INDEX</strong>
 44 |                 </td>
 45 |                 <td>7,003.78</td>
 46 |                 <td class="red">-3.61</td>
 47 |                 <td class="red">-0.05%</td>
 48 |                 <td class="green">+3.00%</td>
 49 |                 <td class="green">+16.24%</td>
 50 |                 <td>10:14 AM</td>
 51 |             </tr>
 52 |             <tr class="data">
 53 |                 <td>NYA:IND 
 54 |                 <br>
 55 |                     <strong>NYSE COMPOSITE INDEX</strong>
 56 |                 </td>
 57 |                 <td>12,517.86</td>
 58 |                 <td class="red">-3.86</td>
 59 |                 <td class="red">-0.03%</td>
 60 |                 <td class="green">+0.68%</td>
 61 |                 <td class="green">+7.98%</td>
 62 |                 <td>10:05 AM</td>
 63 |             </tr>
 64 |             <tr class="data">
 65 |                 <td>SPTSX:IND 
 66 |                 <br>
 67 |                     <strong>S&P/TSX COMPOSITE INDEX</strong>
 68 |                 </td>
 69 |                 <td>15,509.75</td>
 70 |                 <td class="red">-32.75</td>
 71 |                 <td class="red">-0.25%</td>
 72 |                 <td class="green">+1.38%</td>
 73 |                 <td class="green">+0.89%</td>
 74 |                 <td>03:05 PM</td>
 75 |             </tr>
 76 |             <tr class="data">
 77 |                 <td>INDU:IND 
 78 |                 <br>
 79 |                     <strong>JONES INDUS. AVG</strong>
 80 |                 </td>
 81 |                 <td>24,024.13</td>
 82 |                 <td class="red">-424.56</td>
 83 |                 <td class="red">-1.74%</td>
 84 |                 <td class="green">+2.09%</td>
 85 |                 <td class="green">+14.42%</td>
 86 |                 <td>4/24/2018</td>
 87 |             </tr>
 88 |             <tr class="data">
 89 |                 <td>SPX:IND 
 90 |                 <br>
 91 |                     <strong>S&P 500 INDEX</strong>
 92 |                 </td>
 93 |                 <td>2,631.78</td>
 94 |                 <td class="red">-2.78</td>
 95 |                 <td class="red">-0.11%</td>
 96 |                 <td class="green">+1.68%</td>
 97 |                 <td class="green">+10.18%</td>
 98 |                 <td>9:34 AM</td>
 99 |             </tr>
100 |             <tr class="data">
101 |                 <td>INDU:IND 
102 |                 <br>
103 |                     <strong>JONES INDUS. AVG</strong>
104 |                 </td>
105 |                 <td>24,024.13</td>
106 |                 <td class="red">-424.56</td>
107 |                 <td class="red">-1.74%</td>
108 |                 <td class="green">+2.09%</td>
109 |                 <td class="green">+14.42%</td>
110 |                 <td>4/24/2018</td>
111 |             </tr>
112 |             <tr class="data">
113 |                 <td>SPX:IND 
114 |                 <br>
115 |                     <strong>S&P 500 INDEX</strong>
116 |                 </td>
117 |                 <td>2,631.78</td>
118 |                 <td class="red">-2.78</td>
119 |                 <td class="red">-0.11%</td>
120 |                 <td class="green">+1.68%</td>
121 |                 <td class="green">+10.18%</td>
122 |                 <td>9:34 AM</td>
123 |             </tr>
124 |             <tr class="data">
125 |                 <td>CCMP:IND 
126 |                 <br>
127 |                     <strong>NASDAQ COMPOSITE INDEX</strong>
128 |                 </td>
129 |                 <td>7,003.78</td>
130 |                 <td class="red">-3.61</td>
131 |                 <td class="red">-0.05%</td>
132 |                 <td class="green">+3.00%</td>
133 |                 <td class="green">+16.24%</td>
134 |                 <td>10:14 AM</td>
135 |             </tr>
136 |             <tr class="data">
137 |                 <td>NYA:IND 
138 |                 <br>
139 |                     <strong>NYSE COMPOSITE INDEX</strong>
140 |                 </td>
141 |                 <td>12,517.86</td>
142 |                 <td class="red">-3.86</td>
143 |                 <td class="red">-0.03%</td>
144 |                 <td class="green">+0.68%</td>
145 |                 <td class="green">+7.98%</td>
146 |                 <td>10:05 AM</td>
147 |             </tr>
148 |             <tr class="data">
149 |                 <td>SPTSX:IND 
150 |                 <br>
151 |                     <strong>S&P/TSX COMPOSITE INDEX</strong>
152 |                 </td>
153 |                 <td>15,509.75</td>
154 |                 <td class="red">-32.75</td>
155 |                 <td class="red">-0.25%</td>
156 |                 <td class="green">+1.38%</td>
157 |                 <td class="green">+0.89%</td>
158 |                 <td>03:05 PM</td>
159 |             </tr>
160 |             <tr class="data">
161 |                 <td>INDU:IND 
162 |                 <br>
163 |                     <strong>JONES INDUS. AVG</strong>
164 |                 </td>
165 |                 <td>24,024.13</td>
166 |                 <td class="red">-424.56</td>
167 |                 <td class="red">-1.74%</td>
168 |                 <td class="green">+2.09%</td>
169 |                 <td class="green">+14.42%</td>
170 |                 <td>4/24/2018</td>
171 |             </tr>
172 |             <tr class="data">
173 |                 <td>SPX:IND 
174 |                 <br>
175 |                     <strong>S&P 500 INDEX</strong>
176 |                 </td>
177 |                 <td>2,631.78</td>
178 |                 <td class="red">-2.78</td>
179 |                 <td class="red">-0.11%</td>
180 |                 <td class="green">+1.68%</td>
181 |                 <td class="green">+10.18%</td>
182 |                 <td>9:34 AM</td>
183 |             </tr>
184 |         </table>
185 |     </div>
186 | </template>
187 | 
188 | <script>
189 |     export default {
190 |         
191 |     }
192 | </script>
193 | 
194 | 
195 | <style scoped>
196 | 
197 | #all-americas {
198 |     border-collapse: collapse;
199 |     width: 100%;
200 | }
201 | 
202 | hr {
203 |     border-top: 1px solid grey;
204 | }
205 | 
206 | #all-americas td, #all-americas th {
207 |     border-bottom: 1px dotted grey;
208 |     padding: 8px;
209 | }
210 | 
211 | 
212 | #all-americas tr {
213 |     text-transform: uppercase;
214 |     font-family: BWHaasText-55Roman,"Helvetica Neue",Helvetica,Arial,sans-serif;
215 |     color: #555;
216 |     font-size: 0.85em;
217 |     font-weight: 300;
218 | }
219 | 
220 | #all-americas strong {
221 |     color: black;
222 |     font-size: 1.15em;
223 | }
224 | 
225 | .red {
226 |     color: #ff433d;
227 | }
228 | 
229 | .green {
230 |     color: #1dcc92;
231 | }
232 | 
233 | #all-americas th {
234 |     padding-top: 12px;
235 |     padding-bottom: 12px;
236 |     text-align: left;
237 |     background-color: transparent;
238 |     color: #555;
239 |     font-size: 1em;
240 |     font-weight: 500;
241 | }
242 | 
243 | </style>
244 | 


--------------------------------------------------------------------------------
/src/Assets/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
  2 | /**
  3 |  * 1. Set default font family to sans-serif.
  4 |  * 2. Prevent iOS and IE text size adjust after device orientation change,
  5 |  *    without disabling user zoom.
  6 |  */
  7 | html {
  8 |   font-family: sans-serif;
  9 |   /* 1 */
 10 |   -ms-text-size-adjust: 100%;
 11 |   /* 2 */
 12 |   -webkit-text-size-adjust: 100%;
 13 |   /* 2 */
 14 | }
 15 | /**
 16 |  * Remove default margin.
 17 |  */
 18 | body {
 19 |   margin: 0;
 20 | }
 21 | /* HTML5 display definitions
 22 |    ========================================================================== */
 23 | /**
 24 |  * Correct `block` display not defined for any HTML5 element in IE 8/9.
 25 |  * Correct `block` display not defined for `details` or `summary` in IE 10/11
 26 |  * and Firefox.
 27 |  * Correct `block` display not defined for `main` in IE 11.
 28 |  */
 29 | article,
 30 | aside,
 31 | details,
 32 | figcaption,
 33 | figure,
 34 | footer,
 35 | header,
 36 | hgroup,
 37 | main,
 38 | menu,
 39 | nav,
 40 | section,
 41 | summary {
 42 |   display: block;
 43 | }
 44 | /**
 45 |  * 1. Correct `inline-block` display not defined in IE 8/9.
 46 |  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 47 |  */
 48 | audio,
 49 | canvas,
 50 | progress,
 51 | video {
 52 |   display: inline-block;
 53 |   /* 1 */
 54 |   vertical-align: baseline;
 55 |   /* 2 */
 56 | }
 57 | /**
 58 |  * Prevent modern browsers from displaying `audio` without controls.
 59 |  * Remove excess height in iOS 5 devices.
 60 |  */
 61 | audio:not([controls]) {
 62 |   display: none;
 63 |   height: 0;
 64 | }
 65 | /**
 66 |  * Address `[hidden]` styling not present in IE 8/9/10.
 67 |  * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 68 |  */
 69 | [hidden],
 70 | template {
 71 |   display: none;
 72 | }
 73 | /* Links
 74 |    ========================================================================== */
 75 | /**
 76 |  * Remove the gray background color from active links in IE 10.
 77 |  */
 78 | a {
 79 |   background-color: transparent;
 80 | }
 81 | /**
 82 |  * Improve readability of focused elements when they are also in an
 83 |  * active/hover state.
 84 |  */
 85 | a:active,
 86 | a:hover {
 87 |   outline: 0;
 88 | }
 89 | /* Text-level semantics
 90 |    ========================================================================== */
 91 | /**
 92 |  * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 93 |  */
 94 | abbr[title] {
 95 |   border-bottom: 1px dotted;
 96 | }
 97 | /**
 98 |  * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 99 |  */
100 | b,
101 | strong {
102 |   font-weight: bold;
103 | }
104 | /**
105 |  * Address styling not present in Safari and Chrome.
106 |  */
107 | dfn {
108 |   font-style: italic;
109 | }
110 | /**
111 |  * Address variable `h1` font-size and margin within `section` and `article`
112 |  * contexts in Firefox 4+, Safari, and Chrome.
113 |  */
114 | h1 {
115 |   font-size: 2em;
116 |   margin: 0.67em 0;
117 | }
118 | /**
119 |  * Address styling not present in IE 8/9.
120 |  */
121 | mark {
122 |   background: #ff0;
123 |   color: #000;
124 | }
125 | /**
126 |  * Address inconsistent and variable font size in all browsers.
127 |  */
128 | small {
129 |   font-size: 80%;
130 | }
131 | /**
132 |  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
133 |  */
134 | sub,
135 | sup {
136 |   font-size: 75%;
137 |   line-height: 0;
138 |   position: relative;
139 |   vertical-align: baseline;
140 | }
141 | sup {
142 |   top: -0.5em;
143 | }
144 | sub {
145 |   bottom: -0.25em;
146 | }
147 | /* Embedded content
148 |    ========================================================================== */
149 | /**
150 |  * Remove border when inside `a` element in IE 8/9/10.
151 |  */
152 | img {
153 |   border: 0;
154 | }
155 | /**
156 |  * Correct overflow not hidden in IE 9/10/11.
157 |  */
158 | svg:not(:root) {
159 |   overflow: hidden;
160 | }
161 | /* Grouping content
162 |    ========================================================================== */
163 | /**
164 |  * Address margin not present in IE 8/9 and Safari.
165 |  */
166 | figure {
167 |   margin: 1em 40px;
168 | }
169 | /**
170 |  * Address differences between Firefox and other browsers.
171 |  */
172 | hr {
173 |   box-sizing: content-box;
174 |   height: 0;
175 | }
176 | /**
177 |  * Contain overflow in all browsers.
178 |  */
179 | pre {
180 |   overflow: auto;
181 | }
182 | /**
183 |  * Address odd `em`-unit font size rendering in all browsers.
184 |  */
185 | code,
186 | kbd,
187 | pre,
188 | samp {
189 |   font-family: monospace, monospace;
190 |   font-size: 1em;
191 | }
192 | /* Forms
193 |    ========================================================================== */
194 | /**
195 |  * Known limitation: by default, Chrome and Safari on OS X allow very limited
196 |  * styling of `select`, unless a `border` property is set.
197 |  */
198 | /**
199 |  * 1. Correct color not being inherited.
200 |  *    Known issue: affects color of disabled elements.
201 |  * 2. Correct font properties not being inherited.
202 |  * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
203 |  */
204 | button,
205 | input,
206 | optgroup,
207 | select,
208 | textarea {
209 |   color: inherit;
210 |   /* 1 */
211 |   font: inherit;
212 |   /* 2 */
213 |   margin: 0;
214 |   /* 3 */
215 | }
216 | /**
217 |  * Address `overflow` set to `hidden` in IE 8/9/10/11.
218 |  */
219 | button {
220 |   overflow: visible;
221 | }
222 | /**
223 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
224 |  * All other form control elements do not inherit `text-transform` values.
225 |  * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
226 |  * Correct `select` style inheritance in Firefox.
227 |  */
228 | button,
229 | select {
230 |   text-transform: none;
231 | }
232 | /**
233 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
234 |  *    and `video` controls.
235 |  * 2. Correct inability to style clickable `input` types in iOS.
236 |  * 3. Improve usability and consistency of cursor style between image-type
237 |  *    `input` and others.
238 |  * 4. CUSTOM FOR WEBFLOW: Removed the input[type="submit"] selector to reduce
239 |  *    specificity and defer to the .w-button selector
240 |  */
241 | button,
242 | html input[type="button"],
243 | input[type="reset"] {
244 |   -webkit-appearance: button;
245 |   /* 2 */
246 |   cursor: pointer;
247 |   /* 3 */
248 | }
249 | /**
250 |  * Re-set default cursor for disabled elements.
251 |  */
252 | button[disabled],
253 | html input[disabled] {
254 |   cursor: default;
255 | }
256 | /**
257 |  * Remove inner padding and border in Firefox 4+.
258 |  */
259 | button::-moz-focus-inner,
260 | input::-moz-focus-inner {
261 |   border: 0;
262 |   padding: 0;
263 | }
264 | /**
265 |  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
266 |  * the UA stylesheet.
267 |  */
268 | input {
269 |   line-height: normal;
270 | }
271 | /**
272 |  * It's recommended that you don't attempt to style these elements.
273 |  * Firefox's implementation doesn't respect box-sizing, padding, or width.
274 |  *
275 |  * 1. Address box sizing set to `content-box` in IE 8/9/10.
276 |  * 2. Remove excess padding in IE 8/9/10.
277 |  */
278 | input[type="checkbox"],
279 | input[type="radio"] {
280 |   box-sizing: border-box;
281 |   /* 1 */
282 |   padding: 0;
283 |   /* 2 */
284 | }
285 | /**
286 |  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
287 |  * `font-size` values of the `input`, it causes the cursor style of the
288 |  * decrement button to change from `default` to `text`.
289 |  */
290 | input[type="number"]::-webkit-inner-spin-button,
291 | input[type="number"]::-webkit-outer-spin-button {
292 |   height: auto;
293 | }
294 | /**
295 |  * 1. CUSTOM FOR WEBFLOW: changed from `textfield` to `none` to normalize iOS rounded input
296 |  * 2. CUSTOM FOR WEBFLOW: box-sizing: content-box rule removed
297 |  *    (similar to normalize.css >=4.0.0)
298 |  */
299 | input[type="search"] {
300 |   -webkit-appearance: none;
301 |   /* 1 */
302 | }
303 | /**
304 |  * Remove inner padding and search cancel button in Safari and Chrome on OS X.
305 |  * Safari (but not Chrome) clips the cancel button when the search input has
306 |  * padding (and `textfield` appearance).
307 |  */
308 | input[type="search"]::-webkit-search-cancel-button,
309 | input[type="search"]::-webkit-search-decoration {
310 |   -webkit-appearance: none;
311 | }
312 | /**
313 |  * Define consistent border, margin, and padding.
314 |  */
315 | fieldset {
316 |   border: 1px solid #c0c0c0;
317 |   margin: 0 2px;
318 |   padding: 0.35em 0.625em 0.75em;
319 | }
320 | /**
321 |  * 1. Correct `color` not being inherited in IE 8/9/10/11.
322 |  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
323 |  */
324 | legend {
325 |   border: 0;
326 |   /* 1 */
327 |   padding: 0;
328 |   /* 2 */
329 | }
330 | /**
331 |  * Remove default vertical scrollbar in IE 8/9/10/11.
332 |  */
333 | textarea {
334 |   overflow: auto;
335 | }
336 | /**
337 |  * Don't inherit the `font-weight` (applied by a rule above).
338 |  * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
339 |  */
340 | optgroup {
341 |   font-weight: bold;
342 | }
343 | /* Tables
344 |    ========================================================================== */
345 | /**
346 |  * Remove most spacing between table cells.
347 |  */
348 | table {
349 |   border-collapse: collapse;
350 |   border-spacing: 0;
351 | }
352 | td,
353 | th {
354 |   padding: 0;
355 | }
356 | 


--------------------------------------------------------------------------------
/src/Assets/custom.css:
--------------------------------------------------------------------------------
  1 | .top-nav {
  2 |   height: 2.5em;
  3 |   background-color: transparent;
  4 | }
  5 | 
  6 | .link {
  7 |   display: inline-block;
  8 |   margin-top: 9px;
  9 |   margin-right: 10px;
 10 |   padding-top: 0px;
 11 |   font-family: Montserrat, sans-serif;
 12 |   color: #fff;
 13 |   font-size: 12px;
 14 |   text-decoration: none;
 15 | }
 16 | 
 17 | .link.link-br {
 18 |   padding-right: 10px;
 19 |   border-width: 1px;
 20 |   border-color: #fff;
 21 |   border-right-style: solid;
 22 |   font-family: Montserrat, sans-serif;
 23 |   font-size: 12px;
 24 | }
 25 | 
 26 | .nav-menu {
 27 |   top: 0px;
 28 |   right: 0px;
 29 |   bottom: 0px;
 30 |   display: inline-block;
 31 |   height: 4em;
 32 |   margin-right: 30px;
 33 |   padding-right: 0px;
 34 |   padding-bottom: 0px;
 35 |   float: right;
 36 | }
 37 | 
 38 | .menu-bar-items {
 39 |   display: block;
 40 |   margin-top: 0px;
 41 |   margin-right: auto;
 42 |   margin-left: auto;
 43 |   float: right;
 44 |   clear: right;
 45 |   font-family: Lato, sans-serif;
 46 |   color: #fff;
 47 |   font-size: 11px;
 48 |   line-height: 15px;
 49 |   font-weight: 400;
 50 | }
 51 | 
 52 | .container {
 53 |   display: inline-block;
 54 | }
 55 | 
 56 | .container.logo {
 57 |   display: block;
 58 |   margin-right: auto;
 59 |   margin-left: auto;
 60 |   padding-right: 0px;
 61 |   padding-left: 10px;
 62 |   -webkit-box-pack: start;
 63 |   -webkit-justify-content: flex-start;
 64 |   -ms-flex-pack: start;
 65 |   justify-content: flex-start;
 66 | }
 67 | 
 68 | .link-block {
 69 |   margin-left: 30px;
 70 | }
 71 | 
 72 | .container-2 {
 73 |   display: block;
 74 |   margin-right: auto;
 75 |   margin-left: auto;
 76 |   padding-left: 0px;
 77 | }
 78 | 
 79 | .link-block-2 {
 80 |   width: 5em;
 81 |   height: 4em;
 82 | }
 83 | 
 84 | .div-block {
 85 |   display: inline-block;
 86 |   width: 36em;
 87 |   height: 4em;
 88 |   margin-left: 85px;
 89 | }
 90 | 
 91 | .main-nav-link {
 92 |   display: inline-block;
 93 |   margin-top: 20px;
 94 |   margin-right: 30px;
 95 |   margin-left: auto;
 96 |   font-family: Lato, sans-serif;
 97 |   color: hsla(0, 0%, 100%, .5);
 98 |   font-size: 13px;
 99 |   font-weight: 900;
100 |   text-decoration: none;
101 | }
102 | 
103 | .unordered-list {
104 |   margin-top: 12px;
105 |   margin-right: auto;
106 |   padding-left: 0px;
107 | }
108 | 
109 | .brand {
110 |   display: block;
111 |   margin-right: 10px;
112 | }
113 | 
114 | .div-block-2 {
115 |   display: inline-block;
116 |   width: 23em;
117 |   padding-right: 0px;
118 | }
119 | 
120 | .section-front-box {
121 |   display: block;
122 |   height: 1em;
123 |   margin-top: 15px;
124 |   background-color: #fb8b1e;
125 | }
126 | 
127 | .section-front-box.light-box {
128 |   background-color: hsla(28, 93%, 72%, .5);
129 | }
130 | 
131 | .heading {
132 |   margin-top: 10px;
133 |   margin-bottom: 5px;
134 |   color: #fb8b1e;
135 |   font-weight: 500;
136 | }
137 | 
138 | .heading-2 {
139 |   margin-top: 10px;
140 | }
141 | 
142 | .div-block-3 {
143 |   display: inline-block;
144 |   width: 59.5em;
145 |   margin-top: 0px;
146 |   margin-left: 0px;
147 |   float: right;
148 |   clear: none;
149 | }
150 | 
151 | .text-block {
152 |   display: inline-block;
153 |   margin-top: 15px;
154 |   margin-left: 0px;
155 |   padding: 5px 10px;
156 |   float: right;
157 |   background-color: #000;
158 |   font-family: Montserrat, sans-serif;
159 |   color: #fff;
160 |   font-size: 11px;
161 |   font-weight: 300;
162 | }
163 | 
164 | .heading-3 {
165 |   display: inline-block;
166 |   margin-top: 10px;
167 |   margin-right: 39px;
168 | }
169 | 
170 | .heading-3.main-tabs {
171 |   position: static;
172 |   top: 0px;
173 |   right: 0px;
174 |   bottom: 0px;
175 |   display: inline;
176 |   overflow: visible;
177 |   width: 5em;
178 |   margin-right: 5.7em;
179 |   float: none;
180 |   -webkit-box-orient: horizontal;
181 |   -webkit-box-direction: normal;
182 |   -webkit-flex-direction: row;
183 |   -ms-flex-direction: row;
184 |   flex-direction: row;
185 |   -webkit-box-pack: start;
186 |   -webkit-justify-content: flex-start;
187 |   -ms-flex-pack: start;
188 |   justify-content: flex-start;
189 |   -webkit-box-align: center;
190 |   -webkit-align-items: center;
191 |   -ms-flex-align: center;
192 |   align-items: center;
193 |   border-bottom: 1px solid #000;
194 |   font-family: 'Droid Serif', serif;
195 |   font-size: 20.8px;
196 |   line-height: 30px;
197 |   font-weight: 700;
198 | }
199 | 
200 | .heading-3.selected-tab {
201 |   font-family: Merriweather, serif;
202 |   font-weight: 900;
203 | }
204 | 
205 | .div-block-4 {
206 |   margin-top: 0px;
207 | }
208 | 
209 | .div-block-4.main-tab-div {
210 |   margin-top: 50px;
211 | }
212 | 
213 | .div-block-5 {
214 |   height: 1.5em;
215 |   margin-top: 25px;
216 | }
217 | 
218 | .div-block-5.pattern-div {
219 |   background-color: hsla(28, 93%, 72%, .5);
220 | }
221 | 
222 | .pattern-box-border {
223 |   margin-top: 35px;
224 |   border-style: solid;
225 |   border-width: 18px;
226 |   border-color: hsla(28, 93%, 72%, .5);
227 | }
228 | 
229 | .pattern-box-border.chart-box {
230 |   margin-top: 20px;
231 | }
232 | 
233 | .text-field {
234 |   padding-right: 30px;
235 |   padding-left: 30px;
236 |   font-size: 1.5rem;
237 | }
238 | 
239 | .text-field.quote-search {
240 |   margin-right: 0px;
241 |   padding-right: 0px;
242 |   padding-left: 0px;
243 |   float: none;
244 |   border-style: none;
245 |   font-family: Lato, sans-serif;
246 |   color: #fb8b1e;
247 |   font-style: normal;
248 |   font-weight: 700;
249 |   text-align: left;
250 | }
251 | 
252 | .div-block-6 {
253 |   display: block;
254 |   margin: 15px;
255 | }
256 | 
257 | .display-block {
258 |   margin-top: 0px;
259 | }
260 | 
261 | .div-block-7 {
262 |   width: 15em;
263 |   height: 3em;
264 |   border: 1px solid #000;
265 | }
266 | 
267 | .div-block-7.time-frame-box {
268 |   display: inline-block;
269 |   width: auto;
270 |   height: 2.6em;
271 |   margin-right: 15px;
272 |   -webkit-box-pack: start;
273 |   -webkit-justify-content: flex-start;
274 |   -ms-flex-pack: start;
275 |   justify-content: flex-start;
276 |   border-color: #cacaca;
277 | }
278 | 
279 | .div-block-7.time-frame-box.time-frame-box-two {
280 |   width: 10em;
281 |   margin-top: 7px;
282 |   margin-bottom: 9px;
283 | }
284 | 
285 | .div-block-7.time-frame-box.time-frame-box-two.time-frame-box-three {
286 |   width: 8em;
287 | }
288 | 
289 | .div-block-7.time-frame-box.time-frame-box-two.input-box {
290 |   width: 11.5em;
291 | }
292 | 
293 | .div-block-8 {
294 |   height: 25em;
295 | }
296 | 
297 | .div-block-9 {
298 |   position: static;
299 |   top: 0px;
300 |   right: 0px;
301 |   display: inline-block;
302 |   width: 1em;
303 |   height: 1em;
304 |   margin-bottom: -39px;
305 |   padding-bottom: 24px;
306 |   float: right;
307 |   clear: right;
308 |   -webkit-box-align: stretch;
309 |   -webkit-align-items: stretch;
310 |   -ms-flex-align: stretch;
311 |   align-items: stretch;
312 | }
313 | 
314 | .latest-list {
315 |   margin-top: 10px;
316 |   padding-left: 0px;
317 |   list-style-type: none;
318 | }
319 | 
320 | .latest-list-item-time {
321 |   background-color: transparent;
322 |   font-family: Lato, sans-serif;
323 |   color: #818181;
324 |   font-size: 0.63rem;
325 |   font-weight: 300;
326 |   text-transform: none;
327 | }
328 | 
329 | .div-block-10 {
330 |   display: block;
331 | }
332 | 
333 | .heading-4 {
334 |   margin-top: 5px;
335 |   margin-bottom: 5px;
336 |   font-family: Exo, sans-serif;
337 |   font-weight: 800;
338 | }
339 | 
340 | .list-item {
341 |   margin-bottom: 10px;
342 |   border-style: dotted dotted dotted none;
343 |   border-width: 0px 0px 0.5px;
344 |   border-color: #000 #000 #aaa;
345 | }
346 | 
347 | .table-div {
348 |   margin-top: 20px;
349 | }
350 | 
351 | .footer {
352 |   display: block;
353 |   margin-top: 10px;
354 |   margin-bottom: 10px;
355 |   border: 1px none #000;
356 | }
357 | 
358 | .footer-container {
359 |   margin-top: 20px;
360 |   border-top: 1px solid #000;
361 | }
362 | 
363 | .main-body {
364 |   /* border-bottom: 1px solid #000; */
365 | }
366 | 
367 | .container-3 {
368 |   margin-top: 0px;
369 |   margin-bottom: 0px;
370 | }
371 | 
372 | .div-block-11 {
373 |   border-style: none;
374 | }
375 | 
376 | .div-block-11.footer-div.footer-left {
377 |   float: left;
378 | }
379 | 
380 | .div-block-11.footer-div.footer-right {
381 |   float: right;
382 | }
383 | 
384 | .footer-item {
385 |   padding-right: 15px;
386 |   font-family: Lato, sans-serif;
387 |   color: #747474;
388 |   font-size: 12px;
389 |   font-weight: 300;
390 |   text-decoration: none;
391 | }
392 | 
393 | .footer-item.footer-item-two {
394 |   position: static;
395 |   top: 0px;
396 |   right: 0px;
397 |   display: block;
398 |   float: right;
399 |   clear: none;
400 |   -webkit-justify-content: space-around;
401 |   -ms-flex-pack: distribute;
402 |   justify-content: space-around;
403 |   -webkit-box-align: stretch;
404 |   -webkit-align-items: stretch;
405 |   -ms-flex-align: stretch;
406 |   align-items: stretch;
407 | }
408 | 
409 | .time-box-one {
410 |   display: inline-block;
411 |   width: 7em;
412 |   height: 0px;
413 |   margin-top: 0px;
414 |   float: none;
415 |   text-align: left;
416 | }
417 | 
418 | .time-box-one.time-box-header {
419 |   display: inline;
420 | }
421 | 
422 | .time-box-one.b-r {
423 |   width: 3em;
424 |   height: 2.5em;
425 |   max-height: 2.5em;
426 |   min-height: 2em;
427 |   margin-bottom: 10px;
428 |   padding-bottom: 0px;
429 |   border-right: 0.1px solid lightgray;
430 | }
431 | 
432 | .time-box-one.time-label-box {
433 |   height: 2.5em;
434 |   margin-top: 0px;
435 |   margin-bottom: 10px;
436 |   padding-bottom: 0px;
437 |   background-color: #fb8b1e;
438 |   color: #fff;
439 | }
440 | 
441 | .text-block-2 {
442 |   display: block;
443 |   margin-top: 0px;
444 |   margin-bottom: 0px;
445 |   text-align: center;
446 | }
447 | 
448 | .top-nav-section {
449 |   background-color: #000;
450 |   color: #fff;
451 | }
452 | 
453 | .nav-bar {
454 |   background-color: #fb8e1e;
455 | }
456 | 
457 | .success-message {
458 |   color: #fb8b1e;
459 | }
460 | 
461 | .form {
462 |   color: #fb8b1e;
463 | }
464 | 
465 | .text-block-3 {
466 |   font-family: Lato, sans-serif;
467 |   color: #818181;
468 |   font-size: 16px;
469 |   font-weight: 300;
470 | }
471 | 
472 | .text-block-4 {
473 |   font-family: Montserrat, sans-serif;
474 |   font-weight: 700;
475 | }
476 | 
477 | .text-block-5 {
478 |   font-family: Lato, sans-serif;
479 |   color: #888787;
480 |   font-size: 13px;
481 |   font-weight: 300;
482 | }
483 | 
484 | .text-block-6 {
485 |   position: relative;
486 |   display: -webkit-box;
487 |   display: -webkit-flex;
488 |   display: -ms-flexbox;
489 |   display: flex;
490 |   margin-top: 0px;
491 |   margin-bottom: 0px;
492 |   padding: 10px 0px 0px 10px;
493 |   float: left;
494 |   clear: right;
495 |   -webkit-box-pack: center;
496 |   -webkit-justify-content: center;
497 |   -ms-flex-pack: center;
498 |   justify-content: center;
499 |   color: #868686;
500 |   font-weight: 700;
501 | }
502 | 
503 | .text-block-6.text-label {
504 |   display: block;
505 |   margin-top: 0px;
506 |   margin-right: auto;
507 |   margin-left: auto;
508 |   padding-top: 9px;
509 |   padding-bottom: 0px;
510 |   padding-left: 9px;
511 |   color: #fff;
512 | }
513 | 
514 | .text-block-7 {
515 |   display: block;
516 |   margin-top: -1px;
517 |   padding-top: 8px;
518 |   padding-left: 5px;
519 |   float: left;
520 |   font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
521 |   color: #969696;
522 |   font-weight: 700;
523 | }
524 | 
525 | .text-block-7.text-drop-down {
526 |   padding-top: 9px;
527 |   padding-left: 14px;
528 |   color: #fb8b1e;
529 | }
530 | 
531 | .div-block-13 {
532 |   display: inline-block;
533 |   width: 2.5em;
534 |   height: 2.5em;
535 |   float: right;
536 |   background-color: #fb8b1e;
537 | }
538 | 
539 | @media (max-width: 991px) {
540 |   .div-block-3 {
541 |     float: none;
542 |     text-align: center;
543 |   }
544 |   .text-block {
545 |     float: none;
546 |   }
547 |   .main-body {
548 |     text-align: center;
549 |   }
550 |   .container-3 {
551 |     text-align: center;
552 |   }
553 |   .top-nav-section {
554 |     display: none;
555 |   }
556 | }
557 | 
558 | @media (max-width: 479px) {
559 |   .top-nav {
560 |     display: none;
561 |   }
562 |   .div-block {
563 |     display: none;
564 |     text-align: center;
565 |   }
566 |   .div-block-2 {
567 |     padding-right: 0px;
568 |     padding-left: 0px;
569 |   }
570 |   .div-block-3 {
571 |     display: inline-block;
572 |     width: 100%;
573 |     float: none;
574 |     clear: none;
575 |   }
576 |   .text-block {
577 |     display: none;
578 |     float: none;
579 |     text-align: center;
580 |   }
581 |   .heading-3.selected-tab {
582 |     margin-right: 0px;
583 |   }
584 |   .div-block-4.main-tab-div {
585 |     position: static;
586 |     display: -webkit-box;
587 |     display: -webkit-flex;
588 |     display: -ms-flexbox;
589 |     display: flex;
590 |     width: 120%;
591 |     float: none;
592 |     clear: none;
593 |     -webkit-box-orient: vertical;
594 |     -webkit-box-direction: normal;
595 |     -webkit-flex-direction: column;
596 |     -ms-flex-direction: column;
597 |     flex-direction: column;
598 |     -webkit-box-pack: center;
599 |     -webkit-justify-content: center;
600 |     -ms-flex-pack: center;
601 |     justify-content: center;
602 |     -webkit-box-align: center;
603 |     -webkit-align-items: center;
604 |     -ms-flex-align: center;
605 |     align-items: center;
606 |     text-align: center;
607 |   }
608 |   .div-block-8 {
609 |     padding-right: 0px;
610 |   }
611 |   .latest-list {
612 |     padding-right: 10px;
613 |     padding-left: 10px;
614 |   }
615 |   .footer {
616 |     display: -webkit-box;
617 |     display: -webkit-flex;
618 |     display: -ms-flexbox;
619 |     display: flex;
620 |     -webkit-box-align: center;
621 |     -webkit-align-items: center;
622 |     -ms-flex-align: center;
623 |     align-items: center;
624 |   }
625 |   .footer-container {
626 |     display: -webkit-box;
627 |     display: -webkit-flex;
628 |     display: -ms-flexbox;
629 |     display: flex;
630 |     clear: none;
631 |     -webkit-box-orient: vertical;
632 |     -webkit-box-direction: normal;
633 |     -webkit-flex-direction: column;
634 |     -ms-flex-direction: column;
635 |     flex-direction: column;
636 |     -webkit-box-pack: start;
637 |     -webkit-justify-content: flex-start;
638 |     -ms-flex-pack: start;
639 |     justify-content: flex-start;
640 |     -webkit-flex-wrap: nowrap;
641 |     -ms-flex-wrap: nowrap;
642 |     flex-wrap: nowrap;
643 |     -webkit-box-align: stretch;
644 |     -webkit-align-items: stretch;
645 |     -ms-flex-align: stretch;
646 |     align-items: stretch;
647 |   }
648 |   .main-body {
649 |     padding-right: 3px;
650 |     padding-left: 3px;
651 |   }
652 |   .div-block-11.footer-div.footer-right {
653 |     display: none;
654 |   }
655 |   .div-block-12 {
656 |     display: none;
657 |   }
658 | }


--------------------------------------------------------------------------------
/src/Assets/webflow.css:
--------------------------------------------------------------------------------
   1 | @font-face {
   2 |   font-family: 'webflow-icons';
   3 |   src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg6SAy0AAAC8AAAAYGNtYXAaVcxaAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5ZgscV1gAAAFwAAABhGhlYWQCkFKvAAAC9AAAADZoaGVhB0MDyQAAAywAAAAkaG10eBIAA10AAANQAAAAIGxvY2EBMADyAAADcAAAABJtYXhwAAwATQAAA4QAAAAgbmFtZWTuiIAAAAOkAAABe3Bvc3QAAwAAAAAFIAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADmAwPA/8D/wAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIOYD//3//wAAAAAAIOYA//3//wAB/+MaBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQEgAAADIAOAAAUAAAkBBwkBFwMg/kBAAYD+gEABwAHAQP6A/oBAAAEA4AAAAuADgAAFAAATARcJAQfgAcBA/oABgEABwAHAQP6A/oBAAAADAMAA4ANAAsAAGAAxAEoAAAEhIg4CHQEUHgIzITI+Aj0BNC4CIxUhIg4CHQEUHgIzITI+Aj0BNC4CIxUhIg4CHQEUHgIzITI+Aj0BNC4CIwMg/cAHCwkFBQkLBwJABwsJBQUJCwf9wAcLCQUFCQsHAkAHCwkFBQkLB/3ABwsJBQUJCwcCQAcLCQUFCQsHAsAFCQsHIAcLCQUFCQsHIAcLCQXABQkLByAHCwkFBQkLByAHCwkFwAUJCwcgBwsJBQUJCwcgBwsJBQAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFFv+egGGAAAAAAEAAAABAADSLAJOXw889QALBAAAAAAAz/iHGQAAAADP+IcZAAAAAAOBA4AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAA4EAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAACAAAABAABIAQAAOAEAADABAAAnQAAAAAACgAUAB4AMgBGAKwAwgAAAAEAAAAIAEsAAwAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAaAAAAAQAAAAAAAgAOAHEAAQAAAAAAAwAaADAAAQAAAAAABAAaAH8AAQAAAAAABQAWABoAAQAAAAAABgANAEoAAQAAAAAACgA0AJkAAwABBAkAAQAaAAAAAwABBAkAAgAOAHEAAwABBAkAAwAaADAAAwABBAkABAAaAH8AAwABBAkABQAWABoAAwABBAkABgAaAFcAAwABBAkACgA0AJkAdwBlAGIAZgBsAG8AdwAtAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAdwBlAGIAZgBsAG8AdwAtAGkAYwBvAG4Ac3dlYmZsb3ctaWNvbnMAdwBlAGIAZgBsAG8AdwAtAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAHcAZQBiAGYAbABvAHcALQBpAGMAbwBuAHMARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVcAAoAAAAABRQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAZMAAAGTuzUomU9TLzIAAAKIAAAAYAAAAGAOkgMtY21hcAAAAugAAABMAAAATBpVzFpnYXNwAAADNAAAAAgAAAAIAAAAEGhlYWQAAAM8AAAANgAAADYCkFKvaGhlYQAAA3QAAAAkAAAAJAdDA8lobXR4AAADmAAAACAAAAAgEgADXW1heHAAAAO4AAAABgAAAAYACFAAbmFtZQAAA8AAAAF7AAABe2TuiIBwb3N0AAAFPAAAACAAAAAgAAMAAAEABAQAAQEBDndlYmZsb3ctaWNvbnMAAQIAAQA6+BwC+BsD+BgEHgoACXf/i4seCgAJd/+LiwwHi0v6lPpUBR0AAACaDx0AAACfER0AAAAJHQAAAYoSAAkBAQ4bHR8iJywxNndlYmZsb3ctaWNvbnN3ZWJmbG93LWljb25zdTB1MXUyMHVFNjAwdUU2MDF1RTYwMnVFNjAzAAACAYkABgAIAQEEBwoNJDvH4P6UDv6UDv6UDvyUDvm0+FQV/FT4VEtL+BT8FPwU/BTLSwUO93T4VBX4VPhUy0v8FPwU+BT8FEtLBQ75tPlUFfzUiwV5i319i3kIi2sFi3mZfZ2LCPjUiwWdi5mZi50Ii6sFi519mXmLCIv7VBX81IsFeYt9fYt5CItrBYt5mX2diwj41IsFnYuZmYudCIurBYudfZl5iwiL+1QV/NSLBXmLfX2LeQiLawWLeZl9nYsI+NSLBZ2LmZmLnQiLqwWLnX2ZeYsIDvm4+SkV+6n7qvuq96ovLvgG/Bj4BvgYBQ76lBT6lBWLDAoAAAMEAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA5gMDwP/A/8ADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDmA//9//8AAAAAACDmAP/9//8AAf/jGgQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAABAAC1pQTjXw889QALBAAAAAAAz/iHGQAAAADP+IcZAAAAAAOBA4AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAA4EAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAACAAAABAABIAQAAOAEAADABAAAnQAAUAAACAAAAAAADgCuAAEAAAAAAAEAGgAAAAEAAAAAAAIADgBxAAEAAAAAAAMAGgAwAAEAAAAAAAQAGgB/AAEAAAAAAAUAFgAaAAEAAAAAAAYADQBKAAEAAAAAAAoANACZAAMAAQQJAAEAGgAAAAMAAQQJAAIADgBxAAMAAQQJAAMAGgAwAAMAAQQJAAQAGgB/AAMAAQQJAAUAFgAaAAMAAQQJAAYAGgBXAAMAAQQJAAoANACZAHcAZQBiAGYAbABvAHcALQBpAGMAbwBuAHMAVgBlAHIAcwBpAG8AbgAgADEALgAwAHcAZQBiAGYAbABvAHcALQBpAGMAbwBuAHN3ZWJmbG93LWljb25zAHcAZQBiAGYAbABvAHcALQBpAGMAbwBuAHMAUgBlAGcAdQBsAGEAcgB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff');
   4 |   font-weight: normal;
   5 |   font-style: normal;
   6 | }
   7 | [class^="w-icon-"],
   8 | [class*=" w-icon-"] {
   9 |   font-family: 'webflow-icons';
  10 |   speak: none;
  11 |   font-style: normal;
  12 |   font-weight: normal;
  13 |   font-variant: normal;
  14 |   text-transform: none;
  15 |   line-height: 1;
  16 |   -webkit-font-smoothing: antialiased;
  17 |   -moz-osx-font-smoothing: grayscale;
  18 | }
  19 | .w-icon-slider-right:before {
  20 |   content: "\e600";
  21 | }
  22 | .w-icon-slider-left:before {
  23 |   content: "\e601";
  24 | }
  25 | .w-icon-nav-menu:before {
  26 |   content: "\e602";
  27 | }
  28 | .w-icon-arrow-down:before,
  29 | .w-icon-dropdown-toggle:before {
  30 |   content: "\e603";
  31 | }
  32 | * {
  33 |   -webkit-box-sizing: border-box;
  34 |   -moz-box-sizing: border-box;
  35 |   box-sizing: border-box;
  36 | }
  37 | html {
  38 |   height: 100%;
  39 | }
  40 | body {
  41 |   margin: 0;
  42 |   min-height: 100%;
  43 |   background-color: #fff;
  44 |   font-family: Arial, sans-serif;
  45 |   font-size: 14px;
  46 |   line-height: 20px;
  47 |   color: #333;
  48 | }
  49 | img {
  50 |   max-width: 100%;
  51 |   vertical-align: middle;
  52 |   display: inline-block;
  53 | }
  54 | html.w-mod-touch * {
  55 |   background-attachment: scroll !important;
  56 | }
  57 | .w-block {
  58 |   display: block;
  59 | }
  60 | .w-inline-block {
  61 |   max-width: 100%;
  62 |   display: inline-block;
  63 | }
  64 | .w-clearfix:before,
  65 | .w-clearfix:after {
  66 |   content: " ";
  67 |   display: table;
  68 | }
  69 | .w-clearfix:after {
  70 |   clear: both;
  71 | }
  72 | .w-hidden {
  73 |   display: none;
  74 | }
  75 | .w-button {
  76 |   display: inline-block;
  77 |   padding: 9px 15px;
  78 |   background-color: #3898EC;
  79 |   color: white;
  80 |   border: 0;
  81 |   line-height: inherit;
  82 |   text-decoration: none;
  83 |   cursor: pointer;
  84 |   border-radius: 0;
  85 | }
  86 | input.w-button {
  87 |   -webkit-appearance: button;
  88 | }
  89 | html[data-w-dynpage] [data-w-cloak] {
  90 |   color: transparent !important;
  91 | }
  92 | .w-webflow-badge,
  93 | .w-webflow-badge * {
  94 |   position: static;
  95 |   left: auto;
  96 |   top: auto;
  97 |   right: auto;
  98 |   bottom: auto;
  99 |   z-index: auto;
 100 |   display: block;
 101 |   visibility: visible;
 102 |   overflow: visible;
 103 |   overflow-x: visible;
 104 |   overflow-y: visible;
 105 |   box-sizing: border-box;
 106 |   width: auto;
 107 |   height: auto;
 108 |   max-height: none;
 109 |   max-width: none;
 110 |   min-height: 0;
 111 |   min-width: 0;
 112 |   margin: 0;
 113 |   padding: 0;
 114 |   float: none;
 115 |   clear: none;
 116 |   border: 0 none transparent;
 117 |   border-radius: 0;
 118 |   background: none;
 119 |   background-image: none;
 120 |   background-position: 0% 0%;
 121 |   background-size: auto auto;
 122 |   background-repeat: repeat;
 123 |   background-origin: padding-box;
 124 |   background-clip: border-box;
 125 |   background-attachment: scroll;
 126 |   background-color: transparent;
 127 |   box-shadow: none;
 128 |   opacity: 1.0;
 129 |   transform: none;
 130 |   transition: none;
 131 |   direction: ltr;
 132 |   font-family: inherit;
 133 |   font-weight: inherit;
 134 |   color: inherit;
 135 |   font-size: inherit;
 136 |   line-height: inherit;
 137 |   font-style: inherit;
 138 |   font-variant: inherit;
 139 |   text-align: inherit;
 140 |   letter-spacing: inherit;
 141 |   text-decoration: inherit;
 142 |   text-indent: 0;
 143 |   text-transform: inherit;
 144 |   list-style-type: disc;
 145 |   text-shadow: none;
 146 |   font-smoothing: auto;
 147 |   vertical-align: baseline;
 148 |   cursor: inherit;
 149 |   white-space: inherit;
 150 |   word-break: normal;
 151 |   word-spacing: normal;
 152 |   word-wrap: normal;
 153 | }
 154 | .w-webflow-badge {
 155 |   position: fixed !important;
 156 |   display: inline-block !important;
 157 |   visibility: visible !important;
 158 |   opacity: 1 !important;
 159 |   z-index: 2147483647 !important;
 160 |   top: auto !important;
 161 |   right: 12px !important;
 162 |   bottom: 12px !important;
 163 |   left: auto !important;
 164 |   color: #AAADB0 !important;
 165 |   background-color: #fff !important;
 166 |   border-radius: 3px !important;
 167 |   padding: 6px 8px 6px 6px !important;
 168 |   font-size: 12px !important;
 169 |   opacity: 1.0 !important;
 170 |   line-height: 14px !important;
 171 |   text-decoration: none !important;
 172 |   transform: none !important;
 173 |   margin: 0 !important;
 174 |   width: auto !important;
 175 |   height: auto !important;
 176 |   overflow: visible !important;
 177 |   white-space: nowrap;
 178 |   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1);
 179 | }
 180 | .w-webflow-badge > img {
 181 |   display: inline-block !important;
 182 |   visibility: visible !important;
 183 |   opacity: 1 !important;
 184 |   vertical-align: middle !important;
 185 | }
 186 | h1,
 187 | h2,
 188 | h3,
 189 | h4,
 190 | h5,
 191 | h6 {
 192 |   font-weight: bold;
 193 |   margin-bottom: 10px;
 194 | }
 195 | h1 {
 196 |   font-size: 38px;
 197 |   line-height: 44px;
 198 |   margin-top: 20px;
 199 | }
 200 | h2 {
 201 |   font-size: 32px;
 202 |   line-height: 36px;
 203 |   margin-top: 20px;
 204 | }
 205 | h3 {
 206 |   font-size: 24px;
 207 |   line-height: 30px;
 208 |   margin-top: 20px;
 209 | }
 210 | h4 {
 211 |   font-size: 18px;
 212 |   line-height: 24px;
 213 |   margin-top: 10px;
 214 | }
 215 | h5 {
 216 |   font-size: 14px;
 217 |   line-height: 20px;
 218 |   margin-top: 10px;
 219 | }
 220 | h6 {
 221 |   font-size: 12px;
 222 |   line-height: 18px;
 223 |   margin-top: 10px;
 224 | }
 225 | p {
 226 |   margin-top: 0;
 227 |   margin-bottom: 10px;
 228 | }
 229 | blockquote {
 230 |   margin: 0 0 10px 0;
 231 |   padding: 10px 20px;
 232 |   border-left: 5px solid #E2E2E2;
 233 |   font-size: 18px;
 234 |   line-height: 22px;
 235 | }
 236 | figure {
 237 |   margin: 0;
 238 |   margin-bottom: 10px;
 239 | }
 240 | figcaption {
 241 |   margin-top: 5px;
 242 |   text-align: center;
 243 | }
 244 | ul,
 245 | ol {
 246 |   margin-top: 0px;
 247 |   margin-bottom: 10px;
 248 |   padding-left: 40px;
 249 | }
 250 | .w-list-unstyled {
 251 |   padding-left: 0;
 252 |   list-style: none;
 253 | }
 254 | .w-embed:before,
 255 | .w-embed:after {
 256 |   content: " ";
 257 |   display: table;
 258 | }
 259 | .w-embed:after {
 260 |   clear: both;
 261 | }
 262 | .w-video {
 263 |   width: 100%;
 264 |   position: relative;
 265 |   padding: 0;
 266 | }
 267 | .w-video iframe,
 268 | .w-video object,
 269 | .w-video embed {
 270 |   position: absolute;
 271 |   top: 0;
 272 |   left: 0;
 273 |   width: 100%;
 274 |   height: 100%;
 275 | }
 276 | fieldset {
 277 |   padding: 0;
 278 |   margin: 0;
 279 |   border: 0;
 280 | }
 281 | button,
 282 | html input[type="button"],
 283 | input[type="reset"] {
 284 |   border: 0;
 285 |   cursor: pointer;
 286 |   -webkit-appearance: button;
 287 | }
 288 | .w-form {
 289 |   margin: 0 0 15px;
 290 | }
 291 | .w-form-done {
 292 |   display: none;
 293 |   padding: 20px;
 294 |   text-align: center;
 295 |   background-color: #dddddd;
 296 | }
 297 | .w-form-fail {
 298 |   display: none;
 299 |   margin-top: 10px;
 300 |   padding: 10px;
 301 |   background-color: #ffdede;
 302 | }
 303 | label {
 304 |   display: block;
 305 |   margin-bottom: 5px;
 306 |   font-weight: bold;
 307 | }
 308 | .w-input,
 309 | .w-select {
 310 |   display: block;
 311 |   width: 100%;
 312 |   height: 38px;
 313 |   padding: 8px 12px;
 314 |   margin-bottom: 10px;
 315 |   font-size: 14px;
 316 |   line-height: 1.428571429;
 317 |   color: #333333;
 318 |   vertical-align: middle;
 319 |   background-color: #ffffff;
 320 |   border: 1px solid #cccccc;
 321 | }
 322 | .w-input:-moz-placeholder,
 323 | .w-select:-moz-placeholder {
 324 |   color: #999;
 325 | }
 326 | .w-input::-moz-placeholder,
 327 | .w-select::-moz-placeholder {
 328 |   color: #999;
 329 |   opacity: 1;
 330 | }
 331 | .w-input:-ms-input-placeholder,
 332 | .w-select:-ms-input-placeholder {
 333 |   color: #999;
 334 | }
 335 | .w-input::-webkit-input-placeholder,
 336 | .w-select::-webkit-input-placeholder {
 337 |   color: #999;
 338 | }
 339 | .w-input:focus,
 340 | .w-select:focus {
 341 |   border-color: #3898EC;
 342 |   outline: 0;
 343 | }
 344 | .w-input[disabled],
 345 | .w-select[disabled],
 346 | .w-input[readonly],
 347 | .w-select[readonly],
 348 | fieldset[disabled] .w-input,
 349 | fieldset[disabled] .w-select {
 350 |   cursor: not-allowed;
 351 |   background-color: #eeeeee;
 352 | }
 353 | textarea.w-input,
 354 | textarea.w-select {
 355 |   height: auto;
 356 | }
 357 | .w-select {
 358 |   background-image: -webkit-linear-gradient(white 0%, #f3f3f3 100%);
 359 |   background-image: linear-gradient(white 0%, #f3f3f3 100%);
 360 | }
 361 | .w-select[multiple] {
 362 |   height: auto;
 363 | }
 364 | .w-form-label {
 365 |   display: inline-block;
 366 |   cursor: pointer;
 367 |   font-weight: normal;
 368 |   margin-bottom: 0px;
 369 | }
 370 | .w-checkbox,
 371 | .w-radio {
 372 |   display: block;
 373 |   margin-bottom: 5px;
 374 |   padding-left: 20px;
 375 | }
 376 | .w-checkbox:before,
 377 | .w-radio:before,
 378 | .w-checkbox:after,
 379 | .w-radio:after {
 380 |   content: " ";
 381 |   display: table;
 382 | }
 383 | .w-checkbox:after,
 384 | .w-radio:after {
 385 |   clear: both;
 386 | }
 387 | .w-checkbox-input,
 388 | .w-radio-input {
 389 |   margin: 4px 0 0;
 390 |   margin-top: 1px \9;
 391 |   line-height: normal;
 392 |   float: left;
 393 |   margin-left: -20px;
 394 | }
 395 | .w-radio-input {
 396 |   margin-top: 3px;
 397 | }
 398 | .w-container {
 399 |   margin-left: auto;
 400 |   margin-right: auto;
 401 |   max-width: 1200px;
 402 | }
 403 | .w-container:before,
 404 | .w-container:after {
 405 |   content: " ";
 406 |   display: table;
 407 | }
 408 | .w-container:after {
 409 |   clear: both;
 410 | }
 411 | .w-container .w-row {
 412 |   margin-left: -10px;
 413 |   margin-right: -10px;
 414 | }
 415 | .w-row:before,
 416 | .w-row:after {
 417 |   content: " ";
 418 |   display: table;
 419 | }
 420 | .w-row:after {
 421 |   clear: both;
 422 | }
 423 | .w-row .w-row {
 424 |   margin-left: 0;
 425 |   margin-right: 0;
 426 | }
 427 | .w-col {
 428 |   position: relative;
 429 |   float: left;
 430 |   width: 100%;
 431 |   min-height: 1px;
 432 |   padding-left: 10px;
 433 |   padding-right: 10px;
 434 | }
 435 | .w-col .w-col {
 436 |   padding-left: 0;
 437 |   padding-right: 0;
 438 | }
 439 | .w-col-1 {
 440 |   width: 8.33333333%;
 441 | }
 442 | .w-col-2 {
 443 |   width: 16.66666667%;
 444 | }
 445 | .w-col-3 {
 446 |   width: 25%;
 447 | }
 448 | .w-col-4 {
 449 |   width: 33.33333333%;
 450 | }
 451 | .w-col-5 {
 452 |   width: 41.66666667%;
 453 | }
 454 | .w-col-6 {
 455 |   width: 50%;
 456 | }
 457 | .w-col-7 {
 458 |   width: 58.33333333%;
 459 | }
 460 | .w-col-8 {
 461 |   width: 66.66666667%;
 462 | }
 463 | .w-col-9 {
 464 |   width: 75%;
 465 | }
 466 | .w-col-10 {
 467 |   width: 83.33333333%;
 468 | }
 469 | .w-col-11 {
 470 |   width: 91.66666667%;
 471 | }
 472 | .w-col-12 {
 473 |   width: 100%;
 474 | }
 475 | .w-hidden-main {
 476 |   display: none !important;
 477 | }
 478 | @media screen and (max-width: 991px) {
 479 |   .w-container {
 480 |     max-width: 728px;
 481 |   }
 482 |   .w-hidden-main {
 483 |     display: inherit !important;
 484 |   }
 485 |   .w-hidden-medium {
 486 |     display: none !important;
 487 |   }
 488 |   .w-col-medium-1 {
 489 |     width: 8.33333333%;
 490 |   }
 491 |   .w-col-medium-2 {
 492 |     width: 16.66666667%;
 493 |   }
 494 |   .w-col-medium-3 {
 495 |     width: 25%;
 496 |   }
 497 |   .w-col-medium-4 {
 498 |     width: 33.33333333%;
 499 |   }
 500 |   .w-col-medium-5 {
 501 |     width: 41.66666667%;
 502 |   }
 503 |   .w-col-medium-6 {
 504 |     width: 50%;
 505 |   }
 506 |   .w-col-medium-7 {
 507 |     width: 58.33333333%;
 508 |   }
 509 |   .w-col-medium-8 {
 510 |     width: 66.66666667%;
 511 |   }
 512 |   .w-col-medium-9 {
 513 |     width: 75%;
 514 |   }
 515 |   .w-col-medium-10 {
 516 |     width: 83.33333333%;
 517 |   }
 518 |   .w-col-medium-11 {
 519 |     width: 91.66666667%;
 520 |   }
 521 |   .w-col-medium-12 {
 522 |     width: 100%;
 523 |   }
 524 |   .w-col-stack {
 525 |     width: 100%;
 526 |     left: auto;
 527 |     right: auto;
 528 |   }
 529 | }
 530 | @media screen and (max-width: 767px) {
 531 |   .w-hidden-main {
 532 |     display: inherit !important;
 533 |   }
 534 |   .w-hidden-medium {
 535 |     display: inherit !important;
 536 |   }
 537 |   .w-hidden-small {
 538 |     display: none !important;
 539 |   }
 540 |   .w-row,
 541 |   .w-container .w-row {
 542 |     margin-left: 0;
 543 |     margin-right: 0;
 544 |   }
 545 |   .w-col {
 546 |     width: 100%;
 547 |     left: auto;
 548 |     right: auto;
 549 |   }
 550 |   .w-col-small-1 {
 551 |     width: 8.33333333%;
 552 |   }
 553 |   .w-col-small-2 {
 554 |     width: 16.66666667%;
 555 |   }
 556 |   .w-col-small-3 {
 557 |     width: 25%;
 558 |   }
 559 |   .w-col-small-4 {
 560 |     width: 33.33333333%;
 561 |   }
 562 |   .w-col-small-5 {
 563 |     width: 41.66666667%;
 564 |   }
 565 |   .w-col-small-6 {
 566 |     width: 50%;
 567 |   }
 568 |   .w-col-small-7 {
 569 |     width: 58.33333333%;
 570 |   }
 571 |   .w-col-small-8 {
 572 |     width: 66.66666667%;
 573 |   }
 574 |   .w-col-small-9 {
 575 |     width: 75%;
 576 |   }
 577 |   .w-col-small-10 {
 578 |     width: 83.33333333%;
 579 |   }
 580 |   .w-col-small-11 {
 581 |     width: 91.66666667%;
 582 |   }
 583 |   .w-col-small-12 {
 584 |     width: 100%;
 585 |   }
 586 | }
 587 | @media screen and (max-width: 479px) {
 588 |   .w-container {
 589 |     max-width: none;
 590 |   }
 591 |   .w-hidden-main {
 592 |     display: inherit !important;
 593 |   }
 594 |   .w-hidden-medium {
 595 |     display: inherit !important;
 596 |   }
 597 |   .w-hidden-small {
 598 |     display: inherit !important;
 599 |   }
 600 |   .w-hidden-tiny {
 601 |     display: none !important;
 602 |   }
 603 |   .w-col {
 604 |     width: 100%;
 605 |   }
 606 |   .w-col-tiny-1 {
 607 |     width: 8.33333333%;
 608 |   }
 609 |   .w-col-tiny-2 {
 610 |     width: 16.66666667%;
 611 |   }
 612 |   .w-col-tiny-3 {
 613 |     width: 25%;
 614 |   }
 615 |   .w-col-tiny-4 {
 616 |     width: 33.33333333%;
 617 |   }
 618 |   .w-col-tiny-5 {
 619 |     width: 41.66666667%;
 620 |   }
 621 |   .w-col-tiny-6 {
 622 |     width: 50%;
 623 |   }
 624 |   .w-col-tiny-7 {
 625 |     width: 58.33333333%;
 626 |   }
 627 |   .w-col-tiny-8 {
 628 |     width: 66.66666667%;
 629 |   }
 630 |   .w-col-tiny-9 {
 631 |     width: 75%;
 632 |   }
 633 |   .w-col-tiny-10 {
 634 |     width: 83.33333333%;
 635 |   }
 636 |   .w-col-tiny-11 {
 637 |     width: 91.66666667%;
 638 |   }
 639 |   .w-col-tiny-12 {
 640 |     width: 100%;
 641 |   }
 642 | }
 643 | .w-widget {
 644 |   position: relative;
 645 | }
 646 | .w-widget-map {
 647 |   width: 100%;
 648 |   height: 400px;
 649 | }
 650 | .w-widget-map label {
 651 |   width: auto;
 652 |   display: inline;
 653 | }
 654 | .w-widget-map img {
 655 |   max-width: inherit;
 656 | }
 657 | .w-widget-map .gm-style-iw {
 658 |   width: 90% !important;
 659 |   height: auto !important;
 660 |   top: 7px !important;
 661 |   left: 6% !important;
 662 |   display: inline;
 663 |   text-align: center;
 664 |   overflow: hidden;
 665 | }
 666 | .w-widget-map .gm-style-iw + div {
 667 |   display: none;
 668 | }
 669 | .w-widget-twitter {
 670 |   overflow: hidden;
 671 | }
 672 | .w-widget-twitter-count-shim {
 673 |   display: inline-block;
 674 |   vertical-align: top;
 675 |   position: relative;
 676 |   width: 28px;
 677 |   height: 20px;
 678 |   text-align: center;
 679 |   background: white;
 680 |   border: #758696 solid 1px;
 681 |   border-radius: 3px;
 682 | }
 683 | .w-widget-twitter-count-shim * {
 684 |   pointer-events: none;
 685 |   -webkit-user-select: none;
 686 |   -moz-user-select: none;
 687 |   -ms-user-select: none;
 688 |   user-select: none;
 689 | }
 690 | .w-widget-twitter-count-shim .w-widget-twitter-count-inner {
 691 |   position: relative;
 692 |   font-size: 15px;
 693 |   line-height: 12px;
 694 |   text-align: center;
 695 |   color: #999;
 696 |   font-family: serif;
 697 | }
 698 | .w-widget-twitter-count-shim .w-widget-twitter-count-clear {
 699 |   position: relative;
 700 |   display: block;
 701 | }
 702 | .w-widget-twitter-count-shim.w--large {
 703 |   width: 36px;
 704 |   height: 28px;
 705 |   margin-left: 7px;
 706 | }
 707 | .w-widget-twitter-count-shim.w--large .w-widget-twitter-count-inner {
 708 |   font-size: 18px;
 709 |   line-height: 18px;
 710 | }
 711 | .w-widget-twitter-count-shim:not(.w--vertical) {
 712 |   margin-left: 5px;
 713 |   margin-right: 8px;
 714 | }
 715 | .w-widget-twitter-count-shim:not(.w--vertical).w--large {
 716 |   margin-left: 6px;
 717 | }
 718 | .w-widget-twitter-count-shim:not(.w--vertical):before,
 719 | .w-widget-twitter-count-shim:not(.w--vertical):after {
 720 |   top: 50%;
 721 |   left: 0;
 722 |   border: solid transparent;
 723 |   content: " ";
 724 |   height: 0;
 725 |   width: 0;
 726 |   position: absolute;
 727 |   pointer-events: none;
 728 | }
 729 | .w-widget-twitter-count-shim:not(.w--vertical):before {
 730 |   border-color: rgba(117, 134, 150, 0);
 731 |   border-right-color: #5d6c7b;
 732 |   border-width: 4px;
 733 |   margin-left: -9px;
 734 |   margin-top: -4px;
 735 | }
 736 | .w-widget-twitter-count-shim:not(.w--vertical).w--large:before {
 737 |   border-width: 5px;
 738 |   margin-left: -10px;
 739 |   margin-top: -5px;
 740 | }
 741 | .w-widget-twitter-count-shim:not(.w--vertical):after {
 742 |   border-color: rgba(255, 255, 255, 0);
 743 |   border-right-color: white;
 744 |   border-width: 4px;
 745 |   margin-left: -8px;
 746 |   margin-top: -4px;
 747 | }
 748 | .w-widget-twitter-count-shim:not(.w--vertical).w--large:after {
 749 |   border-width: 5px;
 750 |   margin-left: -9px;
 751 |   margin-top: -5px;
 752 | }
 753 | .w-widget-twitter-count-shim.w--vertical {
 754 |   width: 61px;
 755 |   height: 33px;
 756 |   margin-bottom: 8px;
 757 | }
 758 | .w-widget-twitter-count-shim.w--vertical:before,
 759 | .w-widget-twitter-count-shim.w--vertical:after {
 760 |   top: 100%;
 761 |   left: 50%;
 762 |   border: solid transparent;
 763 |   content: " ";
 764 |   height: 0;
 765 |   width: 0;
 766 |   position: absolute;
 767 |   pointer-events: none;
 768 | }
 769 | .w-widget-twitter-count-shim.w--vertical:before {
 770 |   border-color: rgba(117, 134, 150, 0);
 771 |   border-top-color: #5d6c7b;
 772 |   border-width: 5px;
 773 |   margin-left: -5px;
 774 | }
 775 | .w-widget-twitter-count-shim.w--vertical:after {
 776 |   border-color: rgba(255, 255, 255, 0);
 777 |   border-top-color: white;
 778 |   border-width: 4px;
 779 |   margin-left: -4px;
 780 | }
 781 | .w-widget-twitter-count-shim.w--vertical .w-widget-twitter-count-inner {
 782 |   font-size: 18px;
 783 |   line-height: 22px;
 784 | }
 785 | .w-widget-twitter-count-shim.w--vertical.w--large {
 786 |   width: 76px;
 787 | }
 788 | .w-widget-gplus {
 789 |   overflow: hidden;
 790 | }
 791 | .w-background-video {
 792 |   position: relative;
 793 |   overflow: hidden;
 794 |   height: 500px;
 795 |   color: white;
 796 | }
 797 | .w-background-video > video {
 798 |   background-size: cover;
 799 |   background-position: 50% 50%;
 800 |   position: absolute;
 801 |   right: -100%;
 802 |   bottom: -100%;
 803 |   top: -100%;
 804 |   left: -100%;
 805 |   margin: auto;
 806 |   min-width: 100%;
 807 |   min-height: 100%;
 808 |   z-index: -100;
 809 | }
 810 | .w-background-video > video::-webkit-media-controls-start-playback-button {
 811 |   display: none !important;
 812 |   -webkit-appearance: none;
 813 | }
 814 | .w-slider {
 815 |   position: relative;
 816 |   height: 300px;
 817 |   text-align: center;
 818 |   background: #dddddd;
 819 |   clear: both;
 820 |   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 821 |   tap-highlight-color: rgba(0, 0, 0, 0);
 822 | }
 823 | .w-slider-mask {
 824 |   position: relative;
 825 |   display: block;
 826 |   overflow: hidden;
 827 |   z-index: 1;
 828 |   left: 0;
 829 |   right: 0;
 830 |   height: 100%;
 831 |   white-space: nowrap;
 832 | }
 833 | .w-slide {
 834 |   position: relative;
 835 |   display: inline-block;
 836 |   vertical-align: top;
 837 |   width: 100%;
 838 |   height: 100%;
 839 |   white-space: normal;
 840 |   text-align: left;
 841 | }
 842 | .w-slider-nav {
 843 |   position: absolute;
 844 |   z-index: 2;
 845 |   top: auto;
 846 |   right: 0;
 847 |   bottom: 0;
 848 |   left: 0;
 849 |   margin: auto;
 850 |   padding-top: 10px;
 851 |   height: 40px;
 852 |   text-align: center;
 853 |   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 854 |   tap-highlight-color: rgba(0, 0, 0, 0);
 855 | }
 856 | .w-slider-nav.w-round > div {
 857 |   border-radius: 100%;
 858 | }
 859 | .w-slider-nav.w-num > div {
 860 |   width: auto;
 861 |   height: auto;
 862 |   padding: 0.2em 0.5em;
 863 |   font-size: inherit;
 864 |   line-height: inherit;
 865 | }
 866 | .w-slider-nav.w-shadow > div {
 867 |   box-shadow: 0 0 3px rgba(51, 51, 51, 0.4);
 868 | }
 869 | .w-slider-nav-invert {
 870 |   color: #fff;
 871 | }
 872 | .w-slider-nav-invert > div {
 873 |   background-color: rgba(34, 34, 34, 0.4);
 874 | }
 875 | .w-slider-nav-invert > div.w-active {
 876 |   background-color: #222;
 877 | }
 878 | .w-slider-dot {
 879 |   position: relative;
 880 |   display: inline-block;
 881 |   width: 1em;
 882 |   height: 1em;
 883 |   background-color: rgba(255, 255, 255, 0.4);
 884 |   cursor: pointer;
 885 |   margin: 0 3px 0.5em;
 886 |   transition: background-color 100ms, color 100ms;
 887 | }
 888 | .w-slider-dot.w-active {
 889 |   background-color: #fff;
 890 | }
 891 | .w-slider-arrow-left,
 892 | .w-slider-arrow-right {
 893 |   position: absolute;
 894 |   width: 80px;
 895 |   top: 0;
 896 |   right: 0;
 897 |   bottom: 0;
 898 |   left: 0;
 899 |   margin: auto;
 900 |   cursor: pointer;
 901 |   overflow: hidden;
 902 |   color: white;
 903 |   font-size: 40px;
 904 |   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 905 |   tap-highlight-color: rgba(0, 0, 0, 0);
 906 |   -webkit-user-select: none;
 907 |   -moz-user-select: none;
 908 |   -ms-user-select: none;
 909 |   user-select: none;
 910 | }
 911 | .w-slider-arrow-left [class^="w-icon-"],
 912 | .w-slider-arrow-right [class^="w-icon-"],
 913 | .w-slider-arrow-left [class*=" w-icon-"],
 914 | .w-slider-arrow-right [class*=" w-icon-"] {
 915 |   position: absolute;
 916 | }
 917 | .w-slider-arrow-left {
 918 |   z-index: 3;
 919 |   right: auto;
 920 | }
 921 | .w-slider-arrow-right {
 922 |   z-index: 4;
 923 |   left: auto;
 924 | }
 925 | .w-icon-slider-left,
 926 | .w-icon-slider-right {
 927 |   top: 0;
 928 |   right: 0;
 929 |   bottom: 0;
 930 |   left: 0;
 931 |   margin: auto;
 932 |   width: 1em;
 933 |   height: 1em;
 934 | }
 935 | .w-dropdown {
 936 |   display: inline-block;
 937 |   position: relative;
 938 |   text-align: left;
 939 |   margin-left: auto;
 940 |   margin-right: auto;
 941 |   z-index: 900;
 942 | }
 943 | .w-dropdown-btn,
 944 | .w-dropdown-toggle,
 945 | .w-dropdown-link {
 946 |   position: relative;
 947 |   vertical-align: top;
 948 |   text-decoration: none;
 949 |   color: #222222;
 950 |   padding: 20px;
 951 |   text-align: left;
 952 |   margin-left: auto;
 953 |   margin-right: auto;
 954 |   white-space: nowrap;
 955 | }
 956 | .w-dropdown-toggle {
 957 |   -webkit-user-select: none;
 958 |   -moz-user-select: none;
 959 |   -ms-user-select: none;
 960 |   user-select: none;
 961 |   display: inline-block;
 962 |   cursor: pointer;
 963 |   padding-right: 40px;
 964 | }
 965 | .w-icon-dropdown-toggle {
 966 |   position: absolute;
 967 |   top: 0;
 968 |   right: 0;
 969 |   bottom: 0;
 970 |   margin: auto;
 971 |   margin-right: 20px;
 972 |   width: 1em;
 973 |   height: 1em;
 974 | }
 975 | .w-dropdown-list {
 976 |   position: absolute;
 977 |   background: #dddddd;
 978 |   display: none;
 979 |   min-width: 100%;
 980 | }
 981 | .w-dropdown-list.w--open {
 982 |   display: block;
 983 | }
 984 | .w-dropdown-link {
 985 |   padding: 10px 20px;
 986 |   display: block;
 987 |   color: #222222;
 988 | }
 989 | .w-dropdown-link.w--current {
 990 |   color: #0082f3;
 991 | }
 992 | .w-nav[data-collapse="all"] .w-dropdown,
 993 | .w-nav[data-collapse="all"] .w-dropdown-toggle {
 994 |   display: block;
 995 | }
 996 | .w-nav[data-collapse="all"] .w-dropdown-list {
 997 |   position: static;
 998 | }
 999 | @media screen and (max-width: 991px) {
1000 |   .w-nav[data-collapse="medium"] .w-dropdown,
1001 |   .w-nav[data-collapse="medium"] .w-dropdown-toggle {
1002 |     display: block;
1003 |   }
1004 |   .w-nav[data-collapse="medium"] .w-dropdown-list {
1005 |     position: static;
1006 |   }
1007 | }
1008 | @media screen and (max-width: 767px) {
1009 |   .w-nav[data-collapse="small"] .w-dropdown,
1010 |   .w-nav[data-collapse="small"] .w-dropdown-toggle {
1011 |     display: block;
1012 |   }
1013 |   .w-nav[data-collapse="small"] .w-dropdown-list {
1014 |     position: static;
1015 |   }
1016 |   .w-nav-brand {
1017 |     padding-left: 10px;
1018 |   }
1019 | }
1020 | @media screen and (max-width: 479px) {
1021 |   .w-nav[data-collapse="tiny"] .w-dropdown,
1022 |   .w-nav[data-collapse="tiny"] .w-dropdown-toggle {
1023 |     display: block;
1024 |   }
1025 |   .w-nav[data-collapse="tiny"] .w-dropdown-list {
1026 |     position: static;
1027 |   }
1028 | }
1029 | /**
1030 |  * ## Note
1031 |  * Safari (on both iOS and OS X) does not handle viewport units (vh, vw) well.
1032 |  * For example percentage units do not work on descendants of elements that
1033 |  * have any dimensions expressed in viewport units. It also doesn’t handle them at
1034 |  * all in `calc()`.
1035 |  */
1036 | /**
1037 |  * Wrapper around all lightbox elements
1038 |  *
1039 |  * 1. Since the lightbox can receive focus, IE also gives it an outline.
1040 |  * 2. Fixes flickering on Chrome when a transition is in progress
1041 |  *    underneath the lightbox.
1042 |  */
1043 | .w-lightbox-backdrop {
1044 |   color: #000;
1045 |   cursor: auto;
1046 |   font-family: serif;
1047 |   font-size: medium;
1048 |   font-style: normal;
1049 |   font-variant: normal;
1050 |   font-weight: normal;
1051 |   letter-spacing: normal;
1052 |   line-height: normal;
1053 |   list-style: disc;
1054 |   text-align: start;
1055 |   text-indent: 0;
1056 |   text-shadow: none;
1057 |   text-transform: none;
1058 |   visibility: visible;
1059 |   white-space: normal;
1060 |   word-break: normal;
1061 |   word-spacing: normal;
1062 |   word-wrap: normal;
1063 |   position: fixed;
1064 |   top: 0;
1065 |   right: 0;
1066 |   bottom: 0;
1067 |   left: 0;
1068 |   color: #fff;
1069 |   font-family: "Helvetica Neue", Helvetica, Ubuntu, "Segoe UI", Verdana, sans-serif;
1070 |   font-size: 17px;
1071 |   line-height: 1.2;
1072 |   font-weight: 300;
1073 |   text-align: center;
1074 |   background: rgba(0, 0, 0, 0.9);
1075 |   z-index: 2000;
1076 |   outline: 0;
1077 |   /* 1 */
1078 |   opacity: 0;
1079 |   -webkit-user-select: none;
1080 |   -moz-user-select: none;
1081 |   -ms-user-select: none;
1082 |   -webkit-tap-highlight-color: transparent;
1083 |   -webkit-transform: translate(0, 0);
1084 |   /* 2 */
1085 | }
1086 | /**
1087 |  * Neat trick to bind the rubberband effect to our canvas instead of the whole
1088 |  * document on iOS. It also prevents a bug that causes the document underneath to scroll.
1089 |  */
1090 | .w-lightbox-backdrop,
1091 | .w-lightbox-container {
1092 |   height: 100%;
1093 |   overflow: auto;
1094 |   -webkit-overflow-scrolling: touch;
1095 | }
1096 | .w-lightbox-content {
1097 |   position: relative;
1098 |   height: 100vh;
1099 |   overflow: hidden;
1100 | }
1101 | .w-lightbox-view {
1102 |   position: absolute;
1103 |   width: 100vw;
1104 |   height: 100vh;
1105 |   opacity: 0;
1106 | }
1107 | .w-lightbox-view:before {
1108 |   content: "";
1109 |   height: 100vh;
1110 | }
1111 | /* .w-lightbox-content */
1112 | .w-lightbox-group,
1113 | .w-lightbox-group .w-lightbox-view,
1114 | .w-lightbox-group .w-lightbox-view:before {
1115 |   height: 86vh;
1116 | }
1117 | .w-lightbox-frame,
1118 | .w-lightbox-view:before {
1119 |   display: inline-block;
1120 |   vertical-align: middle;
1121 | }
1122 | /*
1123 |  * 1. Remove default margin set by user-agent on the <figure> element.
1124 |  */
1125 | .w-lightbox-figure {
1126 |   position: relative;
1127 |   margin: 0;
1128 |   /* 1 */
1129 | }
1130 | .w-lightbox-group .w-lightbox-figure {
1131 |   cursor: pointer;
1132 | }
1133 | /**
1134 |  * IE adds image dimensions as width and height attributes on the IMG tag,
1135 |  * but we need both width and height to be set to auto to enable scaling.
1136 |  */
1137 | .w-lightbox-img {
1138 |   width: auto;
1139 |   height: auto;
1140 |   max-width: none;
1141 | }
1142 | /**
1143 |  * 1. Reset if style is set by user on "All Images"
1144 |  */
1145 | .w-lightbox-image {
1146 |   display: block;
1147 |   float: none;
1148 |   /* 1 */
1149 |   max-width: 100vw;
1150 |   max-height: 100vh;
1151 | }
1152 | .w-lightbox-group .w-lightbox-image {
1153 |   max-height: 86vh;
1154 | }
1155 | .w-lightbox-caption {
1156 |   position: absolute;
1157 |   right: 0;
1158 |   bottom: 0;
1159 |   left: 0;
1160 |   padding: .5em 1em;
1161 |   background: rgba(0, 0, 0, 0.4);
1162 |   text-align: left;
1163 |   text-overflow: ellipsis;
1164 |   white-space: nowrap;
1165 |   overflow: hidden;
1166 | }
1167 | .w-lightbox-embed {
1168 |   position: absolute;
1169 |   top: 0;
1170 |   right: 0;
1171 |   bottom: 0;
1172 |   left: 0;
1173 |   width: 100%;
1174 |   height: 100%;
1175 | }
1176 | .w-lightbox-control {
1177 |   position: absolute;
1178 |   top: 0;
1179 |   width: 4em;
1180 |   background-size: 24px;
1181 |   background-repeat: no-repeat;
1182 |   background-position: center;
1183 |   cursor: pointer;
1184 |   -webkit-transition: all .3s;
1185 |   transition: all .3s;
1186 | }
1187 | .w-lightbox-left {
1188 |   display: none;
1189 |   bottom: 0;
1190 |   left: 0;
1191 |   /* <svg xmlns="http://www.w3.org/2000/svg" viewBox="-20 0 24 40" width="24" height="40"><g transform="rotate(45)"><path d="m0 0h5v23h23v5h-28z" opacity=".4"/><path d="m1 1h3v23h23v3h-26z" fill="#fff"/></g></svg> */
1192 |   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yMCAwIDI0IDQwIiB3aWR0aD0iMjQiIGhlaWdodD0iNDAiPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHBhdGggZD0ibTAgMGg1djIzaDIzdjVoLTI4eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDN2MjNoMjN2M2gtMjZ6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==");
1193 | }
1194 | .w-lightbox-right {
1195 |   display: none;
1196 |   right: 0;
1197 |   bottom: 0;
1198 |   /* <svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 0 24 40" width="24" height="40"><g transform="rotate(45)"><path d="m0-0h28v28h-5v-23h-23z" opacity=".4"/><path d="m1 1h26v26h-3v-23h-23z" fill="#fff"/></g></svg> */
1199 |   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMjQgNDAiIHdpZHRoPSIyNCIgaGVpZ2h0PSI0MCI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMC0waDI4djI4aC01di0yM2gtMjN6IiBvcGFjaXR5PSIuNCIvPjxwYXRoIGQ9Im0xIDFoMjZ2MjZoLTN2LTIzaC0yM3oiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+");
1200 | }
1201 | /*
1202 |  * Without specifying the with and height inside the SVG, all versions of IE render the icon too small.
1203 |  * The bug does not seem to manifest itself if the elements are tall enough such as the above arrows.
1204 |  * (http://stackoverflow.com/questions/16092114/background-size-differs-in-internet-explorer)
1205 |  */
1206 | .w-lightbox-close {
1207 |   right: 0;
1208 |   height: 2.6em;
1209 |   /* <svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 0 18 17" width="18" height="17"><g transform="rotate(45)"><path d="m0 0h7v-7h5v7h7v5h-7v7h-5v-7h-7z" opacity=".4"/><path d="m1 1h7v-7h3v7h7v3h-7v7h-3v-7h-7z" fill="#fff"/></g></svg> */
1210 |   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMTggMTciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxNyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMCAwaDd2LTdoNXY3aDd2NWgtN3Y3aC01di03aC03eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDd2LTdoM3Y3aDd2M2gtN3Y3aC0zdi03aC03eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=");
1211 |   background-size: 18px;
1212 | }
1213 | /**
1214 |  * 1. All IE versions add extra space at the bottom without this.
1215 |  */
1216 | .w-lightbox-strip {
1217 |   position: absolute;
1218 |   bottom: 0;
1219 |   left: 0;
1220 |   right: 0;
1221 |   padding: 0 1vh;
1222 |   line-height: 0;
1223 |   /* 1 */
1224 |   white-space: nowrap;
1225 |   overflow-x: auto;
1226 |   overflow-y: hidden;
1227 | }
1228 | /*
1229 |  * 1. We use content-box to avoid having to do `width: calc(10vh + 2vw)`
1230 |  *    which doesn’t work in Safari anyway.
1231 |  * 2. Chrome renders images pixelated when switching to GPU. Making sure
1232 |  *    the parent is also rendered on the GPU (by setting translate3d for
1233 |  *    example) fixes this behavior.
1234 |  */
1235 | .w-lightbox-item {
1236 |   display: inline-block;
1237 |   width: 10vh;
1238 |   padding: 2vh 1vh;
1239 |   box-sizing: content-box;
1240 |   /* 1 */
1241 |   cursor: pointer;
1242 |   -webkit-transform: translate3d(0, 0, 0);
1243 |   /* 2 */
1244 | }
1245 | .w-lightbox-active {
1246 |   opacity: .3;
1247 | }
1248 | .w-lightbox-thumbnail {
1249 |   position: relative;
1250 |   height: 10vh;
1251 |   background: #222;
1252 |   overflow: hidden;
1253 | }
1254 | .w-lightbox-thumbnail-image {
1255 |   position: absolute;
1256 |   top: 0;
1257 |   left: 0;
1258 | }
1259 | .w-lightbox-thumbnail .w-lightbox-tall {
1260 |   top: 50%;
1261 |   width: 100%;
1262 |   -webkit-transform: translate(0, -50%);
1263 |   -ms-transform: translate(0, -50%);
1264 |   transform: translate(0, -50%);
1265 | }
1266 | .w-lightbox-thumbnail .w-lightbox-wide {
1267 |   left: 50%;
1268 |   height: 100%;
1269 |   -webkit-transform: translate(-50%, 0);
1270 |   -ms-transform: translate(-50%, 0);
1271 |   transform: translate(-50%, 0);
1272 | }
1273 | /*
1274 |  * Spinner
1275 |  *
1276 |  * Absolute pixel values are used to avoid rounding errors that would cause
1277 |  * the white spinning element to be misaligned with the track.
1278 |  */
1279 | .w-lightbox-spinner {
1280 |   position: absolute;
1281 |   top: 50%;
1282 |   left: 50%;
1283 |   box-sizing: border-box;
1284 |   width: 40px;
1285 |   height: 40px;
1286 |   margin-top: -20px;
1287 |   margin-left: -20px;
1288 |   border: 5px solid rgba(0, 0, 0, 0.4);
1289 |   border-radius: 50%;
1290 |   -webkit-animation: spin .8s infinite linear;
1291 |   animation: spin .8s infinite linear;
1292 | }
1293 | .w-lightbox-spinner:after {
1294 |   content: "";
1295 |   position: absolute;
1296 |   top: -4px;
1297 |   right: -4px;
1298 |   bottom: -4px;
1299 |   left: -4px;
1300 |   border: 3px solid transparent;
1301 |   border-bottom-color: #fff;
1302 |   border-radius: 50%;
1303 | }
1304 | /*
1305 |  * Utility classes
1306 |  */
1307 | .w-lightbox-hide {
1308 |   display: none;
1309 | }
1310 | .w-lightbox-noscroll {
1311 |   overflow: hidden;
1312 | }
1313 | @media (min-width: 768px) {
1314 |   .w-lightbox-content {
1315 |     height: 96vh;
1316 |     margin-top: 2vh;
1317 |   }
1318 |   .w-lightbox-view,
1319 |   .w-lightbox-view:before {
1320 |     height: 96vh;
1321 |   }
1322 |   /* .w-lightbox-content */
1323 |   .w-lightbox-group,
1324 |   .w-lightbox-group .w-lightbox-view,
1325 |   .w-lightbox-group .w-lightbox-view:before {
1326 |     height: 84vh;
1327 |   }
1328 |   .w-lightbox-image {
1329 |     max-width: 96vw;
1330 |     max-height: 96vh;
1331 |   }
1332 |   .w-lightbox-group .w-lightbox-image {
1333 |     max-width: 82.3vw;
1334 |     max-height: 84vh;
1335 |   }
1336 |   .w-lightbox-left,
1337 |   .w-lightbox-right {
1338 |     display: block;
1339 |     opacity: .5;
1340 |   }
1341 |   .w-lightbox-close {
1342 |     opacity: .8;
1343 |   }
1344 |   .w-lightbox-control:hover {
1345 |     opacity: 1;
1346 |   }
1347 | }
1348 | .w-lightbox-inactive,
1349 | .w-lightbox-inactive:hover {
1350 |   opacity: 0;
1351 | }
1352 | .w-richtext:before,
1353 | .w-richtext:after {
1354 |   content: " ";
1355 |   display: table;
1356 | }
1357 | .w-richtext:after {
1358 |   clear: both;
1359 | }
1360 | .w-richtext[contenteditable="true"]:before,
1361 | .w-richtext[contenteditable="true"]:after {
1362 |   white-space: initial;
1363 | }
1364 | .w-richtext ol,
1365 | .w-richtext ul {
1366 |   overflow: hidden;
1367 | }
1368 | .w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:before,
1369 | .w-richtext .w-richtext-figure-selected[data-rt-type="video"] div:before {
1370 |   outline: 2px solid #2895f7;
1371 | }
1372 | .w-richtext .w-richtext-figure-selected.w-richtext-figure-type-image div,
1373 | .w-richtext .w-richtext-figure-selected[data-rt-type="image"] div {
1374 |   outline: 2px solid #2895f7;
1375 | }
1376 | .w-richtext figure.w-richtext-figure-type-video > div:before,
1377 | .w-richtext figure[data-rt-type="video"] > div:before {
1378 |   content: '';
1379 |   position: absolute;
1380 |   display: none;
1381 |   left: 0;
1382 |   top: 0;
1383 |   right: 0;
1384 |   bottom: 0;
1385 |   z-index: 1;
1386 | }
1387 | .w-richtext figure {
1388 |   position: relative;
1389 |   max-width: 60%;
1390 | }
1391 | .w-richtext figure > div:before {
1392 |   cursor: default!important;
1393 | }
1394 | .w-richtext figure img {
1395 |   width: 100%;
1396 | }
1397 | .w-richtext figure figcaption.w-richtext-figcaption-placeholder {
1398 |   opacity: 0.6;
1399 | }
1400 | .w-richtext figure div {
1401 |   /* fix incorrectly sized selection border in the data manager */
1402 |   font-size: 0px;
1403 |   color: transparent;
1404 | }
1405 | .w-richtext figure.w-richtext-figure-type-image,
1406 | .w-richtext figure[data-rt-type="image"] {
1407 |   display: table;
1408 | }
1409 | .w-richtext figure.w-richtext-figure-type-image > div,
1410 | .w-richtext figure[data-rt-type="image"] > div {
1411 |   display: inline-block;
1412 | }
1413 | .w-richtext figure.w-richtext-figure-type-image > figcaption,
1414 | .w-richtext figure[data-rt-type="image"] > figcaption {
1415 |   display: table-caption;
1416 |   caption-side: bottom;
1417 | }
1418 | .w-richtext figure.w-richtext-figure-type-video,
1419 | .w-richtext figure[data-rt-type="video"] {
1420 |   width: 60%;
1421 |   height: 0;
1422 | }
1423 | .w-richtext figure.w-richtext-figure-type-video iframe,
1424 | .w-richtext figure[data-rt-type="video"] iframe {
1425 |   position: absolute;
1426 |   top: 0;
1427 |   left: 0;
1428 |   width: 100%;
1429 |   height: 100%;
1430 | }
1431 | .w-richtext figure.w-richtext-figure-type-video > div,
1432 | .w-richtext figure[data-rt-type="video"] > div {
1433 |   width: 100%;
1434 | }
1435 | .w-richtext figure.w-richtext-align-center {
1436 |   margin-right: auto;
1437 |   margin-left: auto;
1438 |   clear: both;
1439 | }
1440 | .w-richtext figure.w-richtext-align-center.w-richtext-figure-type-image > div,
1441 | .w-richtext figure.w-richtext-align-center[data-rt-type="image"] > div {
1442 |   max-width: 100%;
1443 | }
1444 | .w-richtext figure.w-richtext-align-normal {
1445 |   clear: both;
1446 | }
1447 | .w-richtext figure.w-richtext-align-fullwidth {
1448 |   width: 100%;
1449 |   max-width: 100%;
1450 |   text-align: center;
1451 |   clear: both;
1452 |   display: block;
1453 |   margin-right: auto;
1454 |   margin-left: auto;
1455 | }
1456 | .w-richtext figure.w-richtext-align-fullwidth > div {
1457 |   display: inline-block;
1458 |   /* padding-bottom is used for aspect ratios in video figures
1459 |       we want the div to inherit that so hover/selection borders in the designer-canvas
1460 |       fit right*/
1461 |   padding-bottom: inherit;
1462 | }
1463 | .w-richtext figure.w-richtext-align-fullwidth > figcaption {
1464 |   display: block;
1465 | }
1466 | .w-richtext figure.w-richtext-align-floatleft {
1467 |   float: left;
1468 |   margin-right: 15px;
1469 |   clear: none;
1470 | }
1471 | .w-richtext figure.w-richtext-align-floatright {
1472 |   float: right;
1473 |   margin-left: 15px;
1474 |   clear: none;
1475 | }
1476 | .w-nav {
1477 |   position: relative;
1478 |   background: #dddddd;
1479 |   z-index: 1000;
1480 | }
1481 | .w-nav:before,
1482 | .w-nav:after {
1483 |   content: " ";
1484 |   display: table;
1485 | }
1486 | .w-nav:after {
1487 |   clear: both;
1488 | }
1489 | .w-nav-brand {
1490 |   position: relative;
1491 |   float: left;
1492 |   text-decoration: none;
1493 |   color: #333333;
1494 | }
1495 | .w-nav-link {
1496 |   position: relative;
1497 |   display: inline-block;
1498 |   vertical-align: top;
1499 |   text-decoration: none;
1500 |   color: #222222;
1501 |   padding: 20px;
1502 |   text-align: left;
1503 |   margin-left: auto;
1504 |   margin-right: auto;
1505 | }
1506 | .w-nav-link.w--current {
1507 |   color: #0082f3;
1508 | }
1509 | .w-nav-menu {
1510 |   position: relative;
1511 |   float: right;
1512 | }
1513 | .w--nav-menu-open {
1514 |   display: block !important;
1515 |   position: absolute;
1516 |   top: 100%;
1517 |   left: 0;
1518 |   right: 0;
1519 |   background: #C8C8C8;
1520 |   text-align: center;
1521 |   overflow: visible;
1522 |   min-width: 200px;
1523 | }
1524 | .w--nav-link-open {
1525 |   display: block;
1526 |   position: relative;
1527 | }
1528 | .w-nav-overlay {
1529 |   position: absolute;
1530 |   overflow: hidden;
1531 |   display: none;
1532 |   top: 100%;
1533 |   left: 0;
1534 |   right: 0;
1535 |   width: 100%;
1536 | }
1537 | .w-nav-overlay .w--nav-menu-open {
1538 |   top: 0;
1539 | }
1540 | .w-nav[data-animation="over-left"] .w-nav-overlay {
1541 |   width: auto;
1542 | }
1543 | .w-nav[data-animation="over-left"] .w-nav-overlay,
1544 | .w-nav[data-animation="over-left"] .w--nav-menu-open {
1545 |   right: auto;
1546 |   z-index: 1;
1547 |   top: 0;
1548 | }
1549 | .w-nav[data-animation="over-right"] .w-nav-overlay {
1550 |   width: auto;
1551 | }
1552 | .w-nav[data-animation="over-right"] .w-nav-overlay,
1553 | .w-nav[data-animation="over-right"] .w--nav-menu-open {
1554 |   left: auto;
1555 |   z-index: 1;
1556 |   top: 0;
1557 | }
1558 | .w-nav-button {
1559 |   position: relative;
1560 |   float: right;
1561 |   padding: 18px;
1562 |   font-size: 24px;
1563 |   display: none;
1564 |   cursor: pointer;
1565 |   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1566 |   tap-highlight-color: rgba(0, 0, 0, 0);
1567 |   -webkit-user-select: none;
1568 |   -moz-user-select: none;
1569 |   -ms-user-select: none;
1570 |   user-select: none;
1571 | }
1572 | .w-nav-button.w--open {
1573 |   background-color: #C8C8C8;
1574 |   color: white;
1575 | }
1576 | .w-nav[data-collapse="all"] .w-nav-menu {
1577 |   display: none;
1578 | }
1579 | .w-nav[data-collapse="all"] .w-nav-button {
1580 |   display: block;
1581 | }
1582 | @media screen and (max-width: 991px) {
1583 |   .w-nav[data-collapse="medium"] .w-nav-menu {
1584 |     display: none;
1585 |   }
1586 |   .w-nav[data-collapse="medium"] .w-nav-button {
1587 |     display: block;
1588 |   }
1589 | }
1590 | @media screen and (max-width: 767px) {
1591 |   .w-nav[data-collapse="small"] .w-nav-menu {
1592 |     display: none;
1593 |   }
1594 |   .w-nav[data-collapse="small"] .w-nav-button {
1595 |     display: block;
1596 |   }
1597 |   .w-nav-brand {
1598 |     padding-left: 10px;
1599 |   }
1600 | }
1601 | @media screen and (max-width: 479px) {
1602 |   .w-nav[data-collapse="tiny"] .w-nav-menu {
1603 |     display: none;
1604 |   }
1605 |   .w-nav[data-collapse="tiny"] .w-nav-button {
1606 |     display: block;
1607 |   }
1608 | }
1609 | .w-tabs {
1610 |   position: relative;
1611 | }
1612 | .w-tabs:before,
1613 | .w-tabs:after {
1614 |   content: " ";
1615 |   display: table;
1616 | }
1617 | .w-tabs:after {
1618 |   clear: both;
1619 | }
1620 | .w-tab-menu {
1621 |   position: relative;
1622 | }
1623 | .w-tab-link {
1624 |   position: relative;
1625 |   display: inline-block;
1626 |   vertical-align: top;
1627 |   text-decoration: none;
1628 |   padding: 9px 30px;
1629 |   text-align: left;
1630 |   cursor: pointer;
1631 |   color: #222222;
1632 |   background-color: #dddddd;
1633 | }
1634 | .w-tab-link.w--current {
1635 |   background-color: #C8C8C8;
1636 | }
1637 | .w-tab-content {
1638 |   position: relative;
1639 |   display: block;
1640 |   overflow: hidden;
1641 | }
1642 | .w-tab-pane {
1643 |   position: relative;
1644 |   display: none;
1645 | }
1646 | .w--tab-active {
1647 |   display: block;
1648 | }
1649 | @media screen and (max-width: 479px) {
1650 |   .w-tab-link {
1651 |     display: block;
1652 |   }
1653 | }
1654 | .w-ix-emptyfix:after {
1655 |   content: "";
1656 | }
1657 | @keyframes spin {
1658 |   0% {
1659 |     transform: rotate(0deg);
1660 |   }
1661 |   100% {
1662 |     transform: rotate(360deg);
1663 |   }
1664 | }
1665 | .w-dyn-empty {
1666 |   padding: 10px;
1667 |   background-color: #dddddd;
1668 | }
1669 | .w-dyn-bind-empty {
1670 |   display: none !important;
1671 | }
1672 | .w-condition-invisible {
1673 |   display: none !important;
1674 | }
1675 | 


--------------------------------------------------------------------------------