@charset "utf-8";
/* CSS Document */

body { padding-top: 80px; } /* To avoid fixed navbar overlapping content */
.comingsoon {
	display: flex;
	justify-content: center;
}
.jumbotron {
  /*background-image: url("../images/texture5.jpg");*/
  background-color:coral;
  background-position: center;
  background-size: cover;
}

.inset20 {
  margin: 40px;
}

.mt-halfheight {
	margin-top: 27px;
}

/* BEGIN BORROWED SNIPPET  */

.hovereffect {
width:100%;
height:100%;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
}

.hovereffect .overlay {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color: #333;
-webkit-transition:all .3s ease-in-out;
transition:all .3s ease-in-out
}

.hovereffect img {
display:block;
position:relative;
-webkit-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}

.hovereffect a.info {
text-decoration:none;
display:inline-block;
color:#fff;
background-color:transparent;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
text-align: center;
margin-top: 40%;
padding:20px 20px;
}

.hovereffect:hover img {
-ms-transform:scale(1.1);
-webkit-transform:scale(1.1);
transform:scale(1.1);
}

.hovereffect:hover .overlay {
opacity:0.8;
filter:alpha(opacity=80);
}

.hovereffect:hover a.info {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translatey(0);
-webkit-transform:translatey(0);
transform:translatey(0);
}

.hovereffect:hover a.info {
-webkit-transition-delay:.2s;
transition-delay:.2s;
}

/* END BORROWED SNIPPET  */

.p-interlink {
	background-image:url(https://www.bootlegg.co.uk/images/sqr-interlink.jpg);
    background-repeat:none;
    background-size:cover;
}

.proj-link {
	padding: 0;
	margin: 0;
	text-decoration: none;
	color: #fff;
}

.proj-thumb:hover .hovtext {
    opacity:0.8;
}

.hovtxt {
	background:#ff7f50;
	position: absolute;
	opacity:0;
	transition: 0.3s ease;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

iframe.vidz{
	aspect-ratio: 1 / 1;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
iframe.formz{
	aspect-ratio: 1 / 1;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	width: 100%;
}
.modal.fade .modal-dialog {
  -webkit-transform: translate(0, 0px);
  transform: translate(0, 0px);
}
.modal-content {
  background-color: rgba(255,255,255,0.00);
  background-clip: padding-box;
  border: 0;
  border-radius: 0;
  outline: 0;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
}
.modal-backdrop {
  background-color: #ff671b;
}
.modal-backdrop.show {
  opacity: 0.9;
}

/* Navbar styling */

.nav-link {
	color: #ff7f50;
	font-weight: 600;
	font-size: 1.5rem;
	transition: 0.3s ease;
}
.nav-link:hover, .nav-link:focus {
	color: #14b2a9;
}

/* text styling */

body {background-color: #eee;
font-family: 'Poppins', sans-serif;
letter-spacing: 0em;
}

h1, h2 {
	font-weight: 600;
}
h3, h4 {
	font-weight: 600;
}
h1.home, h2.home {
	color: #fff;
	font-weight: 800;
}
.tighthead {
	line-height: 130%;
}
.intro-contrast {
	color:#fff;
	text-transform: none;
}
#hi {
	font-weight: 800;
	font-size: 4rem;
}
#about {
	color: #666;
	font-weight: 600;
}
a.textlink{
	color: #ff7f50;
	font-weight: 600;
}
a.textlink:hover, a.textlink:focus{
	text-decoration: none;
	color: #14b2a9;
}

/* filter styling */

:root {
  --red: #A33523;
  --white: #fff;
  --green: #00A490;
  --dark: #1A1A1A;
  --orange: #ff671b;
  --grey: #596f7f;
}

ol {
  list-style: none;
}

input[type="radio"] {
  position: absolute;
  left: -9999px;
}

figure {
	margin: 1rem;
}

figure img {
	  transition: 0.5s ease;
}

.filters {
  text-align: left;
  margin: 2rem 0rem;
  padding-left: 0px;
}
/*.filters * {
  display: inline-block;
}*/
.filters label {
  line-height: 1rem;
  cursor: pointer;
	font-size: 2rem;
	font-weight: 600;
	text-transform: uppercase;
  transition: 0.3s ease;
}
.filters label:hover {
  color: var(--grey);
  padding: 0rem 1rem;
}

.posts {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
  padding-left: 0px;
}
/*.posts .post {
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, 0.1);
}*/

/*.posts figcaption {
  padding: 1rem;
}*/
.posts .post-categories {
  margin-bottom: 0.75rem;
  font-size: .75rem;
}
.posts .post-categories * {
  display: inline-block;
}
.posts .post-categories li {
  margin-bottom: 0.2rem;
}
.posts .post-categories a {
  padding: 0.2rem 0.5rem;
  border-radius: 1rem;
  border: 1px solid;
  line-height: normal;
  background: all 0.1s;
}
.posts .post-categories a:hover {
  background: var(--grey);
  color: var(--white);
}
@media screen and (max-width: 900px) {
  .posts {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 650px) {
  .posts {
    grid-template-columns: repeat(2, 1fr);
  }
}

[value="All"]:checked ~ .posts [data-category] {
  display: block;
}

[value="graphics"]:checked ~ .posts .post:not([data-category~="graphics"]),
[value="motion"]:checked ~ .posts .post:not([data-category~="motion"]),
[value="identity"]:checked ~ .posts .post:not([data-category~="identity"]),
[value="print"]:checked ~ .posts .post:not([data-category~="print"]),
[value="digital"]:checked ~ .posts .post:not([data-category~="digital"]),
[value="signage"]:checked ~ .posts .post:not([data-category~="signage"]),
[value="packaging"]:checked ~ .posts .post:not([data-category~="packaging"]) {
  display: none;
}

[value="All"]:checked ~ .filters [for="All"],
[value="graphics"]:checked ~ .filters [for="graphics"],
[value="motion"]:checked ~ .filters [for="motion"],
[value="identity"]:checked ~ .filters [for="identity"],
[value="print"]:checked ~ .filters [for="print"],
[value="digital"]:checked ~ .filters [for="digital"],
[value="signage"]:checked ~ .filters [for="signage"],
[value="packaging"]:checked ~ .filters [for="packaging"] {
  color: var(--orange);
}

.post
{
	border-radius: 50%;
	display: inline-block;
	opacity: 1;
  	backface-visibility: hidden;
	text-align: center;
}
.post a {
	color: var(--dark);
	font-weight: 400;
}
.post a:hover {
	color: var(--grey);
	text-decoration: none;
}
.post-title {
  display: block;
  transition: 0.5s ease;
  opacity: 0;
  position: relative;
}
li .post {
	text-align: center;
}
.post:hover img{
	opacity: 0.5;
}
.post:hover .post-title{
	opacity: 1;
}

.contactable {
	padding-bottom: 30px;
}
.contactable img {
	  transition: 0.5s ease;
}
.contactable:hover img{
	opacity: 0.5;
}
.sociable {
	font-size: 2rem;
}
.fa-colour {
	color: #ff671b;
	transition: 0.3s ease;
}
.fa-colour:hover {
	color: #596f7f;	
}