/*!
Theme Name: Tiff Portfolio
Theme URI: http://underscores.me/
Author: Josh Damesworth
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: tiff-portfolio
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Tiff Portfolio is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

img, iframe {
  vertical-align: bottom;
  max-width: 100%;
}

input, textarea, select {
  font: inherit;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
clip-path: none;
color: #21759b;
display: block;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
/* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
outline: 0;
}

.menu-toggle {
display: none;
}


/* Custom styles start here */


html {
	scroll-behavior: smooth;
}

:root {
  --blue: #0F8CE9;
}

body {
	margin: 0;
	font-family: maybry, sans-serif;
	font-weight: 100;
}

@keyframes fade-in {
	0% { 
		display: block;
		opacity: 1; 
	}
	90% {
		display: block;
		opacity: 0; 
	}
	100% { 
		display: none;
		opacity: 0;
	}
}

.fade-in {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: #fff;
	opacity: 1;
	display: block;
	
	animation: fade-in 1.5s forwards;
	animation-delay: .25s;
}

/* text */

@font-face {
	font-family: maybry;
	src: url(fonts/MabryPro-Light.ttf);
	font-weight: 100;
}

@font-face {
	font-family: maybry;
	src: url(fonts/MabryPro-Bold.ttf);
	font-weight: 300;
}

a:link {
  color: inherit;
  text-decoration: none;
  
  -webkit-transition: 0.5s cubic-bezier(0.42, 0, 0, 0.99);
  -moz-transition: 0.5s cubic-bezier(0.42, 0, 0, 0.99);
  -o-transition: 0.5s cubic-bezier(0.42, 0, 0, 0.99);
  transition: 0.5s cubic-bezier(0.42, 0, 0, 0.99);
}

a:visited {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: var(--blue);
  text-decoration: none;
  cursor: pointer;
}
a:active {
  color: inherit;
  text-decoration: none;
}

h1 {
	font-size: 50px;
	font-weight: 100;
	margin: 0;
}

h4 {
	font-size: 12px;
	font-weight: 300;
	margin: 0;
}

p {
	margin: 0;
}

.button-main {
	position: relative;
	display: inline-block;
	border: solid 2px #000;
	border-radius: 100px;
	padding: 10px 25px;
	font-size: 12px;
	font-weight: 300;
	text-transform: uppercase;
	margin: 30px 0 0 0;
	cursor: pointer;
	
	-webkit-transition: 0.5s cubic-bezier(0.42, 0, 0, 0.99);
	-moz-transition: 0.5s cubic-bezier(0.42, 0, 0, 0.99);
	-o-transition: 0.5s cubic-bezier(0.42, 0, 0, 0.99);
	transition: 0.5s cubic-bezier(0.42, 0, 0, 0.99);
}
.button-main:hover {
	border: solid 2px var(--blue);
	color: var(--blue);
}

.site-description {
	display: none;
}

/* main nav */

.site-header {
	position: fixed;
	box-sizing: border-box;
	width: 100%;
	padding: 30px;
	display: flex;
	justify-content: space-between;
	background: #fff;
	z-index: 1000;
	font-size: 25px;
}

.site-branding {
	position: relative;
	width: calc(50% - 15px);
}

.main-navigation {
	position: relative;
	width: calc(50% - 15px);
}

.menu {
	
}

.nav-menu {
	margin: 0;
	display: flex;
	justify-content: space-between;
	padding: 0;
	list-style: none;
}

/* site main */

.site-main {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	max-width: 2056px;
	margin: 0 auto;
	padding: 100px 30px 30px 30px;
}

.post-password-required {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	background: #fff;
	z-index: 20000;
}

.post-password-form p:nth-child(1) {
	margin: 0 0 35px 0;
}

/* home */

.hero-text-container {
	position: relative;
	display: flex;
	align-items: center;
	width: 60%;
	height: 75vh;
}

.projects-container {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2,1fr);
	grid-gap: 60px 30px;
}

.clearfix {
	overflow: auto;
}

.project {
	padding: 0;
	/* cursor: url('https://i.ibb.co/pRX8Fxg/close.png') 30 30, pointer; */
}

.project:hover div {
	border-radius: 40px;
}

.project:hover img {
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
}

.project div {
	position: relative;
	width: 100%;
	height: 30vw;
	overflow: hidden;
	
	-webkit-transition: 0.5s cubic-bezier(0.42, 0, 0, 0.99);
	-moz-transition: 0.5s cubic-bezier(0.42, 0, 0, 0.99);
	-o-transition: 0.5s cubic-bezier(0.42, 0, 0, 0.99);
	transition: 0.5s cubic-bezier(0.42, 0, 0, 0.99);
}

.project img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	
	-webkit-transition: 1s cubic-bezier(0.42, 0, 0, 0.99);
	-moz-transition: 1s cubic-bezier(0.42, 0, 0, 0.99);
	-o-transition: 1s cubic-bezier(0.42, 0, 0, 0.99);
	transition: 1s cubic-bezier(0.42, 0, 0, 0.99);
}

.project p {
	font-size: 20px;
	margin: 15px 0 0 0;
}
.project p:last-of-type {
	color: #9B9B9B;
	margin: 0;
}

/* project */

.entry-header {
	position: relative;
	width: 100%;
	height: auto;
	margin: 100px 0 0 0;
}
.entry-header h1 {
	margin: 0 0 30px 0;
}

.project-content {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 0 100px 0;
}

.project-content p {
	font-size: 12px;
	margin: 5px 0 20px 0;
}

.project-description {
	max-width: 650px;
	line-height: 21px;
}

.post-thumbnail img {
	position: relative;
	width: 100%;
	height: calc(100vh - 30px);
	object-fit: cover;
}

.project-gallery {
	position: relative;
	width: 100%;
}

.gallery-full-width {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 0 30px 0;
}

.side-by-side {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2,1fr);
	grid-gap: 30px;
	width: 100%;
	height: auto;
	margin: 0 0 30px 0;
}
.side-by-side img {
	position: relative;
	width: 100%;
	height: 60vh;
	object-fit: cover;
}

.embed-container { 
	position: relative; 
	padding-bottom: 56.25%;
	overflow: hidden;
	max-width: 100%;
	height: auto;
} 

.embed-container iframe,
.embed-container object,
.embed-container embed { 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.half-text {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	width: 100%;
	height: 60vh;
	padding: 0 100px 0 100px;
	
	font-size: 20px;
	line-height: 27px;
}

.video-text {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 0 100px 0 100px;
	
	font-size: 20px;
	line-height: 27px;
}

.swiper {
  width: 100%;
  height: auto;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-button-next {
	background: #fff;
	padding: 20px;
}
.swiper-button-prev {
	background: #fff !important;
	padding: 20px;
}

.process-container {
	position: relative;
	margin: 100px 0 0 0;
	width: 100%;
	height: auto;
	border-top: solid 2px #000;
}
.process-container h1 {
	margin: 15px 0 100px 0;
}

/* footer */

.site-footer {
	position: relative;
	width: 100%;
	height: auto;
}

.marquee-container {
	position: relative;
	display: flex;
	margin: 100px 0 100px 0;
	width: 200%;
	height: auto;
	white-space: nowrap;
	overflow: hidden;
	transform: translate(-50%, 0);
}

.marquee {
	display: block;
	animation: marquee 10s linear infinite;
	font-size: 80px;
}

@keyframes marquee {
	0% {
		transform: translateX(0);
		-webkit-transform: translateX(0);
	}
	100% {
		transform: translateX(100%);
		-webkit-transform: translateX(100%);
	}
}

.contact-link {
	-webkit-transition: 0.5s cubic-bezier(0.42, 0, 0, 0.99);
	-moz-transition: 0.5s cubic-bezier(0.42, 0, 0, 0.99);
	-o-transition: 0.5s cubic-bezier(0.42, 0, 0, 0.99);
	transition: 0.5s cubic-bezier(0.42, 0, 0, 0.99);
}

.contact-link:hover {
	color: var(--blue);
}

.site-info {
	position: relative;
	display: flex;
	justify-content: center;
	margin: 0 0 30px 0;
	width: 100%;
	height: auto;
	text-align: center;
}


@media screen and (max-width: 1000px) {
	.hero-text-container {
		width: 100%;
		height: 40vh;
	}
	
	h1 {
		font-size: 30px;
	}
	
	.site-header {
		font-size: 16px;
	}
	
	.projects-container {
		grid-template-columns: repeat(1,1fr);
	}
	
	.project div {
		height: 50vw;
	}
	
	.post-thumbnail img {
		height: auto;
	}
	
	.side-by-side {
		grid-template-columns: repeat(1,1fr);
	}
	
	.side-by-side img {
		height: auto;
	}
}