/* CiMS design */

@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700&display=swap');

body {
	font-family: 'Open Sans', sans-serif;
	margin: 0;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.company-banner a {
	font-family: 'Libre Baskerville', serif;
}

a:hover, a:visited, a:link, a:active {
	text-decoration: none;
	color: #272727;
}

.main-title {
	font-family: 'Libre Baskerville', serif;
	font-size: 44px;
	padding: 0 12px;
	color: #272727;
}
.main-subtitle {
	font-style: italic;
	font-family: 'Libre Baskerville', serif;
	font-size: 28px;
	padding: 10px 12px;
}
@media screen and (min-width: 768px) {
	.main-title {
		font-size: 80px;
		padding: 0 10px;
	}
	.main-subtitle {
		font-size: 40px;
		padding: 10px 10px;
	}
}
@media screen and (min-width: 1200px) {
	.main-title {
		font-size: 115px;
	}
	.main-subtitle {
		font-size: 55px;
		letter-spacing: 1px;
	}
}

.link_bar {
	min-height: 40px;
}


/* Selector */

.selector ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.selector  li {
	padding-right: 18px;
	padding-left: 18px;
	border-right: 1px solid #b4b4b4;
	display: inline;
	text-transform: uppercase;
	color: #b4b4b4;
	font-weight: bold;
	font-size: 13px;
}
.selector  li a {
	text-transform: uppercase;
	color: #b4b4b4;
	font-weight: bold;
	font-size: 13px;
	cursor: pointer;
}
.selector  li:first-of-type {
	padding-left: 0;
}
.selector  li:last-of-type {
	border-right: none;
}
.selector  li.active {
	color: black;
}
@media screen and (min-width: 768px) {
	.selector {
		padding: 10px 0;
	}
}



/* Hero image */
@media screen and (min-width: 1330px) {
	.images-full-width.hero {
		background-repeat: no-repeat;
		/*background-position now coming in from cms*/
		background-position: top center;
		height: 480px;
	}
	.images-full-width.hero .container {
		/*padding-top: 565px;*/
		padding-top: 414px;
	}
}
.images-full-width.hero .container .grid {
	background-color: white;
}


/*
Grid for isotope
*/
.container {
	padding: 0 15px;
}
.grid .grid-item {
	padding: 12px 18px;
}
.grid .grid-item img {
	height: auto;
	width: 100%;
}

@media screen and (min-width: 768px) {
	.container {
		padding: 0 30px;
	}
    .grid {
		padding: 10px 0;
    }
	.grid .grid-item {	
		width: 47.5%;
	}
}

@media screen and (min-width: 800px) {
	.grid .grid-item {	
		width: 48%;
	}
}

@media screen and (min-width: 1000px) {
	.grid .grid-item {	
		width: 48.4%;
	}
}

@media screen and (min-width: 1330px) {
	.grid .grid-item {	
		width: 380px;
	}
	.grid img {
		width: 380px;
	}	
	.grid {
		padding: 20px 30px;
    }
	.container {
		width: 1260px;
		padding: 10px 30px;
		margin-left: auto;
		margin-right: auto;
	}
	/* This should really be all no-hero I think */
	.project-page-assets.grid .grid-item,
	.basket-page-selected-assets grid-item {	
		width: 392px;
	}
	.project-page-assets.grid,
	.basket-page-selected-assets.grid {
		padding: 20px 10px;
    }
}

@media screen and (min-width: 1740px) {
	.container {
		width: 1670px;
	}	
	.project-page-assets.grid .grid-item {	
		width: 390px;
	}
}



/* Home page - artists */

.home .main-title {
	margin-top: 60px;
}

.home .main-subtitle {
	margin-bottom: 80px;
}

.index-page-featured-project-artist-name {
	color: #272727;
	padding: 5px 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
}

.index-page-featured-project-title a {
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	color:#b4b4b4;
	display: none;
}


/* Artist page */

.artist .main-subtitle {
	margin-top: 60px;
}
.artist .artist-page-projects-tag {	
	margin-top: 20px;
	padding: 0 12px;	
	font-style: italic;
	font-family: 'Libre Baskerville', serif;
	font-size: 18px;
}

.artist .artist_banner {
	min-height: 140px;
}

.artist-page-project-title {
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	padding: 5px 0;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.artist-page-project-subtitle {
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	color:#b4b4b4;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	/*display: none;*/
}


/* Project page */

.project .company_name {
	padding: 30px 10px 10px 12px;
} 

.project .company_name a {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	color: #b4b4b4;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 2px;
}

.project-page-project-title {
	font-style: normal;
}

.project_banner {
	margin-bottom: 80px;
}

.project-page-project-intro {
	display: none;
}

.project-page-project-sub-title {
	font-family: 'Libre Baskerville', serif;
	color: #b4b4b4;
	font-style: italic;
	padding: 10px;
	font-size: 20px;
}

.project-page-project-intro {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	color: #272727;
	padding: 0 10px;
}
.header-container.project #basket_link {
	margin-top: 30px;
}
.header-container.project #basket_link .selector {
	padding-bottom: 0;
}
.preview-asset-description {
	padding: 5px 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #272727;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	letter-spacing: 0.5px;
}

@media screen and (min-width: 768px) {
	.project-page-project-sub-title {
		font-size: 28px;
	}
	.artist .artist_banner {
		min-height: 180px;
	}
}
@media screen and (min-width: 1200px) {
	.artist .artist_banner {
		min-height: 224px;
	}
	.artist .artist-page-projects-tag {
		font-size: 24px;
	}
	.container.project {
		margin-top: 40px;
	}
	.project .company_name a {
		font-size: 24px;
	}	
	.project-info {
		width: 600px;
		border-right: 1px solid #b4b4b4;
	}
	.project-page-project-intro {
		margin-top: 20px;
		padding: 0 30px 10px 10px;
		display: inherit;
	}
	.project-page-project-sub-title {
		font-size: 40px;
		padding: 0 10px 10px 10px;	
	}
	.header-container.project #basket_link {
		margin-top: 85px;
	}
	.project_banner {
		margin-bottom: 120px;
	}
}
@media screen and (min-width: 1330px) {
	.header-container.project #basket_link {
		padding-right: 15px;
		margin-top: 95px;
	}
}


/* Asset page (single image) */
.image .project-info {
	border-right: none;
}
#basket_link {
    float: right;
}
#basket_link .selector li {
	padding-right: 0;
}
.asset-page-asset-image {
	padding: 10px;
	margin-bottom: 40px;
}
.asset-page-asset-image img {
    width: 100%;	
}
@media screen and (min-width: 768px) {
	.asset-page-asset-image {
		padding: 20px 0;
		width: 100%;
	}
}


/* Basket page */

.basket .company_name {
	padding: 30px 10px 10px 12px;
} 

.basket .company_name a {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	color: #b4b4b4;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 2px;
}

.basket-page-form {
	padding: 30px 0;
}
.basket-assets-intro {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	color: #272727;
}
	
@media screen and (min-width: 1200px) {
	.basket .company_name a {
		font-size: 24px;
	}	
	.basket-page-form {
		padding: 30px 10px;
	}
	.basket-assets-intro {
		padding: 0 10px;
	}
}



/* Overlay for selector */

.overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.85);
  z-index: 2; 
}

.container.overlaycontainer  {
	padding-top: 50vh;
}


/* Overlay Selector */

.selector-overlay ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	height: 50vh;
	display: grid;
	grid-template-rows: repeat(4, 9vh);
	grid-auto-flow: column;
}

.overlay a {
	color: white;
}

.overlay li.active {
	display: none;
}

/* changes pulled in as requested */
@media screen and (min-width: 1330px) {
	/*.images-full-width.hero -	background-image injected in template from cms*/
	.images-full-width.hero {
		background-size: cover;		
	}
	.images-full-width.hero.index-page {
		background-image: url('../img/hero_agency.jpg');
	}        
}

@media screen and (max-width: 1329px) {
	.images-full-width.hero {
		background-image: none !important;
	}     
}

.asset-page-asset-image video {
    width: 100%;	
}

.plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded="true"] {
	background: #bbb;
	color: #fff;
}
.plyr__control--overlaid {
	background: rgba(120,120,120,0.8);
}
.plyr--full-ui input[type="range"] {
	color: #888;
}

@media screen and (min-width: 768px) {
    @supports (break-inside: avoid-column) {
		.columns .item {
			display: block;	
			break-inside: avoid-column;
		}
    }
}