/**
 * Theme Name: Portfolio Theme 2019 (Joe R Perez)
 * Description: A custom WordPress theme designed by Joe Perez showcase his art and design work. 
 * Author: Thomas Rotella
 * Version: 1.0
 */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* RESET CSS (Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html) */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

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, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
:focus {/* remember to define focus styles! */
	outline: 0;
}

body {
	background: #fff;
	line-height: 1;
}
ol, ul {
	list-style: none;
}
table {/* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	font-weight: normal;
	text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
a img {
	border: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - */
/* FONT IMPORT
/* - - - - - - - - - - - - - - - - - - - - - - - - - */
@font-face {
  font-family: 'Replica';
		src: url('font/Replica-Regular.woff') format('woff'),
		url('font/Replica-Regular.woff') format('woff');
}
@font-face {
  font-family: 'ReplicaBold';
		src: url('font/Replica-Bold.woff')  format('woff'),
		url('font/Replica-Bold.woff')  format('woff'); 
}
@font-face {
  font-family: 'ReplicaLight';
		src: url('font/Replica-Light.woff') format('woff'),
		url('font/Replica-Light.woff') format('woff'); 
}
@font-face {
  font-family: 'RegularBook';
		src: url('font/Regular-Book-Nik-Thoenen.woff') format('woff'),
		url('font/Regular-Book-Nik-Thoenen.woff') format('woff');
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - */
/* GENERAL
/* - - - - - - - - - - - - - - - - - - - - - - - - - */
body {
	color: #000;
	font-size: 14px;
	font-family: Replica, Helvetica, Arial, sans-serif;
	text-align: center;
	background: #fff;
}
a {
	color: #333;
	text-decoration: none;
}
strong { font-weight: 700; }
.clear { clear: both; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - */
/* TYPOGRAPHY
/* - - - - - - - - - - - - - - - - - - - - - - - - - */
.content h1 { font-size: 1.2em; margin: 0 0 14px 0; }
.content h2 { font-size: 1.1em; }
.content h3 { font-size: 1.0em; }
.content h1, .content h2, .content h3 { font-weight: bold; text-transform: uppercase; }
.content h4, .content h5, .content h6 { font-weight: normal; font-size: 1.0em; }
.content p, .content ul, .content ol { margin: 0 0 18px 0; }
.content p, .content li { line-height: 1.3em; }

.page-credits {
	margin: 0 0 100px 0;
}
.page-footer {
	margin: 30px 0 50px 0;
}
.page-footer a{
	font-size:12px;
}
.page-credits p {
	margin: 0 0 5px 0;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - */
/* HOME PAGE
/* - - - - - - - - - - - - - - - - - - - - - - - - - */


.home-screens{
	height: 100%;
	width: 100%;
	background-size: contain;
  	position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    overflow:hidden;
    z-index:-1;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - */
/* LAYOUT
/* - - - - - - - - - - - - - - - - - - - - - - - - - */


.content{clear:both;}
#content-wrap {
	max-width: 1248px;
	width: auto;
	margin: 0 auto;
	text-align: left;
}
#page {
	margin: 70px 0 120px 0;
}
.single #main.content{
	padding:0 8px;
}

#trio-container-full{
	width: 100%;
	max-width:1248px;
}
#trio-container-full img{
	width: 100%;
	max-width: 1248px;
	height:auto;
}
#trio-container-large{
	max-width: 816px;
	width:816px;
	max-height: 816px;
	height:auto;
	float:left;
}
#trio-container-large img{
	max-width: 816px;
	width: 100%;
	height: auto;
	max-height: 816px;
}
#trio-container-side{
	max-width:400px;
	width:400px;
	height: 816px;
	max-height: 816px;
	float: right;
}
#trio-container-side img{
	max-width: 400px;
	width: 100%;
	height: auto;
	max-height:400px;
	display:block;
}
#trio-container-side #trio-img-three{ margin-top:16px; }
.fancybox-is-open .fancybox-bg{
	background:#ffffff;
	opacity: 0.9 !important;
}
.fancybox-container .fancybox-slide .fancybox-content{
	box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);
}
.fancybox-container .fancybox-close-small svg{
	color:#000;
}
.lightbox-img{cursor:pointer;}

#portfolio-title{
	width:25%;
	float:left;
	margin-top:40px;
	font-size: 20px;
	font-family: Replica, Helvetica, Arial, sans-serif;
}
#portfolio-credits{
	width: 55%;
	float:left;
	margin:40px 0 0 50px;
	font-size: 16px;
	font-family: Replica, Helvetica, Arial, sans-serif;
}
#full-credits{
	max-height:155px;
	height: auto;
	overflow: hidden;
	transition: all .5s ease;
}
#full-credits.credits-full{
	max-height:800px;
	height: auto;
	transition: all 2s ease;
}
#credits-toggle{
	font-size:12px;
	text-decoration:underline; 
	cursor:pointer;
	display: block;
	margin:20px 0 50px;
}


#image-grid{
	clear: both;
	width: 100%;
	max-width: 1232px;
	height: auto;
	display: inline-block;
	margin-bottom: 40px;
}
.grid-image{
	display: block;
	width: 33%;
	max-width:400px;
	float: left;
	margin: 8px 0;
}
.grid-image:nth-of-type(3n+2){
	margin:8px 16px;
}
.grid-image-stacked{
	display: inline-block;
	width: 100%;
	margin: 8px 0;
}

#portfolio-images{
	clear: both;
	width: 100%;
	max-width: 1232px;
	height: auto;
	display: inline-block;
	margin-bottom: 40px;
}

.portfolio-image-two-thirds{
	display: block;
	width: 66%;
	max-width:816px;
	float: left;
	margin: 8px 0;
}
.portfolio-image-full{
	display: inline-block;
	width: 100%;
	margin: 8px 0;
}

#page-header { margin: -30px 0 40px 0; }
#page-header .page-title {
	font-weight: 500;
	text-transform: uppercase;
}
.category #page-header {
	margin: 0 0 15px 0;
}

#portfolio {
	margin: 0;
	width: 100%;
	
}
/* - - - - - - - -LARGE GRID - - - - - - - - - - - - */
#portfolio .hentry {
	width: 400px;
	height: 400px;
	background: #f7f7f7;
	margin: 0 8px 16px 8px;
	float: left;
	position: relative;
	text-align: center;
	transition: all 1.5s;
	transition-timing-function: cubic-bezier(.3, 0, 0, 1);
}

#portfolio header {
	position: relative;
	z-index: 1;
}
#portfolio header a {
	display: block;
	width: 100%;
	height: 100%;
}
#portfolio .entry-header{
	margin:151px 0;
}
#portfolio .entry-title {
	font-size: 2.5em;
	font-weight: normal;
	font-family: RegularBook, Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	margin: 0; 
	letter-spacing: -1px;
	line-height: .9em;
	width: 100%;
	padding: 0;
}
#portfolio .entry-tags {
	font-weight: 500;
	font-size: 1.2em;
	text-transform: uppercase;
	margin: 0 0 18px 0;
}
#portfolio .entry-thumbnail {
	position: absolute;
	top: 0;
	z-index: 2;
	background: #fff;
}
#portfolio .entry-thumbnail a img{
	max-width: 400px;
	height:auto;
	transition: all .5s ease;
	transition: height 1.5s;
	transition: max-width 1.5s;
	transition-timing-function: cubic-bezier(.3, 0, 0, 1);
}
#portfolio .entry-thumbnail a img:hover{	
	transition: all .5s ease;
}
/* - - - - - - - -SMALL GRID - - - - - - - - - - - - */

#portfolio .hentry-small{
	width: 192px;
	height: 192px;
}
#portfolio .hentry-small .entry-thumbnail a img{
	max-width: 192px;
	transition: height 1.5s;
	transition: max-width 1.5s;
	transition-timing-function: cubic-bezier(.3, 0, 0, 1);
}

#portfolio .hentry-small .entry-header{
	margin:47px 0;
}

#portfolio .hentry-small .entry-title{
	font-size: 1.2em;
}
#portfolio .hentry-small .entry-tags, #portfolio .hentry-small .entry-description,#portfolio .hentry-small.entry-date{
	font-size: .8em;
}

.page-content {
/* 	margin: 0 0 130px 0; */
}
.feat-img img{
	max-width: 1248px;
	width:100%;
	height:auto;
}

/*Studio page*/
body.page-id-10.et-db #et-boc .et_pb_module a{
	color:#333;
}
body.page-id-10 #et-boc{
	padding:0 8px;
}
#studio-top #box-one, #studio-top #box-two, #studio-top #box-three{
	font-size: 22px;
}
#studio-top #box-one{
	float: left;
	width: 300px;
	font-weight:600;
	margin-right: 165px;
	letter-spacing: .5px;
} 
.page-id-10 .et-boc .et_pb_text strong{
	letter-spacing: .5px !important;
}
#studio-top #box-two{
	float: left;
	width: 370px;
}
#studio-top #box-three{
	float: right;
	width: 243px;
}

/* - - - - - - - -SHOP/PRODUCTS - - - - - - - - - - - - */

.woocommerce-result-count{
	display: none;
}
.woocommerce-message{
	border-top: 3px solid #000;
}
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt{
	background-color: #000 !important;
	border-radius: 0;
}

.font-products form.woocommerce-ordering{
  margin-bottom: 15px !important;
  margin-right: 8px !important;
}
.et-db #et-boc .et-l .et_pb_shop .woocommerce.columns-3 ul.products li.product{
	width: 400px !important;
	height: 400px;
	margin: 0 8px 80px 8px;
}

.single-product .woocommerce-product-gallery .flex-viewport, 
.single-product .woocommerce-product-gallery .flex-control-thumbs li, 
.single-product .woocommerce-product-gallery .flex-control-thumbs li img{
	border-style:none !important;
	border: 0 !important;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - */
/* HEADER
/* - - - - - - - - - - - - - - - - - - - - - - - - - */
#masthead {
    margin: 20px 0 40px 0;
	padding: 0 8px;
	width: auto;
	font-size: 27px;
}
.page #masthead,
.single #masthead,
.category #masthead{}


.home #branding{width: 25%;}
.home #navigation{width: 50%}

/* Branding Styles */
#branding {
	margin: 0;
/* 	font-size: 1.2em; */
	float: left;
	width: 34%;
}
#branding, #navigation{height: 22px; line-height: 22px;}

/* body.home #logo #logo-name, body.home #logo #logo-desc{
	color:white;
	mix-blend-mode: difference;
} */
#logo {
	display: inline-block;
}
#logo #logo-name {
	font-family: Replica;
}
#logo #logo-desc {
	font-family: ReplicaLight;
}

/* Work Sub Navigation */
#work-subnav{
	width:32.8%;
	float: left;
	font-family: Replica, Helvetica, Arial, sans-serif;
	font-size:11px;
	margin: 10px 0 0 0;
}
#work-subnav ul{}
#work-subnav li{
	display:block;
	padding: 0 13px;
	float:left;
}
#work-subnav li:first-of-type{padding-left:0;}
#work-subnav li:last-of-type {padding-right:0;}
#work-subnav li a:hover,#work-subnav li.current-menu-item a{ color: #777;}

/* Grid Icons */
#grid-icons{
	width:8%;
	float:left;
}
#grid-icons #large-grid{background: url(images/large-grid-icon.png) no-repeat;height:20px;width:20px;background-size: contain;}
#grid-icons #small-grid{background: url(images/small-grid-icon.png) no-repeat;height:20px;width:20px;background-size: contain;}
#grid-icons #large-grid, #grid-icons #small-grid{  
	width: 20px;
    height: 20px;
    float: left;
	margin: 0 0 0 10px;
	cursor: pointer;
}

/* Main Navigation */
#navigation { font-family: Replica, Helvetica, Arial, sans-serif; width: 21%; float: right}
#navigation ul { /*height: 25px;*/ text-align: right; }
#navigation li { display: inline-block; /*height: 25px;*/ margin: 0; }
#navigation li:nth-of-type(2){margin: 0 0 0 95px;}
/* #navigation li:hover, #navigation li.current-menu-item { border-bottom: 1px solid #fd3a00; } */
/* body.home #navigation li a{ color:white; mix-blend-mode: difference; } */
#navigation li a { color:#000; display: block; width: 100%; height: 100%; transition: all 0.5s ease;}
#navigation li a:hover,#navigation li.current-menu-item a{ color: #777;}

#responsive-menu-container{
	opacity: .94;
}
#responsive-menu-container #responsive-menu{
	text-transform: uppercase;
	margin-top: 115px;
}
.responsive-menu-subarrow{display: none !important;}
#responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item a.responsive-menu-item-link{
	height: 28px;
	line-height: 28px;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - */
/* PORTFOLIO
/* - - - - - - - - - - - - - - - - - - - - - - - - - */
.single #page-title { margin: 0 0 4px 0; font-family: ReplicaBold; font-size:1.2em; font-weight:normal;}
.single #page-subtitle { text-transform: uppercase; margin: 0; font-weight: normal; }
.single #page-header { margin: -30px 0 40px 0; }
.single .entry-content { margin: 0 0 130px 0; }
.entry-description {
    margin: 0 0 5px 0;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - */
/*  FOOTER
/* - - - - - - - - - - - - - - - - - - - - - - - - - */
footer, footer #social a{
/* 	color:white;
	mix-blend-mode: difference; */
}

footer{
	font-family: Replica;
	font-size:14px;
	max-width: 1232px;
	width: 100%;
	margin: 0 8px;
}
body.home footer{
	position:fixed;
	bottom: 50px;
	z-index:10;
}
footer #copyright{
	width: 50%;
	float:left;
}
footer #social{
	Width: 50%;
	float: right;
	text-align:right;
}
.page-id-10 footer #copyright, .page-id-10 footer #social a{
	font-family: ReplicaBold;
	font-size:14px;
	mix-blend-mode: unset;
	color:#000;
}
.page-id-10 #social a{
	margin-left: 30px;
}
#social a{
	text-decoration: none;
	font-family: Replica;
	margin-left: 30px;
	font-size:14px;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - */
/* MOBILE AND TABLET
/* - - - - - - - - - - - - - - - - - - - - - - - - - */

.mobile-btn{
    display: block;
    -webkit-border-radius: 12px;
    -webkit-box-shadow: 2px 2px 3px #999; 
    border: solid 3px rgb(110,110,110);
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(74,74,74,0.85)), color-stop(0.5, rgba(20,20,20,0.75)), color-stop(0.5, rgba(2,2,2,0.75)), to(rgba(14,14,14,0.75))); 
    color: #fff;
    text-shadow: #000 0 1px 0;
    font: bold 30px/20px Helvetica, Sans-serif;
    padding: 40px 11px;
    width:95%;
    margin:10px auto 30px;
}
.mobile-btn:hover, .mobile-btn.hover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.85)), color-stop(0.5, rgba(200,200,200,0.75)), color-stop(0.5, rgba(150,150,150,0.75)), to(rgba(100,100,100,0.65)));  
    color: #fff;
    text-shadow: #000 0 1px 0;
    -webkit-box-shadow: inset rgba(207,207,255,0.75) 0px 1px 1px;
}

/* just below the max screenwidth ----------- */
@media only screen and (max-width: 1280px) {

	#portfolio .hentry {
		width: 32%;
		max-width: 400px;
		height: auto;
		margin: 0 7px 14px 7px;
		transition: all .5s ease;
		transition: height 1.5s;
		transition: max-width 1.5s;
		transition-timing-function: cubic-bezier(.3, 0, 0, 1);
	}
	#portfolio .entry-thumbnail a img{
		width:100%;
	}
	#portfolio .hentry-small{
		max-width: 192px;
		width: 15%;
		height: auto;
	}

}
@media only screen and (max-width: 1248px) {
	#branding{width: 33%;}
	#work-subnav{min-width: 400px;}
}
/* just below the max screenwidth ----------- */
@media only screen and (max-width: 1170px) {

	#navigation li:nth-of-type(2){
		margin: 0 0 0 30%;
	}
	#branding{width: 31%;}

}
/* just below the max screenwidth ----------- */
@media only screen and (max-width: 1070px) {

	#portfolio .hentry {
		width: 32%;
		height: auto;
		margin: 0 6px 12px 6px;

	}
	#branding{width: 28%;}
	#navigation{width: 19%;}
	#navigation li:nth-of-type(2){
		margin: 0 0 0 20px;
	}

}
/* just below the max screenwidth ----------- */
@media only screen and (max-width: 920px) {

	#portfolio .hentry {
		margin: 0 4px 8px 4px;

	}
	#navigation li:nth-of-type(2){
		margin: 0 0 0 10px;
	}
	#branding{width: 25%;}
}


/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width: 768px) {
	#masthead{
		height: auto;
	}
	#branding{
		margin-bottom:15px;
	}
	#branding{
		width: 100% !important;
		float:none;
		text-align:center;
	}
	#branding #logo-name, #branding #logo-desc{
		display:block;
		width:100%;
		text-align:center;
	}
#content-wrap{width:98%;  margin: 0 auto; }
#portfolio {width:100%;margin: 0;}
#portfolio .hentry {width:100%;	margin:0 0 10px; max-width: unset;}
#portfolio .entry-title {width:100%;}
#portfolio .hentry .entry-thumbnail a img {width:100% !important;max-width:unset;}
	
	#portfolio-title, #portfolio-credits, #trio-container-large, #trio-container-side{width: 100%;float: none;}
	#trio-container-side, #trio-container-side img {max-width:none; max-height:none; height:auto;}
	#trio-img-two{margin-top:5.5%;}
	#full-credits{max-height:none;}
	#credits-toggle{display:none;}
	#portfolio-credits{margin-left:0;}
	
	#studio-top #box-one, #studio-top #box-two, #studio-top #box-three{
		float:none;
		width: 80%;
		margin:20px 0 0 15px;
	}
	
	.grid-image, .portfolio-image-two-thirds, .portfolio-image-full{
		float:none;
		margin: 8px 0;
		width: 100%;
		max-width:none;
		display: inline-block;
	}
	.grid-image:nth-of-type(3n+2){	margin: 8px 0;	}
	
}



/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {

#portfolio .hentry, #portfolio, #portfolio, #content-wrap, #portfolio .hentry img{
    /*width:95%;*/
	
	
  }

#content-wrap { margin:0 10px; }



}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}