/* ************** HEADER ******************* */

@media all and (max-width: 768px) {
	
	.desktopOnly {
		display: none;
	}
  
  header .menuBtn {
	left: calc(4% - 10px);
    padding: 10px;
  }
  
  .menuBtn:after {
	  width: 40px;
	  height: 40px;
	  top: 2px;
	  left: 5px;
  }
  
  header .logo {
	  width: 100px;
	  right: 4%;
  }
  
  header nav {
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    transform: translate(-100%, 0%);
    opacity: 0;
    text-align: center;
    transition: opacity 0.5s 0s, transform 0s 0.5s;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
    justify-content: flex-start;
  }

  header nav p {
    text-align: center;
  }

  .menuOn header nav {
    transform: translate(0%, 0%);
    opacity: 1;
    transition: opacity 0.5s 0s, transform 0s 0s;
  }

  .menuBtn {
    z-index: 100;
  }

  header nav ul.main {
    position: relative;
    z-index: 5;
    top: 0;
    left: 0;
    height: auto;
    width: 100%;
    transform: unset;
    padding-bottom: 50px;
    padding-left: 0;
    padding-top: 125px;
  }

  header nav ul.sub li a:after {
    display: none;
  }

  header nav ul {
    list-style-type: none;
    position: relative;
    z-index: 5;
    top: auto;
    left: auto;
    height: auto;
    transform: unset;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  header nav ul.reels {
    text-align: center;
    margin-left: 0 !important;
  }
  
  header nav li.parent {
    font-size: 22px;
    width: 100%;
    margin-bottom: 40px;
    flex-direction: column;
    align-items: center;
  }

  header nav li.parent:last-child {
    margin-bottom: 0;
  }

  header nav li.parent:after {
    top: auto;
    bottom: -14px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 1px;
  }

  header nav li {
    font-size: 24px;
	width: 100%;
  }

  header ul.workNav {
    display: none;
  }
  
  header nav li.locations:before {
	  width: 50%;
  }

  header nav ul.sub {
    align-items: center;
    justify-content: center;
  }

  header nav .social ul {
    flex-direction: row;
  }

  header nav .social {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 80px auto;
    padding: 0;
  }

  header nav .social ul li {
    width: auto;
    margin: 0 2rem;
  }

  /* 		LANDING PAGE     */
  .home .intro .text {
    left: 4%;
    width: 94%;
    margin-top: 5%;
    padding-top: 25px;
  }

  .home .intro .bottom_left {
    width: 120px;
    bottom: 15%;
  }

  .intro .text h1 {
    font-size: 40px !important;
    margin-bottom: 10px;
  }

  header nav li .col:first-child {
    text-align: center;
    margin-right: 0;
    margin-left: 0;
  }

  header nav li.locations {
    margin: 16px auto 50px auto;
    padding-top: 50px;
	padding-bottom: 50px;
    width: 100%;
    text-align: center;
  }

  header nav li .col {
    width: 100%;
    text-align: center;
  }

  header nav li .col:nth-child(2) {
    margin-top: 20px;
  }

  /*  inner text page  */
  .inner.textpage .module p {
    width: 100%;
  }

  .inner.textpage .module h2 {
    font-size: 20pt;
  }

  .inner.textpage .module .titles span {
    font-size: 11px;
  }

  .inner.textpage .module .titles span:before {
    margin: 0 10px;
  }

  footer .inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  footer .inner .col:last-child {
    width: 100%;
    text-align: center;
  }

  footer .inner .col {
    display: inline-block;
    zoom: 1;
    vertical-align: top;
    width: 100%;
    text-align: center;
  }
  
  /* HOME */
  .home .intro {
    min-height: auto;
    height: 100vh;
    position: fixed;
    top: 0px;
  }

  /*  ABOUT  */
  
  .textpage {
	  margin: 50px auto;
	  width: 92%;
  }

  .textpage p {
    width: 100%;
  }
  
  .inner.textpage .module {
	  margin: 30px auto 0px auto;
  }
  
  .inner.textpage .module .cell {
	  margin-bottom: 40px;
  }
  
  .biopage .modwrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .biopage .module {
    width: 100%;
    text-align: center;
  }

  .biopage .module .cell {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .biopage .module:last-child {
    margin-left: 0;
  }

  .biopage .module h1.modtitle {
    text-align: center;
  }

  .biopage .module .cell .textwrap {
    margin-left: 0;
    margin-right: 0;
    margin-top: 1em;
    text-align: center;
    width: 100%;
  }
  /* CONTACT PAGE */

  .inner.contactpage {
    position: relative;
    height: auto;
  }
  
	.inner.contactpage .intro {
	  margin: 50px auto;
	}

  .inner.contactpage:before {
    height: 0;
  }

  .inner.contactpage .intro .text {
    display: flex;
    flex-direction: column;
    padding-top: 0px;
  }

  .inner.contactpage .intro .text .col {
    margin-left: 0;
    left: 3%;
    position: relative;
    width: 100%;
    left: 0;
    order: 2;
    margin-top: 0px;
    margin-bottom: 60px;
    text-align: center;
  }

  .inner.contactpage .intro .text .summary {
    order: 10;
    width: 100%;
    margin-top: 0;
  }
  
  .outer_face {
	  margin: 0px auto 10px auto;
  }

  .inner.contactpage .intro .text .col:last-child {
    margin-left: 0;
    margin-top: 0;
  }

  .inner.contactpage .intro .text .col.map {
    width: 100%;
    position: relative;
    order: 1;
	margin-bottom: 30px;
  }

  /* .inner.contactpage .intro .text .col:nth-child(2) br {
    display: none;
  } */

  .intro {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    min-height: 100vh;
    height: auto;
  }

  .intro .text {
    position: relative;
    top: 0;
    left: calc(3%);
    z-index: 50;
    opacity: 0;
    transform: unset;
    -webkit-transition: opacity 1s 0.3s;
    -o-transition: opacity 1s 0.3s;
    transition: opacity 1s 0.3s;
    padding-top: 100px;
  }

  .full #content:before {
    height: 0;
  }

  .intro .media {
    position: fixed;
    top: -10px;
    left: 0px;
    width: 100%;
    height: 110%;
    overflow: hidden;
  }

  /*  PROJECT PAGE  */
  
  .inner.projectpage {
	width: 92%;  
  }

  .inner.projectpage .intro p.staff_pick {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .projectpage .into .colwrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .inner.projectpage .intro {
    height: auto;
    min-height: auto;
    margin: 0px auto 40px auto;
    display: block;
	width: 100%;
  }
  
  .inner.projectpage .module {
	  width: 100%;
  }

  .inner.projectpage .intro h1.title {
    display: inline-block;
    text-align: center;
  }
  .inner.projectpage .module .cell svg.playIcon {
    display: none;
  }

  .inner.projectpage .intro .colwrap .col:first-child {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    text-align: center;
    margin-bottom: 20px;
  }
  .inner.projectpage .intro .colwrap .col {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
  }

  .inner.projectpage .intro .col.details p {
    max-width: unset;
  }
  
  /* CLIENT PAGE */
  
  .inner.projectpage.clientpage {
	margin: 50px auto;
    width: 92%;
  }
  
  .inner.projectpage.clientpage .intro .colwrap .col:first-child {
	  width: 100%;
	  text-align: left;
  }
  
 .inner.projectpage.clientpage .intro .colwrap .col:last-child {
	 width: 100%;
	 padding-top: 25px;
	 float: none;
	 margin: 0px auto;
	 text-align: left;
 }
 
	.inner.clientpage .thanks {
		text-align: center;
	}
 
	.inner.clientpage .thanks .cell {
		width: 100%;
		margin: 25px auto;
		text-align: center;
	}
	
		.inner.clientpage .thanks .cell .imgwrap {
			margin: 0px auto;
		}
	
		.inner.clientpage .thanks .cell .textwrap {
			display: block;
			text-align: center;
			width: 100%;
			margin: 15px auto 0px auto;
		}
	
	.inner.clientpage .thanks .cell.right {
		width: 80%;
		margin: 25px auto;
		text-align: left;
		float: none;
		padding-top: 0px;
	}
  
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  /*  GRID PAGES  */

  .grid_staff_picks {
    grid-template-columns: 1fr;
    width: 94%;
    row-gap: 40px;
  }

  .grid_staff_picks .cell {
    border-left: 0;
    border-right: 0;
    padding: 0;
  }

  .grid_staff_picks .cell .summary p {
    max-width: unset;
  }

  .logo_grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 0;
    width: 94%;
  }
  
  .inner.gridpage {
	width: 94%;
  }
  
  .inner.gridpage .row {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 10px;
    margin-bottom: 10px;
  }

  .inner.gridpage .row .cell .top {
    height: auto;
    margin-top: 10px;
    margin-bottom: 5px;
  }

  .inner.gridpage .row .cell.no_top {
    margin-top: 30px;
  }

  .inner.gridpage .row .cell.no_top:nth-child(1), .inner.gridpage .row .cell.no_top:nth-child(2) {
    margin-top: 0px;
  }

  .inner.gridpage .row .cell .top .alt img {
    width: 65px;
  }

  .showtitles .inner.gridpage .row .cell .info {
    opacity: 1;
    background-color: transparent;
    }
  
    .showtitles .inner.gridpage .row .cell .info figcaption {
      opacity: 1;
      color: #fff;
    }
    
    .smallgrid .inner.gridpage .row .cell:hover .info {
    opacity: 1;
    }
  
    .smallgrid .inner.gridpage .row .cell:hover .info figcaption {
      opacity: 1;
    }
    
    /*
    .inner.gridpage .row .cell:hover img {
      transform: translate(-50%, -50%) scale(1);
    }
    */

  .largegrid .inner.gridpage {
    width: 100%;
  }

  .largegrid .inner.gridpage .row.odd {
    grid-template-areas: unset;
  }

  .largegrid .inner.gridpage .row.odd .cell {
    grid-area: unset !important;
  }

  .largegrid .inner.gridpage .row {
    display: inline !important;
  }

  .largegrid .inner.gridpage .row .cell {
    display: inline-block;
    width: calc(50% - 20px);
    margin: 0 10px 17px 10px;
  }

  /*
  .largegrid .inner.gridpage .row.even .cell:nth-child(1) {
    margin: 0 0 17px 10px;
  }

  .largegrid .inner.gridpage .row .cell:nth-child(2n) {
    margin: 0 0 17px 10px;
  }
  */

  .largegrid .inner.gridpage .row .cell .mediawrap {
    padding-top: 150% !important;
  }

  .grid .subNav, .textpage .subNav {
    margin: 10px auto 40px auto;
  }

  .smallgrid .subNav {
    margin: 10px auto 30px auto;
  }

  .grid .subNav li, .textpage .subNav li {
    margin-right: 20px;
  }

  .grid .pageIntro h1 {
    font-size: 1.6rem;
  }

  .grid .grid_top .subNav {
    order: 1;
  }

  .grid .grid_top .pageIntro {
    order: 2;
    margin-top: 0;
    margin-bottom: 30px;
  }
  
}