/*
	specifying that all objects use
	the border-box model (not the content-box model)
*/
*, *::after, *::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/*
	specifying if the class of an item starts with
	'grid-col-', then we should apply the styling listed
*/
[class^='grid-col-'] {
	padding: 0; 
	margin: 0;
}

.grid-row:after {
	content: "";
	display: block;
	clear: both;
}

/*
	grid for the top nav
*/
.grid-col-1of5 > .button-nav {
	float: right;
}

.grid-col-1of5 > .back {
	float: left;
}

/*
	grid for main content
*/
.grid-col-3of12{
	width: 25%;
	float: left;
}

.grid-col-4of12{
	width: 33.33333333333%;
	float: left;
}

.grid-col-5of12 {
	width: 41.66%;
	float: left;
}

.grid-col-6of12{
	width: 50%;
	float: left;
}

.grid-col-7of12{
	width: 58.33%;
	float: left;
}

.grid-col-8of12{
	width: 66.666%;
	float: left;
}

.grid-col-9of12{
	width: 75%;
	float: left;
}

.grid-col-12of12{
	width: 100%;
	float: left;
}

/*
	grid for mobile nav
*/

.grid-col-1of4{
	width: 25%;
	float: left;
}

.col-1of5 {
  width: 20%;
  float: left;
}


.toggle-side-nav-mobile{
  display: none;
}

.toggle-side-nav {
  display: block;
}


@media (max-width: 60em) {
  
  .grid-col-3of12 {
    width: 50%;
  }

.padded-col-centered-1of4 {
  padding-right: 1.2em;
}

.padded-col-centered-2of4 {
  padding-right: 0;
  padding-left: 1.2em;
}

.padded-col-centered-3of4 {
  padding-left: 0;
  padding-right: 1.2em;
}

.padded-col-centered-4of4 {
  padding-left: 1.2em;
}

  .toggle-side-nav .grid-col-3of12 {
    width: 25%;
  }

  .home-head-container img {
  	width: 100%;
  }

  .no-touch #cd-vertical-nav a:hover .cd-label {
  opacity: 0;
  }

  .proj-container {
  	width: 100%;
  }

  .home-container .proj-list-title  {
    width: 80%;
  }

  .home-container .proj-list-desc  {
    width: 80%;
    padding: 4em 4em;
  }

  .metrics {
    padding: 0 20%;
  }

  .touchpoints-photo .grid-col-5of12 {
    width: 100%;
  }

  .touchpoints-photo .expanded-content {
    width: 100%;
    margin-top: 3em;
    margin-left: 0;
    padding-left: 0;
  }

  .about-main-txt {
    padding: 3em 12em 3em 11em;
  }

  #contact-info {
    padding: 1em 12em 1em 11em;
  }

}

@media (max-width: 55em) {

  .grid-col-5of12 {
    width: 100%;
  }

  .grid-col-7of12 {
    width: 100%;
  }

  .grid-col-9of12 {
    width: 100%;
  }

  .grid-col-6of12 {
    width: 100%;
  }

  .case-item {
    flex: 1 100%;
    margin-bottom: 1.7em;
  }

  .case-item-wide {
    text-align: left;
  }

  .case-item-wide .case-item-desc {
  margin-left: 0;
  margin-right: 0;
  max-width: 65%;
}

  .flex-grid-thirds .col {
  width: 100%;
}

  .proj-title {
    font-size: 4rem;
    padding-left: 9%;
  }

  .proj-sub-title {
    padding-left: 9%;
    margin-bottom: 1em;
  }

  .proj-desc {
    font-size: 1.3rem;
    padding-right: 9%;
    padding-left: 9%;
    margin-bottom: 1.5em;
  }

  .metrics {
    padding: 0 10%;
  }

  .summary {
    font-size: 1.2rem;
    letter-spacing: 0.03rem;
    line-height: 1.8rem;
  }

  .bump-down {
  padding-top: 0;
}

  .second-col {
    padding-left: 0;
  }

  .coloured-block p {
    font-size: 1.2rem;
    letter-spacing: 0.03rem;
    line-height: 1.8rem;
    padding: 0 5%;
  }

.grid-col-4of12 {
    width: 100%;
  }

  .about-main-txt {
    padding: 3em 5em;
  }

  #contact-info {
    padding: 1em 5em;
  }
}

@media (max-width: 43em) {


  .grid-col-3of12 {
    width: 100%;
  }

  .grid-col-8of12 {
    width: 100%;
  }

  .col-1of5 {
    width: 100%;
  }

  .padded-col-centered-1of4 {
    padding-right: 0;
  }

  .padded-col-centered-2of4 {
  padding-right: 0;
  padding-left: 0;
  } 

  .padded-col-centered-3of4 {
    padding-left: 0;
    padding-right: 0;
  }

  .padded-col-centered-4of4 {
    padding-left: 0;
  }

  nav {
  	background-color: white;
  }

  #cd-vertical-nav {
    display: none;
  }

  .home-head-container {
    margin-bottom: 8em;
  }


  .home-head-container img {
  	width: 100%;
  	height: 25em;
  	padding: 0;
  }

  .home-container {
  	top: 0;
  	margin: 0;
  	padding: 0;
  }

  .home-head-container h1 {
    font-size: 3em;
    top: 8.9em;
  }

  .home-head-container .proj-container {
    margin-bottom: 4.5em;
  }

  .proj-container {
  	width: 100%;
  	height: 25em;
  	padding: 0;
  	margin: 0;
  }

  .home-container .proj-list-title  {
    width: 100%;
    padding: 4em 3em;
  }

  .home-container .proj-list-desc  {
    width: 100%;
    padding: 4em 3em;
  }

  .proj-header img {
    height: 30em;
  }

  .about-main-txt {
    top: 5em;
    margin: 0;
    padding: 2em 2em;
  }

  .about-intro {
    font-size: 1.2rem;
    padding-bottom: .3em;
  }

  .about-main {
    font-size: 1.1rem;
    line-height: 1.6rem;
  }

  #contact-info {
    padding: 1em 2em;
    line-height: 2.5rem;
  }

  .contact-label {
  font-size: 1.2rem;
  line-height: 1.8rem;
  margin-bottom: .7em;
  }

  .button {
    font-size: 1.2rem;
  }

  .toggle-side-nav-mobile {
    display: block;
  }

  .toggle-side-nav {
    display: none;
  }

  .fixed-page-menu {
    position:relative;
    top: 2em;
    left: 0;
  }

  #styleguide {
  position: relative;
  left: 0;
  width: 95%;
  text-align: left;
  padding: 2em;
}

  .summary {
    padding-top: 1.5em;
  }

  .coloured-block {
    padding: 3em 2.1em;
  }

  .coloured-block p {
    font-size: 1.1rem;
    letter-spacing: 0.03rem;
    line-height: 1.4rem;
    padding: 0 0;
  }

  .coloured-block-hemlos {
    padding: 3em 2.1em;
  }

  .coloured-block-hemlos p {
    font-size: 1.1rem;
    letter-spacing: 0.03rem;
    line-height: 1.4rem;
    padding: 0 0;
  }

}

  @media (max-width: 33em) {

  .grid-col-4of12 {
    width: 100%;
  }

  .home-head-container h1 {
  	padding: 0 1em;
  	font-size: 3em;
  	line-height: .9em;
  	top: 9.3em;
  }

  .home-head-container p{
  	top: 2.2em;
  }

  .home-container .proj-list-desc  {
    width: 100%;
    padding: 4em 1em;
  }

  .proj-header img {
    height: 25em;
  }

  .role {
    margin-bottom: 1em;
  }

  .proj-section .excerpt {
    font-size: 1.2rem;
    line-height: 1.8rem;
  }

}