/*
==============================================
SSF
============================================== */

:root {
	/* Colors */
	--black: #090909;
	--gray: #636363;
	--lightgray: #D4D4D4;
	--white: #ffffff;
}

/*
==============================================
General Styles
============================================== */

*:not(i) {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
  font-family: 'Avenir', sans-serif;
  font-weight: 400;
  color: var(--white);
  font-size: 18px;
}

/* Body */
html, body {
    width: 100%;
    margin:0px !important;
    background-color: var(--black);
}
html { height: 100%; scroll-behavior: smooth; }
body { min-height: 100%; position: relative; padding-bottom: 50px; overflow-x: hidden !important; }

.preload * {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
 }

h1 {
	font-weight: 600;
	font-size: 90px;
	line-height: 110px;
	color: var(--white);
	margin-top: -15px;
}
h2 {
	font-weight: 600;
	font-size: 30px;
	color: var(--white);
	margin-bottom: 25px;
}
h3 {
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	margin-bottom: 35px;
}
p {
	font-family: 'Hind', sans-serif;
	color: var(--lightgray);
	margin-bottom: 28px;
	line-height: 24px;
}
p a, p a:link, p a:visited { 
	border-bottom: 1px solid var(--white);
}

a, a:link, a:visited { text-decoration: none; }

img {
	border: none;
}
hr {
	width: 100%;
	border: 0;
	border-top: 1px solid var(--lightgray);
}
.resp-img {
	width: 100%;
}
.object-fit {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.button {
	display: inline-block;
	text-align: center;
	padding: 0 10px;
	height: 30px;
	line-height: 32px;
	text-transform: uppercase;
	background-color: var(--white);
	color: var(--black);
	font-weight: 700;
	font-size: 14px;
	border: 0;
	border-radius: 2px;
}
.button:hover {
	background-color: var(--lightgray);
}
.link {
	position: relative;
	display: inline-block;
	font-family: 'Hind', sans-serif;
	font-size: 18px;
	color: var(--white);
	border-bottom: 1px solid var(--white);
	line-height: 18px;
	margin-bottom: -40px;
	padding-right: 8px;
}
.link:after {
	content: '';
	height: 9px;
	width: 9px;
	position: absolute;
	right: -8px;
	bottom: -2px;
	border-top: 1px solid var(--white);
	border-right: 1px solid var(--white);
}
.link:before {
	content: '';
	position: absolute;
	right: -9px;
	bottom: 3px;
	height: 1px;
	width: 11px;
	background-color: var(--white);
	transform: rotateZ(-45deg);
}
.link:hover { color: var(--lightgray) }

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

main {
	width: 100%;
}

.container { width: 100%; max-width: 1340px; margin: 0 auto; }

.w-25 {
	width: calc(25% - 20px)
}
.w-75 {
	width: calc(75% - 20px)
}
.w-50 {
	width: calc(50% - 20px)
}

@media (max-width: 800px) {
	h1 { font-size: 40px; line-height: 48px;}
}

/*
==============================================
Header
============================================== */

header {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	padding: 40px;
}

#header-left {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}

#menu-label {
	display: inline-block;
	position: relative;
	width: 16px;
	height: 12px;
	border-top: 2px solid var(--white);
	margin-right: 18px;
	cursor: pointer;
}
#menu-label:before {
	content: '';
	position: absolute;
	top: 4px;
	height: 2px;
	width: 13px;
	background-color: var(--white);
}
#menu-label:after {
	content: '';
	position: absolute;
	top: 10px;
	height: 2px;
	width: 10px;
	background-color: var(--white);
}

#navigation:checked ~ #main-nav {
	transform: translateX(0);
}

#logo {
	display: inline-block;
	height: 40px;
}

#main-nav {
	position: fixed;
	width: calc(100% - 40px);
	max-width: 326px;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 4;
	transform: translateX(-326px);
	background-color: var(--black);
	border-right: 1px solid var(--gray);
	transition: transform 0.6s cubic-bezier(0.85, 0, 0.15, 1);
	padding: 40px 20px 20px;
}

#menu-close {
	position: absolute;
	top: 25px;
	right: 20px;
	height: 12px;
	width: 12px;
	cursor: pointer;
	transform-origin: center;
}
#menu-close:before, #menu-close:after {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	height: 2px;
	width: 13px;
	background-color: var(--white);
	transition: all 0.6s cubic-bezier(0.85, 0, 0.15, 1);
	opacity: 0;
	transition-delay: 0s;
}
#menu-close:before {
	transform: rotateZ(-45deg);
}
#menu-close:after {
	transform: rotateZ(-135deg);
}

#navigation:checked ~ #main-nav #menu-close:before { transform: rotateZ(45deg); }
#navigation:checked ~ #main-nav #menu-close:after { transform: rotateZ(-45deg); }
#navigation:checked ~ #main-nav #menu-close:before, #navigation:checked ~ #main-nav #menu-close:after { opacity: 1; transition-delay: 0.2s; }

#menu-bg {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	background-color: #090909;
	pointer-events: none;
	opacity: 0;
	transition: 0.3s ease-in-out;
}
#navigation:checked ~ #menu-bg {
	opacity: 0.6;
}

#main-nav li, #main-nav li a {
	list-style-type: none;
	font-weight: 700;
	font-size: 24px;
	line-height: 40px;
}
#invert-colors {
	display: block;
	position: absolute;
	bottom: 20px;
	left: 20px;
	width: calc(100% - 40px);
	border-top: 1px solid var(--gray);
	padding-top: 20px;
}
#invert-colors-checkbox { display: none; }

#invert-colors-label {
	display: block;
	width: 100%;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	cursor: pointer;
}
#invert-colors-label:after {
	content: '';
	position: absolute;
	right: 0;
	display: inline-block;
	z-index: 2;
	width: 32px;
	height: 20px !important;
	border-radius: 10px;
	background-color:var(--white);
	transition: background-color 0.2s ease-in-out;
	cursor: pointer;
}
#io-button {
	position: absolute;
	right: 16px;
	top: 24px;
	z-index: 3;
	width: 12px;
	height: 12px;
	border-radius: 10px;
	background-color: var(--black);
	transform: translateX(0);
	transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
#invert-colors-checkbox:checked ~ #invert-colors-label #io-button { transform: translateX(12px); }

#logged-in li {
	display: inline;
	margin-left: 10px;
}
#logged-in li:first-of-type a {
	font-size: 14px !important;
}

/*
==============================================
Footer
============================================== */

footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50px;
	line-height: 50px;
	padding: 0 40px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	border-top: 1px solid var(--gray);
}

footer p, footer p a { line-height: 50px; font-size: 14px !important; margin-bottom: 0 }

#footer-right ul li { display: inline; margin-left: 10px; }

/*
==============================================
Main
============================================== */

main {
	padding: 120px 0 100px;
}

/*
==============================================
Home
============================================== */

#home-about, #home-services, #home-contact {
	padding: 0 30px;
}
#home-about {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	padding-bottom: 130px;
	position: relative;
}

#home-about h1 { position: absolute; z-index: 2; pointer-events: none; }
#home-about h3, #home-about p { position: relative; z-index: 2; }

#home-quotes {
	position: absolute;
	top: -35px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 0;
}

@media (max-width: 800px) {
	#home-about {
		flex-flow: row wrap;
	}
	#home-about .w-25, #home-about .w-75 { width: calc(100% - 20px); }
	#home-about .w-25 { margin-bottom: 75px; }
	#home-about h1 { font-size: 40px; line-height: 48px;}
}

/* Work */

#work-slider {
	position: relative;
	width: 100%;
}

.work-card {
	position: relative;
	width: 33%;
	padding-bottom: 20%;
	margin: 0 10px;
	overflow: hidden;
}
@media (max-width: 800px) {
	.work-card { width: 50%; padding-bottom: 30% }
}
/*.work-card:hover {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100%;
	padding-bottom: 0;
	height: 100vh;
	z-index: 4;
}*/

/* Services */

#home-services {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	padding: 130px 30px 200px;
}

#home-services .w-25 {
	position: relative;
}

.service-number {
	position: absolute;
	top: 15px;
	left: -20px;
	font-size: 14px;
	font-family: 'Hind', sans-serif;
	color: var(--gray);
}

hr {
	border: 0;
	border-bottom: 1px solid var(--gray);
	width: calc(100% - 80px);
	margin: 0 auto;
}

@media (max-width: 700px) {
	#home-services { flex-flow: row wrap; padding: 100px 30px 100px }
	#home-services .w-25 {
		width: calc(100% - 20px);
	}
}

/* Contact */
#home-contact {
	padding: 130px 40px 100px;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}

@media (max-width: 650px) {
	#home-contact { flex-flow: row wrap; padding: 100px 40px 50px; }
	#home-contact .w-25, #home-contact .w-50 { width: calc(100% - 20px); }
	#home-contact h1 { font-size: 40px; line-height: 48px; margin-bottom: 20px; }
	#home-contact h1 br { display: none; }
}

/*
==============================================
Contact Page
============================================== */

#contact {
	display: flex;
	flex-flow: row nowrap;
	padding: 120px 30px 100px;
}

#contact section {
	width: 50%;
	padding: 0 10px;
}

#contact-form form {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
#contact-form form label {
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
}
#contact-form form input[type=email], #contact-form form input[type=text], #contact-form form select, #contact-form form textarea {
	width: 100%;
	line-height: 40px;
	background-color: var(--black);
	border: 1px solid var(--gray);
	padding: 0 10px;
}
#contact-form form select { height: 40px; }
#contact-form form input[type=submit] {
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	color: var(--black);
	background-color: var(--white);
	border: 0;
	border-radius: 2px;
	height: 40px;
	padding: 0 20px;
}
.form-50 *:not(label), .form-100 *:not(label) { display: block; margin-bottom: 20px; }
.form-50 { width: calc(50% - 10px); }
.form-100 { width: 100%; }
#contact-form form input[type=submit] {
	margin-left: auto;
}

@media (max-width: 800px) {
	#contact { flex-flow: row wrap; }
	#contact section { width: 100%; }
}
/*
==============================================
Category Page
============================================== */

#category {
	display: flex;
	flex-flow: row nowrap;
	padding: 120px 30px 100px;
}
#category-filter {
	width: 25%;
	padding: 0 10px;
}
#category-work {
	width: 75%;
}
#masonry { display: flex;
flex-flow: row wrap; }
#category-work h1 { margin-bottom: 60px; }
.filterDiv {
	display: none;
	width: 33.33%;
	padding: 0 10px;
	margin-bottom: 20px;
	position: relative;
}
.filterDiv picture { display: block; position: relative; }
.filterDiv img {
	width: 100%;
	height: auto;
}
.project-info {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	padding: 20px;
	transition: opacity 0.4s ease-in-out;
	z-index: 3;
}
.project-info:after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	background: linear-gradient(rgba(0,0,0,0), var(--black));
	z-index: -1;
}
.project-info h2, .project-info p { margin-bottom: 0 }
.info-tags li {
	display: inline;
	font-size: 14px;
	text-transform: capitalize;
}
.info-tags li:after {
	content: ', '
}
.info-tags li:last-of-type:after {
	content: '';
}
.filterDiv:hover > picture .project-info {
	opacity: 1
}
#category-filter .btn {
	font-family: 'Avenir', sans-serif;
	cursor: pointer;
	display: block;
	border: 1px solid var(--gray);
	background: none;
	font-size: 14px;
	line-height: 22px;
	height: 22px;
	color: var(--white);
	border-radius: 11px;
	padding: 0 9px;
	margin-bottom: 15px;
	box-shadow: 0 0 1px 0px white inset, 0 0 1px 0px white;
}
#category-filter .btn.active {
  background-color: #666;
  color: var(--black);
  background-color: var(--white);
  border: 1px solid var(--white);
}
#category-filter .btn:focus {
	outline: 0 !important;
}
.show {
  display: block;
}

@media (max-width: 800px) {
	#category { flex-flow: row wrap; position: relative; }
	#category-work, #category-filter { width: 100% }
	#category-work h1 { margin-bottom: 90px; }
	#category-filter {
		position: absolute;
		top: 160px;
	}
	#category-filter div {
		width: calc(100% + 20px);
		margin-left: -40px;
		padding: 0 40px;
		overflow-x: scroll;
		white-space: nowrap;
	}
	#category-filter div::-webkit-scrollbar {
		  display: none;
		}

	/* Hide scrollbar for IE, Edge and Firefox */
	#category-filter div {
	  -ms-overflow-style: none;  /* IE and Edge */
	  scrollbar-width: none;  /* Firefox */
	}
	#category-filter h3 { margin-bottom: 10px; }
	#category-filter .btn { display: inline-block; }
	.project-info { display: none; }
	.filterDiv { width: 50%; }
}

@media (max-width: 500px) {
	.filterDiv { width: 100%; }
	.project-info {
		display: block;
		position: relative;
		opacity: 1;
		padding: 10px 0 20px;
		left: 0;
	}
}

/*
==============================================
Page Template
============================================== */

#page {
	padding: 120px 30px 100px;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

#blog-header, #blog-content {
	min-width: 100% !important;
}
#blog-header h1 { margin-bottom: 40px; }

#blog-content {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

#page .w-50 {
	width: 50%;
	padding: 0 10px;
}
.blog-post h2 { margin-bottom: 10px; }
.post-img {
	display: block;
	position: relative;
	width: 100%;
	padding-bottom: 60%;
	margin-bottom: 20px;
	overflow: hidden;
}

@media (max-width: 650px) {
	#page .w-50, #page .w-25, #page .w-75 {
		width: 100%
	}
	#blog-header, #page .w-25, #page .w-75 { padding: 0 10px; }
}

/*
==============================================
Post Template
============================================== */

#post {
	padding: 120px 40px 100px;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

#post-body img { width: 100%; height: auto; }

.wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 800px) {
	#post { padding-top: 0; }
	#post .w-25, #post .w-75 { width: 100% }
	#post .w-25 p { display: none; }
}

/*
==============================================
About Template
============================================== */

#about {
	padding: 120px 40px 100px;
}
#about-heading h1 { margin-bottom: -160px; position: relative; z-index: 2; }
#about-heading .post-img { width: calc(100% + 80px); position: relative;left: -40px; }
#about-content {
	max-width: 100%;
	width: 600px;
	margin: 0 auto;
}