/* --------------FLEXBOX------------------ */
/* Use this stylesheet for layout styling. Edit as needed to match your own design. */




/* CORE FRAMEWORKS */
#hero {
  width: 100vw;
}

#hero .text-area {
  width: 100%;
  padding: 5em 0;
}

.text-centred {
  text-align: center;
}
/* The Overlay (background) */



/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */


.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  width: 25vw;
}
/* FOR DEMO ONLY - these few rules have no inherant styling benefit, they are only to allow you to see what is happening on the page. You can still build off of them if you like, or delete them. */

.sec-with-columns {
  display: flex;
  width: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: 0 auto;
  padding: 0 3em 5em 3em;
  width: 100%;
}

.project-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: 0 auto;
  padding: 0 3em 2em 3em;
}

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
}

.row.full-width {
  justify-content: flex-start;
}

.flex-item {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}


.flex-gap-sm {
  gap: 10px;
}
.flex-gap-md {
  gap: 20px;
}
.flex-gap-lg {
  gap: 40px;
}

.order {
  order: 1;
}


/* ----Responsive layout - Media queries-------- */
/* You can edit the rules inside of these media queries, but you can also edit the breakpoints. */

@media (max-width: 600px) {
  /* anything you only want applied at mobile sizes can go here */
 .flex-item {
    width: calc(100vw - 4em);
    height: auto;
  }
  
}
@media only screen and (min-width: 601px) {
  #mobile-nav {
    display: none;
  }			

  #navlist li
  {
    display: inline;
    list-style-type: none;
    margin-left: auto;
  }

}

@media (min-width: 768px) {
/* anything you want to kick in at small tablet and above can go here */

}

@media (min-width: 900px) {
/* anything you want to kick in at large tablet and above can go here */

.project-container {
  padding: 0 10em 2em 10em;
}



 }

 @media (min-width: 1300px) {

  .order {
    order: 0;
  }

  .project-container {
    padding: 0 17em 2em 17em;
  }

  .flex-item.one-third {
    width: 33.33%;
    flex-grow: unset;
  }
  
  .flex-item.two-thirds {
    flex-grow: unset;
    width: 66.67%;
  }
  
    .flex-gap-sm .flex-item.one-third {
      width: calc(33.33% - 6.67px);
    }
  
    .flex-gap-sm .flex-item.two-thirds {
      width: calc(66.67% - 3.33px);
    }
  
    .flex-gap-md .flex-item.one-third {
      width: calc(33.33% - 13.34px);
    }
  
    .flex-gap-md .flex-item.two-thirds {
      width: calc(66.67% - 6.66px);
    }
  
    .flex-gap-lg .flex-item.one-third {
      width: calc(33.33% - 26.67px);
    }
  
    .flex-gap-lg .flex-item.two-thirds {
      width: calc(66.67% - 13.33px);
    }
  
    .flex-item.one-quarter {
      flex-grow: unset;
      width: 25%;
    }
  
    .flex-item.three-quarters {
      flex-grow: unset;
      width: 75%;
    }
  
    .flex-gap-sm .flex-item.one-quarter {
      width: calc(25% - 7.5px);
    }
  
    .flex-gap-sm .flex-item.three-quarters {
      width: calc(75% - 3.5px);
    }
  
    .flex-gap-md .flex-item.one-quarter {
      width: calc(25% - 15px);
    }
  
    .flex-gap-md .flex-item.three-quarters {
      width: calc(75% - 5px);
    }
  
    .flex-gap-lg .flex-item.one-quarter {
      width: calc(25% - 30px);
    }
  
    .flex-gap-lg .flex-item.three-quarters {
      width: calc(75% - 10px);
    }
  
    .flex-item.one-half {
      flex-grow: unset;
      width: 50%;
    }
  
    .flex-gap-sm .flex-item.one-half {
      width: calc(50% - 5px);
    }
  
    .flex-gap-md .flex-item.one-half {
      width: calc(50% - 10px);
    }
  
    .flex-gap-lg .flex-item.one-half {
      width: calc(50% - 20px);
    }
  /* anything you want to kick in at desktop and above can go here */
  .container {
    max-width: 1600px;
    /* this max-width is entirely optional, and can be edited to your fit your design. Check how your design will look on large screens by pressing CMMD- in your browser, and decide if and how you want to constrain the overall content width. */
  }
     
 }