/* Hero */

.hero { 
  width: 100%;
  height: 35vh;
  position: relative;  
  background-color: #061832;
}

@media only screen and (min-width: 370px) and (max-width: 739px)  {  
  .hero { 
    height: 25vh;
  }
  .work-page .hero,
  .case .hero{ 
    height: 35vh;
  }
}

@media only screen and (min-width: 740px) and (min-device-width: 480px) {  
  .hero { 
    height: 0;
    padding-bottom: 21.875%;
  }
}

@media only screen and (min-width: 1000px) and (min-device-width: 480px) {  
  .hero { 
    padding-bottom: 21.875%
  }
}

.hero .image { 
  background-position: center top;
  background-repeat: no-repeat;  
  -webkit-background-size: cover;
  -moz-background-size:    cover;
  -o-background-size:      cover;
  background-size:         cover;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;  
}

.hero-decoration { 
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;  
  top: 0;
  left: 0;
}

.hero .main-message {
	width: auto;
  position: absolute;
  left: 50%;
  -moz-transform:    translateX(-50%);
  -ms-transform:     translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform:         translateX(-50%); 
  bottom: -20px;
  z-index: 100;
  color: white;
  line-height: 1.2;
  text-align: center;
}

@media only screen and (max-width: 739px) {
  .hero .main-message {
  	min-width: 320px;
  }
}  

@media only screen and (min-width: 740px) and (min-device-width: 480px) {
  .hero .main-message {
    width: auto;
  	max-width: 900px;
  	bottom: -25px;
  }
}  

/* ---- Work Area Hexagons ---- */

.hero .hexagon {
	width: 60px;
	height: 66px;
	position: relative;
	display: block;
	margin: auto auto 1em;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#5893bb+0,5b97bf+100 */
	background: rgb(88,147,187); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(88,147,187,1) 0%, rgba(91,151,191,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(88,147,187,1) 0%,rgba(91,151,191,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(88,147,187,1) 0%,rgba(91,151,191,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5893bb', endColorstr='#5b97bf',GradientType=0 ); /* IE6-9 */
  -webkit-box-shadow: 0 .5rem .5rem 0 rgba(0,0,0,.2);
	-moz-box-shadow:    0 .5rem .5rem 0 rgba(0,0,0,.2);
	box-shadow:         0 .5rem .5rem 0 rgba(0,0,0,.2);
}

@media only screen and (min-width: 740px) and (min-device-width: 480px) {  
  .hero .hexagon { 
    width: 120px;
		height: 132px;
  }
}

.hero .hexagon .svg-container {
  width: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

.hero .hexagon .svg-container path {
  fill: var(--dk-blue);
}


.hero .first-heading {
	font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: .5em;
  color: var(--white);  
  display: block;
}

.hero .first-heading:hover {
  color: var(--white);  
  text-decoration: underline;
}

.hero h1 {
	font-size: 150%;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 0;
  color: var(--white);  
	background: var(--lt-blue);	
	width: auto;
  padding: .25em .85em .35em;
  text-align: center;
  -webkit-box-shadow: 0 .5rem .5rem 0 rgba(0,0,0,.2);
	-moz-box-shadow:    0 .5rem .5rem 0 rgba(0,0,0,.2);
	box-shadow:         0 .5rem .5rem 0 rgba(0,0,0,.2);
}

@media only screen and (min-width: 740px) and (min-device-width: 480px) {
  .hero h1 {
    font-size: 200%;
    max-width: 850px;
    line-height: 1.2;
  }
}  

.hero h1 a {
  color: var(--white);  
}

.hero h1 a:hover {
  color: var(--white);  
  text-decoration: underline;
}

.hero p {
	font-size: 125%;
	margin-bottom: 1em;
}

@media only screen and (min-width: 740px) and (min-device-width: 480px) {
  .hero .main-message {
    font-size: 85%;
  }
}  
@media only screen and (min-width: 1000px) and (min-device-width: 480px) {  
  .hero .main-message {
    font-size: 90%;
  }  
}
@media only screen and (min-width: 1400px) and (min-device-width: 480px) {  
  .hero .main-message {
    font-size: 100%;
  }
 	.hero p {
		font-size: 150%;
	}
}


/* Body
------------------------------------ */

article.body,
section.body {
  text-align: left;
}

@media only screen and (min-width: 740px) and (min-device-width: 480px) {  
	article.body,
	section.body {
	  text-align: left;
	  font-size: 125%;
	}
}

@media only screen and (min-width: 1200px) and (min-device-width: 480px) {  
	article.body,
	section.body {
	  font-size: 150%;
	}
}

.page-title {
  text-align: center;
}



/* About Section */


/* Staff and Board Layers */

.staff.layer {
	background: var(--orange);
	}
	
.board.layer {
	background: var(--blue);
	}

.staff.layer *,
.board.layer *{ color: var(--white); }

.people article {
	width: 49.5%;
	display: inline-block;
	min-height: 260px;
	vertical-align: top;
	padding: 1.5rem;
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
  -moz-transform: translateY(0%);
  -ms-transform: translateY(0%);
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
	}
	
.people article:hover {
  -moz-transform: translateY(-2%) scale(1.1);
  -ms-transform: translateY(-2%) scale(1.1);
  -webkit-transform: translateY(-2%) scale(1.1);
  transform: translateY(-2%) scale(1.1);
	}

@media only screen and (min-width: 740px) and (min-device-width: 480px) {  
	.people article {
		width: 33%;
	}
}

@media only screen and (min-width: 1200px) and (min-device-width: 480px) {  
	.people article {
		width: 24.5%;
	}
}

@media only screen and (min-width: 1400px) and (min-device-width: 480px) {  
	.people article {
		width: 19.5%;
	}
}

.people figure {
	margin-bottom: 1em;
	}

.people figure img {
	border-radius: 50%;
	width: 140px;
	height: 140px;
	display: block;
	-webkit-box-shadow: 0 1rem 1rem 0 rgba(0,0,0,.2);
	-moz-box-shadow:    0 1rem 1rem 0 rgba(0,0,0,.2);
	box-shadow:         0 1rem 1rem 0 rgba(0,0,0,.2);	
	}
	
.people h3 {
	font-size: 1.25rem;
	margin-bottom: 0;
	}
	
.people a {
	color: var(--gray);
	}

.staff.layer .people a {
	color: var(--white); 
	}

.staff.layer .people a:hover { color: var(--white); }


/* Post Grid Body
------------------------------------ */

.post-grid-body {
	background: var(--ltr-gray);;
}

.post-grid-body .intro {
	text-align: left;
}


/* Boards Link
------------------------------------ */

.staff.layer a.board-button {
	display: inline-block;
	background: var(--yellow);
	padding: .75em 1.5em;
	margin-top: 3em;
	-webkit-transition: all .15s ease-in-out;
  -moz-transition:    all .15s ease-in-out;
  -o-transition:      all .15s ease-in-out;
  -ms-transition:     all .15s ease-in-out;
  transition:         all .15s ease-in-out; 
	-webkit-box-shadow: 0 1rem 1rem 0 rgba(0,0,0,.05);
	-moz-box-shadow:    0 1rem 1rem 0 rgba(0,0,0,.05);
	box-shadow:         0 1rem 1rem 0 rgba(0,0,0,.05);	
}

.staff.layer a.board-button:hover {
	-moz-transform:    translateY(-5%);
  -ms-transform:     translateY(-5%);
  -webkit-transform: translateY(-5%);
  transform:         translateY(-5%); 
	-webkit-box-shadow: 0 1rem 1rem 0 rgba(0,0,0,.2);
	-moz-box-shadow:    0 1rem 1rem 0 rgba(0,0,0,.2);
	box-shadow:         0 1rem 1rem 0 rgba(0,0,0,.2);	
}

.staff.layer a.board-button h2 {
	margin-bottom: 0;
	text-transform: uppercase;
}

.staff.layer a.board-button span {
	font-size: 17px;
	font-weight: 300;
}



/* Bio
------------------------------------ */

.headshot {
  text-align: center;
  margin-bottom: .75em;
}

.headshot img { 
	width: 140px;
  height: 140px;
  -webkit-box-shadow: 0 1rem 1rem 0 rgba(0,0,0,.2);
	-moz-box-shadow:    0 1rem 1rem 0 rgba(0,0,0,.2);
	box-shadow:         0 1rem 1rem 0 rgba(0,0,0,.2);	
  border-radius: 50%;
	}
	
.bio-heading {
  margin-bottom: 1em;
	}

.person h2 {
	text-align: center;
	margin-bottom: 0;
	}

.job-title {
	text-align: center;
	font-weight: 300;
	}
	

/* Group Photo */

.about-photo img {
	width: 100%;
}

.about-photo figcaption {
	max-width: 850px;
	padding-top: 1em;
}



/* Our Work section */

.work .intro { margin-bottom: 0; }






/* --- News --- */

/* News Tabs
------------------------------------ */
.news-type {
  text-align: center;
  margin-bottom: 1em;
}
.news-type ul {
  margin: 0 auto;
}
.news-type li {
  padding: .1em;
  display: inline-block;
}
.news-type li a {
  color: #000;
  padding: .3em;
  font-size: 90%;
  -webkit-transition: background .3s ease-in-out;
  -moz-transition:    background .3s ease-in-out;
  -o-transition:      background .3s ease-in-out;
  -ms-transition:     background .3s ease-in-out;
  transition:         background .3s ease-in-out; 
}
.news-type li:hover a {
  background: var(--lt-blue);
  color: #fff;
}
.news-type li:active a {
  background: var(--dk-blue);
  color: #fff;
}
 
.news-type li.active a {
  background: var(--lt-gray);
  color: #134a85;
  cursor: auto;
}

@media only screen and (min-width: 740px) and (min-device-width: 480px) { 
  .news-type li a {
    font-size: 110%;
    padding: .5em 1em;
  }
}
@media only screen and (min-width: 1000px) and (min-device-width: 480px) { 
  .news-type {  
    margin-bottom: 2em;
  }  
}


/* Pagination
------------------------------------ */

.pagination {
  text-align: center; 
  margin-top: 1.5em;
}
.pagination ul {
  margin: 0 auto;
}
.pagination li {
  padding: .1em;
  display: inline-block;
  font-size: .6em;
}
.pagination li a {
	font-size: 120% !important;
  width: 2em;
  height: 2em;
  line-height: 2em;
  padding: 0;
  color: #000;
  border-radius: 50%;
  display: block;
  -webkit-transition: background .3s ease-in-out;
  -moz-transition:    background .3s ease-in-out;
  -o-transition:      background .3s ease-in-out;
  -ms-transition:     background .3s ease-in-out;
  transition:         background .3s ease-in-out;   
}
.pagination li:hover a {
  background: var(--lt-blue);
  color: #fff;
}
.pagination li:active a {
  background: var(--dk-blue);
  color: #fff;
}
.pagination li a.active {
  background: var(--lt-gray);
  color: #134a85;
  cursor: auto;
}

.pagination li.arrow-button:hover a {
  background: transparent;
}
.pagination li .arrow {
  background: #606060;
  width: .8em;
  height: 1px;
  display: inline-block;
  position: relative;
  top: -.35em;
  -moz-transition:    all .2s cubic-bezier(0.75, -0.25, 0.25, 0.75);
  -o-transition:      all .2s cubic-bezier(0.75, -0.25, 0.25, 0.75);
  -webkit-transition: all .2s cubic-bezier(0.75, -0.25, 0.25, 0.75);
  transition:         all .2s cubic-bezier(0.75, -0.25, 0.25, 0.75);    
}
.pagination li:hover .arrow {
  background: #25aae1;  
}
.pagination li .arrow:before,
.pagination li .arrow:after {
  background: #606060;
  width: .5em;
  height: 1px;
  display: block;
  content: "";
  position: absolute;
  top: 0;
}
.pagination li:hover .arrow:before,
.pagination li:hover .arrow:after {
  background: #25aae1;
}
.pagination li.next .arrow:before,
.pagination li.next .arrow:after {
  right: 0;
  transform-origin: 100% 0%;  
}
.pagination li.next .arrow:before {
  transform: rotate(45deg);
}
.pagination li.next .arrow:after {
  transform: rotate(-45deg);
}
.pagination li.previous .arrow:before,
.pagination li.previous .arrow:after{
  left: 0;
  transform-origin: 0% 100%;  
}
.pagination li.previous .arrow:before {
  transform: rotate(-45deg);
}
.pagination li.previous .arrow:after {
  transform: rotate(45deg);
}

@media only screen and (min-width: 740px) and (min-device-width: 480px) {  
  .pagination li {
    font-size: .8em;
  }
}
@media only screen and (min-width: 1000px) and (min-device-width: 480px) {  
  .pagination li {
    font-size: .9em;
  }
}
@media only screen and (min-width: 1200px) and (min-device-width: 480px) {  
  .pagination li {
    font-size: 1em;
  }
}




/* --- Large List --- */

.large-list {
  margin: 1.5em 0;
  display: block;
  text-align: center;
}
.large-list article {
  display: block;
  margin: 1.5em 0;
  text-align: left;
  -moz-transition:    all .3s cubic-bezier(0.75, -0.25, 0.25, 0.75);
  -o-transition:      all .3s cubic-bezier(0.75, -0.25, 0.25, 0.75);
  -webkit-transition: all .3s cubic-bezier(0.75, -0.25, 0.25, 0.75);
  transition:         all .3s cubic-bezier(0.75, -0.25, 0.25, 0.75);   
}
.large-list article:first-of-type {
  margin-top: 0;
}
.large-list article:last-of-type {
  margin-bottom: 0;
}

.large-list small { 
  opacity: .75;
  text-transform: uppercase; 
  margin-bottom: .75em;
  font-size: 90%;
  font-weight: 300;
  color: var(--gray);
  display: inline-block;
}

.large-list h3 {
  color: var(--gray);
  font-size: 1.5em;
  line-height: 1;
  margin-bottom: .25em;
}

.large-list a:hover h3 {
  text-decoration: underline;
  color: var(--blue);
}

.large-list p {
  color: var(--gray);
  font-size: 1.1em;
  line-height: 1.4;
}

.large-list .share  { 
  display: inline-block;
} 

.large-list .share a { 
  width: 1em;
  height: 1em;
  display: inline-block;
  margin: 0 .5em 0 0;
}  
.large-list .share a svg { 
  width: 100%;
  max-height: 1em;
  fill: var(--gray);
  -webkit-transition: fill .25s ease-in-out;
  -moz-transition:    fill .25s ease-in-out;
  -o-transition:      fill .25s ease-in-out;
  -ms-transition:     fill .25s ease-in-out;
  transition:         fill .25s ease-in-out;   
} 
.large-list .share a:hover svg {
  fill: var(--orange); 
}

.large-list .news-logo { 
  border-style: solid; 
  border-width: 1px;
  border-color: var(--lt-gray);
  display: inline-block;
  margin-right: 15px;
  width: 52px;
  height: 52px; 
  margin-top: 5px;
  float: left;
  -moz-transition:    all .3s cubic-bezier(0.75, -0.25, 0.25, 0.75);
  -o-transition:      all .3s cubic-bezier(0.75, -0.25, 0.25, 0.75);
  -webkit-transition: all .3s cubic-bezier(0.75, -0.25, 0.25, 0.75);
  transition:         all .3s cubic-bezier(0.75, -0.25, 0.25, 0.75);   
}

.large-list .news-logo:hover { 
  border-color: black;   
}

.large-list figure { 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  display: inline-block;
  width: 50px;
  height: 50px;  
}

.large-list .text.with-logo { 
  display: inline-block; 
  float: left;
  width: calc(100% - 67px);
}


@media only screen and (min-width: 740px) and (min-device-width: 480px) { 
  .large-list {
    margin: 2em 0;
  }  
}
@media only screen and (min-width: 1000px) and (min-device-width: 480px) {   
  .large-list article {
    margin: 3em 0 0;
  }  
	.large-list .news-logo { 
	  border-style: solid; 
	  border-width: 1px;
	  border-color: var(--lt-gray);
	  display: inline-block;
	  margin-right: 20px;
	  width: 107px;
	  height: 107px; 
	  margin-top: 7px;
	  float: left;
	  -moz-transition:    all .3s cubic-bezier(0.75, -0.25, 0.25, 0.75);
	  -o-transition:      all .3s cubic-bezier(0.75, -0.25, 0.25, 0.75);
	  -webkit-transition: all .3s cubic-bezier(0.75, -0.25, 0.25, 0.75);
	  transition:         all .3s cubic-bezier(0.75, -0.25, 0.25, 0.75);   
	}
	.large-list .news-logo:hover { 
	  border-color: black;   
	}
	.large-list figure { 
	  background-repeat: no-repeat;
	  background-position: center center;
	  background-size: contain;
	  display: inline-block;
	  width: 105px;
	  height: 105px;  
	}
	.large-list .text.with-logo { 
	  display: inline-block; 
	  float: left;
	  width: calc(100% - 127px);
	}
  .large-list article h3 {
    font-size: 1.75em;
  }  
}
@media only screen and (min-width: 1200px) and (min-device-width: 480px) {  
  .large-list {
    margin: 3em 0;
  }  
  .large-list article h3 {
    font-size: 2em;
  }   
}


/* Tags
------------------------------------ */
.tags {
  margin-top: 1em;
  padding-top: 1em;
  text-transform: uppercase;
  font-size: 90%;
  border-color: var(--lt-gray);
  border-style: solid;
  border-width: 2px 0 0 0;
}

.tags a {
  color: var(--white);
  background: var(--lt-blue);
  padding: .25em .5em .45em;
  margin-right: .25em;
  -webkit-transition: background .3s ease-in-out;
  -moz-transition:    background .3s ease-in-out;
  -o-transition:      background .3s ease-in-out;
  -ms-transition:     background .3s ease-in-out;
  transition:         background .3s ease-in-out; 
}
.tags li:hover a {
  background: var(--lt-blue);
  color: #fff;
}
.tags li:active a {
  background: var(--dk-blue);
  color: #fff;
}
 
.tags li.active a {
  background: var(--lt-gray);
  color: #134a85;
  cursor: auto;
}

@media only screen and (min-width: 1000px) and (min-device-width: 480px) { 
  .tags {  
    margin-top: 2em;
    padding-top: 2em;
  }  
}


/* --- Work Areas --- */

.letters {
	background: var(--ltr-gray);
}

.updates {
	background: var(--lt-gray);
}

.letters h2,
.updates h2 {
	text-transform: uppercase;
}

.news-item-wrapper {
	margin: 1.5em 0;
}

@media only screen and (min-width: 1000px) and (min-device-width: 480px) {   
  .news-item-wrapper {
    margin: 3em 0 0;
  }  
}

.updates .pagination li a.active,
.letters .pagination li a.active {
  background: var(--white);
}



/*--- Cases grid ---*/

.cases {
	background: var(--ltst-gray);
}	

.cases .grid {
	padding: 0 0 2rem 0;
}	

.cases article {
	background-color: var(--blue);
	text-align: left;
	position: relative;
	top: 0;
	-webkit-box-shadow: 0 1rem 1rem 0 rgba(0,0,0,.2);
	-moz-box-shadow:    0 1rem 1rem 0 rgba(0,0,0,.2);
	box-shadow:         0 1rem 1rem 0 rgba(0,0,0,.2);
	padding: 0;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition:    all .3s ease-in-out;
	-o-transition:      all .3s ease-in-out;
	-ms-transition:     all .3s ease-in-out;
	transition:         all .3s ease-in-out;		
}

.cases article:nth-child(2n) {
	background-color: var(--dk-blue);		
}

.cases article:nth-child(3n) {
	background-color: var(--lt-blue);		
}

.cases article:nth-child(4n) {
	background-color: var(--gold);		
}

.cases article:nth-child(5n) {
	background-color: var(--orange);		
}

.cases article:nth-child(6n) {
	background-color: var(--ltr-blue);		
}


@media only screen and (min-width: 1200px) {
	.cases article:hover {
		top: -1.5%;
	}
}

.cases a {
	padding: 50px;
	display: block;
	min-height: 320px;
}

.cases h2 {
	text-transform: uppercase;
}
.cases h3 {
	color: var(--white);
	margin-bottom: 4px;
	font-size: 32px;
}
.cases p {
	color: var(--white);
	line-height: 1.2;
	margin: 0;
	font-size: 1.2rem;
	font-weight: 300;
}

@media only screen and (min-width: 740px) and (min-device-width: 480px) {
	.cases .grid {
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 1rem;
		padding: 0 0 4rem 0;
	}	
}

@media only screen and (min-width: 1000px) and (min-device-width: 480px) {
	.cases .grid {
		padding: 0 0 6rem 0;
		grid-gap: 1.5rem;
		max-width: 1400px;
	}	
}
@media only screen and (min-width: 1200px) and (min-device-width: 480px) {
	.cases .grid {
		grid-gap: 2rem;
	}		
}
@media only screen and (min-width: 1400px) and (min-device-width: 480px) {
	.cases .grid {
		grid-gap: 50px;
	}		
}

/*--- Case List --*/

.case-list {
	list-style: none;
	margin: 0;
}

.case-list a {
	display: block;
	padding: .5em .5em .5em 1.5em;
	color: var(--dk-gray);
	background-image: url('/theme/img/download-icon.png');
	background-repeat: no-repeat;
	background-position: left .5em;
}

.case-list a:hover {
  text-decoration: underline;
  color: var(--blue);
}


/* ---------- Prev/Next ---------- */

.post-link {
  width: 49%;
	padding: 1em;
  margin-top: 3em;  
	display: inline-block;
	color: var(--gray);
  vertical-align: text-top;
  opacity: .6;
	-moz-transition:    all .3s cubic-bezier(0.75, -0.25, 0.25, 0.75);
	-o-transition:      all .3s cubic-bezier(0.75, -0.25, 0.25, 0.75);
	-webkit-transition: all .3s cubic-bezier(0.75, -0.25, 0.25, 0.75);
	transition:         all .3s cubic-bezier(0.75, -0.25, 0.25, 0.75); 			
}
.no-margin .post-link {
  margin-top: 0;
}
.post-link:hover {
	color: var(--lt-blue);
	opacity: 1;
}
.post-link strong {
	font-size: 100%;
	margin-bottom: .4em;
	display: block;
	text-transform: uppercase;
	color: var(--gray);
	position: relative;
	display: inline-block;
}
.post-link:hover strong {
	color: var(--lt-blue);
}
.post-link h4 {
  font-weight: 300; 
  color: var(--gray);
  font-size: 100%;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition:    all .3s ease-in-out;
  -o-transition:      all .3s ease-in-out;
  -ms-transition:     all .3s ease-in-out;
  transition:         all .3s ease-in-out;  
}

@media only screen and (max-width: 739px) {
	.post-link h4 {
	  display: none;
	}
}

.post-link:hover h4 {
  color: var(--gray);
  text-decoration: none;
}

.prev-post {
	text-align: left;
  padding-left: 2em;
}
.next-post {
	text-align: right;
  padding-right: 2em;
}
@media only screen and (max-width: 739px) {
  .hundred-day-docket .page-nav {
    display: none;
  }
}
@media only screen and (min-width: 1000px) {
	.prev-post {
	  padding-right: 15%;
	}
	.next-post {
	  padding-left: 15%;
	}
}

.prev-post strong:before,
.next-post strong:before {
	display: block;
  font-family: 'Trilogy-Icons';
	font-size: 130%;
	color: var(--gray);	
	position: absolute;
	top: 50%;
	-moz-transform:    translateY(-50%);
	-ms-transform:     translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform:         translateY(-50%);
	-moz-transition:    all .3s cubic-bezier(0.75, -0.25, 0.25, 0.75);
	-o-transition:      all .3s cubic-bezier(0.75, -0.25, 0.25, 0.75);
	-webkit-transition: all .3s cubic-bezier(0.75, -0.25, 0.25, 0.75);
	transition:         all .3s cubic-bezier(0.75, -0.25, 0.25, 0.75); 			
}
.prev-post:hover strong:before,
.next-post:hover strong:before {
	color: var(--lt-blue);	
}
.prev-post strong:before {
	left: -1.2em;
	content: "<"
}
.next-post strong:before {
	right: -1.2em;
	content: ">"
}
@keyframes arrow_left {
	 0% {
	   left: -1.2em;
	 }
	 50% {
	   left: -1.45em;
	 }
	 100% {
	   left: -1.2em;
	 }
}
@keyframes arrow_right {
	 0% {
	   right: -1.2em;
	 }
	 50% {
	   right: -1.45em;
	 }
	 100% {
	   right: -1.2em;
	 }
}
.prev-post:hover strong:before {
	left: -1.35em;
	-webkit-animation: arrow_left .6s linear infinite;
	-moz-animation:    arrow_left .6s linear infinite;
	-ms-animation:     arrow_left .6s linear infinite;
	animation:         arrow_left .6s linear infinite;		
}
.next-post:hover strong:before {
	right: -1.35em;
	-webkit-animation: arrow_right .6s linear infinite;
	-moz-animation:    arrow_right .6s linear infinite;
	-ms-animation:     arrow_right .6s linear infinite;
	animation:         arrow_right .6s linear infinite;			
}
@media only screen and (min-width: 1200px) {
  .page-nav {
    text-align: center; 
    padding: 0;
    position: relative;
    width: 100%;
    max-width: 1600px;
  }
  .post-link {
    position: absolute;	
    top: 100px;
		background: white;	
		width: calc(calc(100% - 890px) / 2);
    z-index: 1000;
	}	
  .work-page .post-link {	
		width: auto;
	}	
	.prev-post {
		left: 0; 	
  	padding: 1em 1em .5em 3em;    
	}
	.next-post {
		right: 0; 
  	padding: 1em 3em .5em 1em;    
	}
  .post-link h4 {
    opacity: 0;
    font-weight: 300; 
    font-size: .01em;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition:    opacity .3s ease-in-out;
    -o-transition:      opacity .3s ease-in-out;
    -ms-transition:     opacity .3s ease-in-out;
    transition:         opacity .3s ease-in-out; 
  }
  
  .post-link:hover h4 {
    opacity: 1;
    font-size: 120%;  
  }
  
  .sticky-wrap {
  	position: relative;
    text-align: center;
  }
  .stuck { 
    position: fixed;
    width: 100%;
    z-index: 2000;
    top: 185px;
  }  
}



/* 100 day docket styles */

.hundred-day-docket .hero {
  background-color: #872d1b;
}

.hundred-day-docket .hero .image { 
  mix-blend-mode: luminosity; 
}


/* ---- Work Area Hexagons ---- */

.hundred-day-docket .hero .hexagon {
	background: white; 
}

.hundred-day-docket .hero .hexagon .svg-container {
  width: 80%;
}

.hundred-day-docket .hero .hexagon .svg-container path {
  fill: var(--orange);
}

.hundred-day-docket .hero h1 {
  color: var(--yellow);  
	background: var(--orange);	
}