Added images as mock graphs in the country page

src/app/pages/countrypage/country-page.component.html

@@ -2,148 +2,19 @@
   <div class="uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up uk-padding-remove" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
   <!--<div class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up uk-padding-remove" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">-->
 
-    <!--<aside id="left-col" class="uk-light" uk-height-viewport="offset-bottom: 5">-->
-      <!--<div class="bar-wrap">-->
-        <!--<ul class="uk-nav-default uk-nav-parent-icon" uk-nav>-->
-          <!--<li class="uk-active"><a href="#">Active</a></li>-->
-          <!--<li class="uk-parent">-->
-            <!--<a href="#">Parent</a>-->
-            <!--<ul class="uk-nav-sub">-->
-              <!--<li><a href="#">Sub item</a></li>-->
-              <!--<li><a href="#">Sub item</a></li>-->
-            <!--</ul>-->
-          <!--</li>-->
-          <!--<li class="uk-parent">-->
-            <!--<a href="#">Parent</a>-->
-            <!--<ul class="uk-nav-sub">-->
-              <!--<li><a href="#">Sub item</a></li>-->
-              <!--<li><a href="#">Sub item</a></li>-->
-            <!--</ul>-->
-          <!--</li>-->
-          <!--<li class="uk-nav-header">Header</li>-->
-          <!--<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>-->
-          <!--<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>-->
-          <!--<li class="uk-nav-divider"></li>-->
-          <!--<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>-->
-        <!--</ul>-->
-      <!--</div>-->
-    <!--</aside>-->
-    <!--<div id="right-col">-->
-      <!--<div class="uk-container uk-margin-medium-top">-->
-        <!--<div class="uk-grid uk-child-width-1-3" uk-grid>-->
-          <!--<div>-->
-            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
-            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
-          <!--</div>-->
-          <!--<div>-->
-            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
-            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
-          <!--</div>-->
-          <!--<div>-->
-            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
-            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
-          <!--</div>-->
-          <!--<div class="uk-width-1-1">-->
-            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
-            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
-          <!--</div>-->
-          <!--<div>-->
-            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
-            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
-          <!--</div>-->
-          <!--<div>-->
-            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
-            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
-          <!--</div>-->
-          <!--<div>-->
-            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
-            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
-          <!--</div>-->
-          <!--<div class="uk-width-1-1">-->
-            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
-            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
-          <!--</div>-->
-
-        <!--</div>-->
-        <!--<div class="uk-grid uk-child-width-1-3" uk-grid>-->
-          <!--<div>-->
-            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
-            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
-          <!--</div>-->
-          <!--<div>-->
-            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
-            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
-          <!--</div>-->
-          <!--<div>-->
-            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
-            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
-          <!--</div>-->
-          <!--<div class="uk-width-1-1">-->
-            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
-            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
-          <!--</div>-->
-          <!--<div>-->
-            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
-            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
-          <!--</div>-->
-          <!--<div>-->
-            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
-            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
-          <!--</div>-->
-          <!--<div>-->
-            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
-            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
-          <!--</div>-->
-          <!--<div class="uk-width-1-1">-->
-            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
-            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
-          <!--</div>-->
-
-        <!--</div>-->
-        <!--<div class="uk-grid uk-child-width-1-3" uk-grid>-->
-          <!--<div>-->
-            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
-            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
-          <!--</div>-->
-          <!--<div>-->
-            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
-            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
-          <!--</div>-->
-          <!--<div>-->
-            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
-            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
-          <!--</div>-->
-          <!--<div class="uk-width-1-1">-->
-            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
-            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
-          <!--</div>-->
-          <!--<div>-->
-            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
-            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
-          <!--</div>-->
-          <!--<div>-->
-            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
-            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
-          <!--</div>-->
-          <!--<div>-->
-            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
-            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
-          <!--</div>-->
-          <!--<div class="uk-width-1-1">-->
-            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
-            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
-          <!--</div>-->
-
-        <!--</div>-->
-      <!--</div>-->
-    <!--</div>-->
-
 
     <div class="uk-grid uk-grid-small">
 
       <div class="uk-width-4-5 uk-margin-medium-bottom">
 
         <div class="uk-container uk-container-expand uk-margin-medium-top">
+          <ul class="uk-breadcrumb">
+            <li><a [routerLink]="['/home']">Home</a></li>
+            <li><span>{{countryName}}</span></li>
+          </ul>
+        </div>
+
+        <div class="uk-container uk-container-expand uk-margin-top">
           <div class="uk-text-right">
             <button class="md-btn md-btn-primary"><i class="fas fa-code uk-margin-small-right"></i>Embed</button>
             <button class="md-btn md-btn-primary uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Download CSV</button>
@@ -282,7 +153,7 @@
         </div>
 
         <!--GREEN VS. GOLD-->
-        <div class="uk-container uk-container-expand uk-margin-medium-top">
+        <div class="uk-container uk-container-expand contentSectionContainer uk-margin-medium-top">
           <h2 class="heading_c uk-margin-medium-bottom uk-text-center-medium">
             Green vs. Gold
             <!--<span class="sub-heading">The Best Images From Around The World</span>-->
@@ -301,7 +172,8 @@
                   </h3>
                 </div>
                 <div class="md-card-content">
-                  Expedita ut nobis voluptatem nostrum minima qui reiciendis placeat eaque quia enim aliquam sunt sed nihil in sapiente ea rerum aperiam nemo neque eius velit expedita fugiat pariatur sed et fuga inventore sed illo aut ea ipsa nesciunt adipisci id sed consequatur aliquam molestias dolores dolores debitis exercitationem laudantium quas excepturi qui qui esse neque id delectus saepe voluptatem et error et qui voluptates omnis quasi nulla minima consequuntur natus.                        </div>
+                  <img src="../../../assets/img/mocks/monthly-average-temperat.png">
+                </div>
               </div>
             </div>
             <div class="uk-width-1-2">
@@ -317,14 +189,15 @@
                   </h3>
                 </div>
                 <div class="md-card-content">
-                  Expedita ut nobis voluptatem nostrum minima qui reiciendis placeat eaque quia enim aliquam sunt sed nihil in sapiente ea rerum aperiam nemo neque eius velit expedita fugiat pariatur sed et fuga inventore sed illo aut ea ipsa nesciunt adipisci id sed consequatur aliquam molestias dolores dolores debitis exercitationem laudantium quas excepturi qui qui esse neque id delectus saepe voluptatem et error et qui voluptates omnis quasi nulla minima consequuntur natus.                        </div>
+                  <img src="../../../assets/img/mocks/stacked-bar-chart.png">
+                </div>
               </div>
             </div>
           </div>
         </div>
 
         <!--EU FUNDED OPEN SCIENCE-->
-        <div class="uk-container uk-container-expand uk-margin-medium-top">
+        <div class="uk-container uk-container-expand contentSectionContainer uk-margin-medium-top">
           <h2 class="heading_c uk-margin-medium-bottom uk-text-center-medium">
             EU funded Open Science
             <!--<span class="sub-heading">The Best Images From Around The World</span>-->
@@ -343,7 +216,8 @@
                   </h3>
                 </div>
                 <div class="md-card-content">
-                  Expedita ut nobis voluptatem nostrum minima qui reiciendis placeat eaque quia enim aliquam sunt sed nihil in sapiente ea rerum aperiam nemo neque eius velit expedita fugiat pariatur sed et fuga inventore sed illo aut ea ipsa nesciunt adipisci id sed consequatur aliquam molestias dolores dolores debitis exercitationem laudantium quas excepturi qui qui esse neque id delectus saepe voluptatem et error et qui voluptates omnis quasi nulla minima consequuntur natus.                        </div>
+                  <img src="../../../assets/img/mocks/snow-depth-at-vikjafjell.png">
+                </div>
               </div>
             </div>
           </div>
@@ -361,7 +235,33 @@
                   </h3>
                 </div>
                 <div class="md-card-content">
-                  Expedita ut nobis voluptatem nostrum minima qui reiciendis placeat eaque quia enim aliquam sunt sed nihil in sapiente ea rerum aperiam nemo neque eius velit expedita fugiat pariatur sed et fuga inventore sed illo aut ea ipsa nesciunt adipisci id sed consequatur aliquam molestias dolores dolores debitis exercitationem laudantium quas excepturi qui qui esse neque id delectus saepe voluptatem et error et qui voluptates omnis quasi nulla minima consequuntur natus.                        </div>
+                  <table class="uk-table uk-table-small uk-table-divider">
+                    <thead>
+                    <tr>
+                      <th>Table Heading</th>
+                      <th>Table Heading</th>
+                      <th>Table Heading</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                      <td>Table Data</td>
+                      <td>Table Data</td>
+                      <td>Table Data</td>
+                    </tr>
+                    <tr>
+                      <td>Table Data</td>
+                      <td>Table Data</td>
+                      <td>Table Data</td>
+                    </tr>
+                    <tr>
+                      <td>Table Data</td>
+                      <td>Table Data</td>
+                      <td>Table Data</td>
+                    </tr>
+                    </tbody>
+                  </table>
+                </div>
               </div>
             </div>
             <div class="uk-width-1-2">
@@ -377,14 +277,40 @@
                   </h3>
                 </div>
                 <div class="md-card-content">
-                  Expedita ut nobis voluptatem nostrum minima qui reiciendis placeat eaque quia enim aliquam sunt sed nihil in sapiente ea rerum aperiam nemo neque eius velit expedita fugiat pariatur sed et fuga inventore sed illo aut ea ipsa nesciunt adipisci id sed consequatur aliquam molestias dolores dolores debitis exercitationem laudantium quas excepturi qui qui esse neque id delectus saepe voluptatem et error et qui voluptates omnis quasi nulla minima consequuntur natus.                        </div>
+                  <table class="uk-table uk-table-small uk-table-divider">
+                    <thead>
+                    <tr>
+                      <th>Table Heading</th>
+                      <th>Table Heading</th>
+                      <th>Table Heading</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                      <td>Table Data</td>
+                      <td>Table Data</td>
+                      <td>Table Data</td>
+                    </tr>
+                    <tr>
+                      <td>Table Data</td>
+                      <td>Table Data</td>
+                      <td>Table Data</td>
+                    </tr>
+                    <tr>
+                      <td>Table Data</td>
+                      <td>Table Data</td>
+                      <td>Table Data</td>
+                    </tr>
+                    </tbody>
+                  </table>
+                </div>
               </div>
             </div>
           </div>
         </div>
 
         <!--FUNDING SOURCES-->
-        <div class="uk-container uk-container-expand uk-margin-medium-top">
+        <div class="uk-container uk-container-expand contentSectionContainer uk-margin-medium-top">
           <h2 class="heading_c uk-margin-medium-bottom uk-text-center-medium">
             Funding sources
             <!--<span class="sub-heading">The Best Images From Around The World</span>-->
@@ -403,14 +329,15 @@
                   </h3>
                 </div>
                 <div class="md-card-content">
-                  Expedita ut nobis voluptatem nostrum minima qui reiciendis placeat eaque quia enim aliquam sunt sed nihil in sapiente ea rerum aperiam nemo neque eius velit expedita fugiat pariatur sed et fuga inventore sed illo aut ea ipsa nesciunt adipisci id sed consequatur aliquam molestias dolores dolores debitis exercitationem laudantium quas excepturi qui qui esse neque id delectus saepe voluptatem et error et qui voluptates omnis quasi nulla minima consequuntur natus.                        </div>
+                  <img src="../../../assets/img/mocks/historic-world-populatio.png">
+                </div>
               </div>
             </div>
           </div>
         </div>
 
         <!--PROJECT PERFORMANCE-->
-        <div class="uk-container uk-container-expand uk-margin-medium-top">
+        <div class="uk-container uk-container-expand contentSectionContainer uk-margin-medium-top">
           <h2 class="heading_c uk-margin-medium-bottom uk-text-center-medium">
             Project performance
             <!--<span class="sub-heading">The Best Images From Around The World</span>-->
@@ -429,7 +356,8 @@
                   </h3>
                 </div>
                 <div class="md-card-content">
-                  Expedita ut nobis voluptatem nostrum minima qui reiciendis placeat eaque quia enim aliquam sunt sed nihil in sapiente ea rerum aperiam nemo neque eius velit expedita fugiat pariatur sed et fuga inventore sed illo aut ea ipsa nesciunt adipisci id sed consequatur aliquam molestias dolores dolores debitis exercitationem laudantium quas excepturi qui qui esse neque id delectus saepe voluptatem et error et qui voluptates omnis quasi nulla minima consequuntur natus.                        </div>
+                  <img src="../../../assets/img/mocks/historic-world-populatio-2.png">
+                </div>
               </div>
             </div>
             <div class="uk-width-1-3">
@@ -445,7 +373,8 @@
                   </h3>
                 </div>
                 <div class="md-card-content">
-                  Expedita ut nobis voluptatem nostrum minima qui reiciendis placeat eaque quia enim aliquam sunt sed nihil in sapiente ea rerum aperiam nemo neque eius velit expedita fugiat pariatur sed et fuga inventore sed illo aut ea ipsa nesciunt adipisci id sed consequatur aliquam molestias dolores dolores debitis exercitationem laudantium quas excepturi qui qui esse neque id delectus saepe voluptatem et error et qui voluptates omnis quasi nulla minima consequuntur natus.                        </div>
+                  <img src="../../../assets/img/mocks/historic-world-populatio-3.png">
+                </div>
               </div>
             </div>
             <div class="uk-width-1-3">
@@ -461,14 +390,15 @@
                   </h3>
                 </div>
                 <div class="md-card-content">
-                  Expedita ut nobis voluptatem nostrum minima qui reiciendis placeat eaque quia enim aliquam sunt sed nihil in sapiente ea rerum aperiam nemo neque eius velit expedita fugiat pariatur sed et fuga inventore sed illo aut ea ipsa nesciunt adipisci id sed consequatur aliquam molestias dolores dolores debitis exercitationem laudantium quas excepturi qui qui esse neque id delectus saepe voluptatem et error et qui voluptates omnis quasi nulla minima consequuntur natus.                        </div>
+                  <img src="../../../assets/img/mocks/historic-world-populatio-4.png">
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
 
-      <div class="uk-width-1-5 uk-padding-remove">
+      <aside class="uk-width-1-5 uk-padding-remove">
         <div id="sidebar_main" class="md-card dark-grey-box infoBox">
           <div class="md-card-content">
             <h3 class="uk-text-center">{{countryName | uppercase}}</h3>
@@ -505,7 +435,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </aside>
 
 
       <!--<div class="uk-width-large-3-5 uk-container-center uk-text-center">-->

src/app/shared/topmenu/top-menu.component.html

@@ -81,7 +81,7 @@
                 <!--<span *ngIf="getIsUserLoggedIn()">{{getUserName()}}</span>-->
                 <ul class="uk-list uk-margin-top">
                   <li>
-                    <a class="uk-search-input" [routerLink]="['home']" [routerLinkActive]="['uk-active']">About</a>
+                    <a class="uk-search-input" [routerLink]="['/home']" [routerLinkActive]="['uk-active']">About</a>
                   </li>
                   <li>
                     <a class="uk-search-input" >Methodology</a>

src/assets/css/os-observatory-custom.css

@@ -374,3 +374,96 @@ a.backToOriginalInfoBox, a.backToOriginalInfoBox:hover, a.backToOriginalInfoBox:
 #right-col {
   margin-left: 260px;
 }
+
+
+
+/*#sc-sidebar-main {*/
+
+  /*position: fixed;*/
+  /*top: 48px;*/
+  /*left: 0;*/
+  /*bottom: 0;*/
+  /*-webkit-box-sizing: border-box;*/
+  /*box-sizing: border-box;*/
+  /*width: 260px;*/
+  /*z-index: 1300;*/
+  /*border-right: 1px solid*/
+
+  /*rgba(0,0,0,.08);*/
+
+  /*background:*/
+
+    /*#fff;*/
+  /*display: -webkit-box;*/
+  /*display: -ms-flexbox;*/
+  /*display: flex;*/
+  /*-webkit-box-orient: vertical;*/
+  /*-webkit-box-direction: normal;*/
+  /*-ms-flex-direction: column;*/
+  /*flex-direction: column;*/
+
+/*}*/
+
+/*#sc-sidebar-main .uk-offcanvas-bar {*/
+
+  /*padding: 0;*/
+
+/*}*/
+
+/*#sc-sidebar-main .uk-offcanvas-bar {*/
+
+  /*top: 0;*/
+  /*display: -webkit-box;*/
+  /*display: -ms-flexbox;*/
+  /*display: flex;*/
+  /*-webkit-box-orient: vertical;*/
+  /*-webkit-box-direction: normal;*/
+  /*-ms-flex-direction: column;*/
+  /*flex-direction: column;*/
+  /*position: static;*/
+  /*background: 0 0;*/
+  /*-webkit-box-shadow: none;*/
+  /*box-shadow: none;*/
+  /*-webkit-transform: none;*/
+  /*transform: none;*/
+  /*overflow-x: hidden;*/
+  /*overflow-y: visible;*/
+  /*height: 100%;*/
+  /*width: 260px;*/
+
+/*}*/
+
+/*#sc-page-wrapper {*/
+
+  /*height: calc(100% - 48px);*/
+  /*-webkit-box-flex: 1;*/
+  /*-ms-flex: 1;*/
+  /*flex: 1;*/
+
+/*}*/
+
+/*#sc-page-wrapper {*/
+
+  /*padding-left: 260px;*/
+  /*-webkit-transition: padding 140ms ease-out;*/
+  /*transition: padding 140ms ease-out;*/
+
+/*}*/
+
+
+
+
+/********************************************/
+
+/*.contentSectionContainer .md-card-content {*/
+  /*max-height: 300px;*/
+/*}*/
+
+.contentSectionContainer .md-card-content img {
+  height:  250px;
+  width: 100%;
+}
+
+/*.contentSectionContainer .md-card-content {*/
+  /*text-align: center;*/
+/*}*/