/*   
Theme Name: Twymedia
Theme URI: https://brycetwyman.com
Description: Twymedia WordPress Theme
Author: Bryce Twyman
Author URI: https://brycetwyman.com
Version: 1
*/

/* Global */

*{padding:0;margin:0;font-family:roboto,helvetica,sans-serif;}
a{text-decoration:none;color:inherit;}
p{margin-bottom:1em;line-height:1.5em;}
h1{font-family:bebas-neue,sans-serif;margin-bottom:1em;font-size:48px;font-weight:400;background-color:#000;color:#fff;text-align:center;padding:5px 0;}
h2{font-family:bebas-neue,sans-serif;margin-bottom:1em;font-size:24px;font-weight:400;}
h3{font-family:bebas-neue,sans-serif;margin-bottom:1em;font-size:16px;font-weight:400;}
.button{display:inline-block;margin:0 auto;background-color:#000;padding:10px 20px;color:#fff;border-radius:5px;}

/* Header */

.header
{
	position: absolute;
	width: 100%;
	padding: 100px;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 100;
}

.header img
{
	max-height: 50px;
	margin-right: 50px;
}

.headerLeft
{
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	height: 50px;
	width: 50px;
}

.headerRight
{
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	height: 35px;
	width: 35px;
}

.menu
{
	position: fixed;
	top: 0;
	width: 100vw;
	height: 100vh;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99;
	opacity: 0;
	transition: opacity 0.1s;
	pointer-events: none;
}

.active
{
	opacity: 1;
	pointer-events: all;
}

.menu ul
{
	list-style: none;
}

.menu ul li
{
	font-weight: 400;
	text-align: center;
	margin-bottom: 20px;
	
	font-size: 40px;
}

.menu ul li a
{
	font-family: bebas-neue, helvetica, sans-serif;
}

.current_page_item
{
	text-decoration: underline;
}

.header#home
{
	margin-bottom: 0;
}



/* Footer */

.footer
{
	width: 100%;
	padding: 100px 0;
	text-align: center;
	clear: both;
}

.footer img
{
	height: 50px;
	opacity: 0.6;
	margin-bottom: 20px;
}

.footer a
{
	opacity: 0.6;
}

.footer a:hover
{
	opacity: 1;
}

/* Page */

.main
{
	width: 720px;
	margin: 0 auto;
	min-height: calc(100vh - 605px);
	margin-bottom: 60px;
	padding: 254px 0 0 0;
	overflow: hidden;
}

.main > div, .main > main
{
	margin-bottom: 60px;
	overflow: hidden;
}

.main p a
{
	text-decoration: underline;
}

.main p a:hover
{
	background-color: #ececec;
}

.workCont
{
	overflow: hidden;
}

.workPost
{
	position: relative;
	width: 230px;
	height: 125px;
	float: left;
	background-color: #ececec;
	margin: 0 15px 15px 0;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.workPost:nth-child(3n + 3)
{
	margin-right: 0px;
}

.workPostThumb
{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow: hidden;
	background-color: #ececec;
}

.workPostInfo
{
	padding: 20px;
	margin: 0 0px;
	z-index: 5;
}

.workPostInfo h2
{
	margin: 0;
}

.workPostThumb img
{
	display: block;
	object-position: center;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* Home */

.banner
{
	width: 100%;
	background-color: #ececec;
	padding-top: 250px;
}

.statement
{
	width: 960px;
	margin: 0 auto;
	padding: 0 0 200px 0;
	display: flex;
	align-items: center;
	font-size: 24px;
}

.statement img
{
	width: 250px;
	display: block;
	float: left;
	margin-right: 60px;
}

.statement p
{
	margin: 0;
}

.recent
{
	width: 960px;
	padding: 250px 0 200px 0;
	overflow: hidden;
	margin: 0 auto;
}

.work
{
	width: 960px;
	margin: 0 auto 200px auto;
	text-align: center;
}

.logos
{
	width: 720px;
	margin: 0 auto 200px auto;
	overflow: hidden;
}

.logos div
{
	width: calc(33.3% - 20px);
	height: 100px;
	margin: 0 0 30px 0;
	float: left;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 1;
}

.logos div:nth-child(3n+2)
{
	margin: 0 30px 30px 30px;	
}

.contact
{
	width: 720px;
	margin: 0 auto 200px auto;
}

.formInput
{
	font-size: 18px;
	padding: 10px;
	background-color: #f5f5f5;
	border: none;
	max-width: 100%;
	min-width: 100%;
}

.formSubmit
{
	width: 100% !important;
    padding: 13px 0;
    text-align: center;
    background-color: #cacaca;
    border: none;
    color: #212121;
    font-size: 18px;
}

.formSelect
{
	width: 50%;
}

.formDivider
{
	margin: 50px auto 60px auto;
	width: 75%;
	border-color: rgba(0, 0, 0, 0.2);
}

.nf-field-description
{
	margin-bottom: 10px;
}

.nf-before-form-content
{
	display: none;
}

/* Single */

.pagination
{
	width: 100%;
	padding: 20px 0;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	overflow: hidden;
}

.paginationItem
{
	width: 33.3%;
	min-height: 10px;
	float: left;
}

.paginationItem#next
{
	text-align: right;
}

.paginationItem#previous
{
	text-align: left;
}

.paginationItem#back
{
	text-align: center;
}

.paginationItem#previous span
{
	display: inline-block;
	position: relative;
	transform: rotate(180deg);
	top: 3px;
}

.main#single h1
{
	margin-bottom: 10px;
}

.metaCont
{
	border-radius: 20px;
	overflow: hidden;
	display: inline-block;
}

.meta
{
	display: inline-block;
	padding: 8px 20px;
	margin: 0 5px 0 0;
	background-color: #eeeeee;
	color: #111;
	font-family: verdana, sans-serif;
	font-size: 12px;
}

.meta:last-child
{
	margin-right: 0;
}

@media screen and (max-width: 1280px){

	/* Global - Mobile */

	h1{margin-bottom:10vw;font-size:36px;}

	/* Header - Mobile */

	.header
	{
		padding: 5vw;
		height: 25vw;
	}

	/* Page - Mobile */

	.main
	{
		width: 100vw;
		padding: 25vw 5vw 0 5vw;
		box-sizing: border-box;
	}

	/* Page - Home */

	.statement
	{
		width: 90vw;
		display: block;
		text-align: center;
		padding: 0px 5vw 0 5vw;
		box-sizing: border-box;
		font-size: 20px;
		margin-bottom: 25vw;
	}

	.statement img
	{
		float: none;
		margin: 0 auto 20px auto;
		width: 50%;
	}

	.recent
	{
		width: 90vw;
		margin-bottom: 25vw;
		padding: 25vw 0 0 0;
	}

	.logos
	{
		width: 90vw;
		margin-bottom: 100px;
	}

	.contact
	{
		width: 90vw;
		margin-bottom: 25vw;
	}

	.work
	{
		width: 90vw;
		margin-bottom: 25vw;
	}

	.workPost
	{
		width: 100%;
		height: 56.25vw;
		margin-bottom: 5vw;
	}

}