/*!
Theme Name: SIMPLE
Theme URI: https://thoughtandfound.co/
Author: Thought & Found
Author URI: https://thoughtandfound.co/
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
Text Domain: simple
*/

@media screen and (min-width: 0) {
	/*--------------------------------------------------------------
	# GLOBAL
	--------------------------------------------------------------*/
	html {
		line-height: 1.15;
		-webkit-text-size-adjust: 100%;
	}

	body, html, a, p, span, h1, h2, h3, h4, h5, h6 {
		color: #000000;
		font-size: 11px;
		text-decoration: none;
		font-family: 'Neue Haas Grotesk Text Pro', sans-serif;
		font-weight: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
  }

	a:hover, span.m-list:hover {
		opacity: .5;
		cursor: pointer;
	}

	.sticky-img img:hover, .project-block img:hover {
		filter: grayscale(1);
	}

	.sticky-img a:hover {
    opacity: 1;
  }

	span.icon {
		font-family: 'FontAwesome', sans-serif;
		display: none;
	}

	body {
		margin: 92px 10px 10px 10px;
		background: white;
	}

	body.page .desktop-nav, body.single .desktop-nav {
		border-bottom: 1px solid;
	}

	.about, .services {
		margin-top: 2px;
	}
	/*--------------------------------------------------------------
	# HEADER
	--------------------------------------------------------------*/
	.desktop-nav {
    font-size: 0;
    height: 82px;
    background: white;
		position: fixed;
		right: 0;
		left: 0;
		top: 0;
		padding-top: 10px;
		margin: 0 8px 10px 8px;
		z-index: 5;
	}

	.h-col {
		font-size: 11px;
    /* width: 50%;
    display: inline-block; */
  }

	.h-col.business {
		position: fixed;
		top: 10px;
		right: 10px;
    width: auto;
		max-width: 227px;
  }

	.h-col.time {
    position: fixed;
    top: 70px;
    left: 10px;
    width: auto;
	}

	/*--------------------------------------------------------------
	# LIST
	--------------------------------------------------------------*/
	body.category h1.page-title {
      border-top: 1px solid;
      text-transform: uppercase;
      margin: 0;
      padding: 3px 0;
    }
	
	div#list {
    display: none;
		z-index: 5;
  }

	.list-text .ft-wrap {
		border-top: 1px solid black;
		font-size: 0;
		padding: 2px 0;
	}

	.list-text span {
    display: inline-block;
    width: 25%;
		font-size: 11px;
		vertical-align: top;
  }

	span.l-no, span.c-no {
	  width: 15%;
	}

	span.l-ttl {
    width: 35%;
  }

	span.l-cat {
		display: none;
  }

	span.l-online, span.l-year {
		text-align: right;
	}

	div#list {
    position: fixed;
    top: 92px;
    background: white;
    left: 10px;
    right: 10px;
	bottom: 0;
	overflow-y: scroll;
    padding-bottom: 10px;
  }

	.list-block:last-child {
    border-bottom: 1px solid black;
  }

	img.l-b-feat {
    display: none;
		width: 0;
		height: 0;
		position: absolute;
  }
	/*--------------------------------------------------------------
	# FOOTER
	--------------------------------------------------------------*/
	footer#colophon {
    margin-top: 10px;
  }

	body.page footer#colophon {
		margin-top: 2px;
	}

  .site-info {
		font-size: 0;
	}

	.site-info span {
    display: inline-block;
    width: 50%;
  }

	span.copy {
    text-align: right;
  }
	/*--------------------------------------------------------------
	# FEATURE
	--------------------------------------------------------------*/
	main#feature {
    white-space: nowrap;
    overflow-x: hidden;
	font-size: 0;
	}

	.sticky-block {
    width: 80%;
    display: inline-block;
		margin-right: 10px;
  }

	.sticky-img {
    margin-bottom: 10px;
  }

	.sticky-img img {
		width: 100%;
	}

	.sticky-block:last-child {
    margin-right: 0;
  }
	
		.stickies-feat {
		position: relative;
	}

	.st-prev {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 20;
    width: 20%;
	cursor: w-resize;
  }

	.st-next {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 20;
		width: 20%;
		cursor: e-resize;
	}
	
	.today-date {
      font-size: 16.25vw;
      margin-left: -5px;
	  margin-top: 233px;
    }
	/*--------------------------------------------------------------
	# GRID
	--------------------------------------------------------------*/
	main#grid {
    margin-top: 209px;
  }

	.feat-text {
    margin-bottom: 10px;
  }

	.feat-img img, .feat-img video {
    width: 100%;
		display: block;
  }

	.ft-wrap {
		clear: both;
		overflow: hidden;
	}

	span.left {
    float: left;
    margin-right: 10px;
  }

	span.right {
		float: right;
	}

	.ft-wrap span.left, .ft-wrap span.right {
		text-transform: uppercase;
	}

	.project-block {
    margin-bottom: 40px;
  }
	/*--------------------------------------------------------------
	# STUDIO
	--------------------------------------------------------------*/
	.cont p {
    margin: 0;
    text-indent: 20px;
  }

	.about, .services {
    margin-bottom: 40px;
  }

	.services {
		width: 50%;
		max-width: 145px;
	}

	.aw-ent {
		font-size: 0;
	}

	.aw-ent span {
    display: inline-block;
    width: 25%;
  }

	span.award-year {
    width: 15%;
  }

	span.award-title {
    width: 35%;
  }

	span.award-project {
    text-align: right;
  }

	.awards-wrap {
    position: absolute;
    left: 0;
    bottom: 8px;
    right: 0;
  }

	.awards {
		border-top: 1px solid black;
		margin-top: 2px;
	}

	.aw-ent {
    border-bottom: 1px solid;
		padding: 2px 0;
  }

	body.page main#primary {
    height: calc(100vh - 95px);
		position: relative;
		min-height: 580px;
		z-index: 0;
  }

	.studio_images {
		display: none;
	}
	/*--------------------------------------------------------------
	# SINGLE
	--------------------------------------------------------------*/
	.upper {
		text-transform: uppercase;
	}

	.visual-content img, .visual-content video {
    display: block;
    width: 100%;
		margin-bottom: 10px;
		max-width: 500px;
  }

	.pr-ent {
		border-bottom: 1px solid black;
		padding: 2px 0;
	}

	.pr-ent span {
    display: inline-block;
    width: 50%;
  }

	span.prev, span.next {
		width: 25%;
	}

	span.next {
		text-align: right;
	}

	.row-wrap {
		margin-bottom: 10px;
	}

	.visual-content {
    margin-top: 40px;
  }

}

@media screen and (min-width: 568px) {
	/*--------------------------------------------------------------
	# GLOBAL
	--------------------------------------------------------------*/

	/*--------------------------------------------------------------
	# HEADER
	--------------------------------------------------------------*/
	.h-col {
    width: 15%;
    display: inline-block;
  }

	.h-col.time {
		top: 10px;
		right: 10px;
		left: auto;
	}

	.h-col.business {
		width: calc(50% - 15px);
	}

	span.l-cat {
		display: inline-block;
	}

	.today-date {
		margin-top: 0;
	}
	/*--------------------------------------------------------------
	# FOOTER
	--------------------------------------------------------------*/

	/*--------------------------------------------------------------
	# LIST
	--------------------------------------------------------------*/
	span.l-cat {
    text-indent: 5px;
  }

	span.l-online, span.l-year {
		width: 12.5%
	}
	/*--------------------------------------------------------------
	# FEATURE
	--------------------------------------------------------------*/

	/*--------------------------------------------------------------
	# GRID
	--------------------------------------------------------------*/
	main#grid {
		font-size: 0;
	}

  .project-block {
	  width: 50%;
		width: calc(50% - 5px);
		display: inline-block;
		vertical-align: top;
		font-size: 12px;
	}

	.project-block:nth-child(2n - 1) {
    margin-right: 10px;
  }

	/*--------------------------------------------------------------
	# STUDIO
	--------------------------------------------------------------*/
	.about, .services {
    width: 40%;
    display: inline-block;
    vertical-align: top;
	}

	.about {
    margin-right: 10%;
    margin-right: calc(10% + 2px);
	}
	/*--------------------------------------------------------------
	# SINGLE
	--------------------------------------------------------------*/
	body.single article {
		clear: both;
		overflow: hidden;
	}

	body.single .entry-content, .visual-content {
    width: 50%;
		width: calc(50% - 5px);
    float: left;
  }

	body.single .entry-content {
		float: right;
	}

	.visual-content {
		margin-top: 0;
	}
}

@media screen and (min-width: 768px) {
	/*--------------------------------------------------------------
	# GLOBAL
	--------------------------------------------------------------*/
	body.page .desktop-nav, body.single .desktop-nav {
		border-bottom: none;
	}
	/*--------------------------------------------------------------
	# HEADER
	--------------------------------------------------------------*/
	.h-col {
		width: 12.5%;
	}

	.h-col.h-studio {
    width: 25%;
    width: calc(25% + 5px);
  }

	.h-col.business {
		width: calc(25% - 12.5px);
	}

	body.single .entry-content {
    position: fixed;
    right: 10px;
    bottom: 30px;
    width: calc(50% - 15px);
  }
	/*--------------------------------------------------------------
	# FOOTER
	--------------------------------------------------------------*/
  body.single span.copy {
		position: fixed;
		bottom: 10px;
		right: 10px;
	}
	/*--------------------------------------------------------------
	# LIST
	--------------------------------------------------------------*/
	span.l-no, span.c-no {
	  width: 20%;
	}

	span.l-ttl {
    width: 25%;
  }

	span.l-cat {
		width: 35%;
	}

	span.l-online {
    text-align: left;
		text-indent: 7.5px;
  }

	span.l-online, span.l-year {
    width: 10%;
  }
	/*--------------------------------------------------------------
	# FEATURE
	--------------------------------------------------------------*/

	/*--------------------------------------------------------------
	# GRID
	--------------------------------------------------------------*/
	.project-block {
		width: 25%;
		width: calc(25% - 7.5px);
		margin-right: 10px;
	}

	.project-block:nth-child(4n) {
    margin-right: 0;
  }
	/*--------------------------------------------------------------
	# STUDIO
	--------------------------------------------------------------*/
	.awards {
		width: 50%;
    width: calc(50% + 147px);
	}

	span.award-type {
		width: 20%;
		width: calc(20% + 12px);
	}

	span.award-title {
    width: 40%;
  }

	span.award-project {
    width: 25%;
    width: calc(25% - 12px);
  }

	.studio_images {
		display: block;
		width: calc(25% - 12.5px);
		position: absolute;
		right: 0;
		bottom: 8px;
	}

	.brand-poster_wrap {
		position: relative;
	}

	.studio_images img {
		display: block;
		width: 100%;
		position: absolute;
		bottom: 0;
	}
	/*--------------------------------------------------------------
	# SINGLE
	--------------------------------------------------------------*/
	.visual-content img:last-child {
    margin-bottom: 0;
  }

	span.icon {
		display: block;
    font-size: 13px;
    position: fixed;
    bottom: 8px;
    left: 50%;
    left: calc(50% + 6px);
		width: 15px;
  }
}

@media screen and (min-width: 1024px) {
	/*--------------------------------------------------------------
	# GLOBAL
	--------------------------------------------------------------*/
	#cursor {
		display: block;
	}
	
	.today-date {
       font-size: 12.45vw;
	   margin-left: -8px;
    }
	/*--------------------------------------------------------------
	# HEADER
	--------------------------------------------------------------*/
	.h-col {
		width: 10%;
	}

	.h-col.h-studio {
		width: 20%;
		width: calc(20% + 5px);
	}

	.h-col.business {
    width: calc(20% - 12.5px);
  }
	/*--------------------------------------------------------------
	# FOOTER
	--------------------------------------------------------------*/

	/*--------------------------------------------------------------
	# LIST
	--------------------------------------------------------------*/
	img.l-b-feat {
    position: fixed;
    top: 92px;
    right: 10px;
    right: calc(20% + 30px);
    width: 20%;
    width: calc(20% - 33px);
    height: auto;
	}
	/*--------------------------------------------------------------
	# FEATURE
	--------------------------------------------------------------*/
	.sticky-block {
		width: calc(65% - 4px);
	}

	/*--------------------------------------------------------------
	# GRID
	--------------------------------------------------------------*/
	.project-block {
		width: 20%;
		width: calc(20% - 8px);
	}

	.project-block:nth-child(4n) {
		margin-right: 10px;
	}

	.project-block:nth-child(5n) {
		margin-right: 0;
	}
	/*--------------------------------------------------------------
	# STUDIO
	--------------------------------------------------------------*/
  .about {
		width: 20%;
	}

	.awards {
		width: 50%;
		width: calc(50% - 55px);
	}

	span.award-type {
		width: 30%;
	}

	span.award-title {
    width: 37%;
  }

	span.award-project {
    width: 18%;
  }

	.studio_images {
    width: calc(20% - 12.5px);
  }
	/*--------------------------------------------------------------
	# SINGLE
	--------------------------------------------------------------*/
	.visual-content {
    width: calc(60% - 4px);
  }

	body.single .entry-content {
		width: calc(30% - 15px);
		max-width: 345px;
	}

	span.icon {
		left: calc(70% + 5px);
	}

}

@media screen and (min-width: 1200px) {
	body, div#list {
		width: 1180px;
	}

	.desktop-nav {
		width: 1183px;
	}

	.h-col.time {
		right: auto;
    left: 1115px;
	}

	.h-col.business {
		right: auto;
		left: 962px;
		width: 227px;
	}

	body.single .entry-content {
		width: 345px;
		right: auto;
		left: 845px;
	}

	span.icon {
    left: 845px;
  }

	body.single span.copy {
		left: 1147px;
		right: auto;
		width: auto;
	}
	
   .today-date {
    font-size: 149.5px;
   }
	
	img.l-b-feat {
		left: 723px;
		right: auto;
		width: 207px;
	}

}