/* * {
        box-sizing: border-box;
      }*/

      /* Style the body */
      body {
        margin: 0;
      }

      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #F44336;
      }
      li {
        float: left;
      }
      li a {
        display: block;
        color: white;
        text-align: center;
        padding: 16px;
        text-decoration: none;
      }
      li a:hover {
        background-color: #981816;
      }

      h1 {
        color: #008000;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 200%;
      }
      p {
        color: #666666;
        font-family: 'New Roman', serif;
        font-size: 150%;
      }
      .text {
        font-size: 20px;
        padding: 10px;
      }

      .main-container-center {
        margin:auto; 
        max-width:1280px;
      }

      .container-margin {
        margin-left:16px;
        margin-right:16px;
      }

      .page-name {
        font-size:18px; 
        text-align:left;
      }

      /* div horizontal scroll */
      .scroll-container {
        margin-top:32px;
        overflow: auto;
        white-space: nowrap;
      }

      .dummy {
        display: inline-block;background-color:red; margin-right:1px; height:200px; width:400px;padding:16px;
      }

      /* portfolio item section container*/
      .portfolio{
        margin-top:32px;
        background-colour:yellow;
      }


      /* Flex box */

      /* horizonatl scroll */
      .scrolling-wrapper-flexbox {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        margin:32px 0 32px 0;
      }


      /* grid version? */
      .grid-wrapper-flexbox {
        display: flex;
        flex-wrap: wrap;
        overflow-x: auto;
        overflow-y: hidden;
        margin:32px 0 32px 0;
      }

      .grid{margin-bottom:1px;width: 33.2%!important;}
      .grid2{margin-bottom:1px;width: 19.9%!important;}

      .card-title {
          flex: 0 0 auto;
          width:400px; height:200px;
          background-color:#ffffffbd;
          colour:black;
          margin-right:1px;
          padding-left:16px;
        }

      .card {
         position: relative;
          flex: 0 0 auto;
          width:400px; height:auto;
          background-color:black;
          margin-right:1px;
          overflow:hidden;
        }

      .card2 {
         position: relative;
          flex: 0 0 auto;
          width:400px; height:auto;
          margin-right:1px;
          overflow:hidden;
        }

      .card-image{
       width:100%;height:100%;object-fit:cover;">
      }

      .card-sticky {
        padding:16px;
        position: sticky;
        background: #ffffffbd;
        width: 200px;
        top: 40px;
        left: 0;
        color: black;
        flex-grow: 0;
        flex-shrink: 0;
        z-index:10;
      }

      .top-left {
        position:relative;
        z-index:10;
        color:white;
      }

      .scrolling-wrapper {
        -webkit-overflow-scrolling: touch;
      }

      .sub-title{font-size:20px; font-weight:800;line-height:120% ;padding:0 0 16px 0;}
      .meta{font-size:16px; line-height:120% ;padding:2px 4px 16px 0;}

      /* Header/logo Title */
      .header {
        padding: 60px;
        text-align: left;
        background: #1abc9c;
        color: white;
      }

      /* Style the top navigation bar */
      .navbar {
        display: flex;
      }

      /* Style the navigation bar links */
      .navbar a {
        color: white;
        padding: 14px 20px;
        text-decoration: none;
        text-align: center;
        border-bottom:2px solid #333;
        background-color: #333;
      }

      /* Change color on hover */
      .navbar a:hover {
        background-color: #fff;
        color: black;
        border-bottom:2px solid #ffeb00;
      }

      /* Column container */
      .row {  
        display: flex;
        flex-wrap: wrap;
      }

      /* Create two unequal columns that sits next to each other */
      /* Sidebar/left column */
      .side {
        flex: 30%;
        background-color: #f1f1f1;
        padding: 20px;
      }

      /* Main column */
      .main {
        flex: 70%;
        background-color: white;
        padding: 16px;
      }

      /* Fake image, just for this example */
      .fakeimg {
        background-color: #aaa;
        width: 100%;
        padding: 20px;
      }

      /* Overlay text on an image */
      .height-100vh {
        height: 100vh;
        background: black;
      }

      .left-aligned {
        display: flex;
        align-items: left;
        justify-content: left;
      }

      .background-image {
        opacity: 1;
        width: 100%;
        object-fit:cover; 
        height: 100%;
        background-color:black;
      }

      .text {
        font-size:16px;
        position: absolute;
        color: white;
        padding: 8px;
      }

      /* Footer */
      .footer {
        padding: 20px;
        text-align: center;
        background: #ddd;
      }

      /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
      @media screen and (max-width: 900px) {
        .row, .navbar {   
          flex-direction: column;
        }

      .grid {
        width: 49%!important;
      }

      .grid2 {
        width: 20%!important;
      }

      .flex-container {
        display: flex;
        flex-wrap: wrap;
        font-size: 30px;
        text-align: center;
        max-width:1280px;
      }

      .flex-item-left {
        background-color: #f1f1f1;
        padding: 10px;
        flex: 50%;
      }

      .flex-item-right {
        background-color: dodgerblue;
        padding: 10px;
        flex: 50%;
      }

      }

            /* MOBILE Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
      @media screen and (max-width: 600px) {
        .row, .navbar {   
          flex-direction: row;
        }

        .grid {width: 100%!important;}
        .grid2 {width: 49.7%!important;}
        .card{width:90%!important}
        .container-margin {margin-left: 8px;margin-right: 8px;}
        .main {padding: 0px;}
        .side {padding: 16px;}

      }

      /* Responsive layout - makes a one column-layout instead of a two-column layout */
      @media (max-width: 800px) {
        .flex-item-right, .flex-item-left {
          flex: 100%;
        }
      }