/*
	Name: Brooke Condolora Studio
    Date: June 2022
    Version: 8.1
    Author: Brooke Condolora
    Author URL: https://brookecondolora.com
    
    This website and its components are protected by copyright from both commercial and personal use.
    
    © Brooke Condolora
    
*/

/*

COLORS:

Blue: #56D7D7 rgba(86, 215, 215, 1)
Red: #FF6F59, rgba(255, 111, 89, 1)
Dk. Gray: #8C8885
Md. Gray: #B3ADAA, rgba(179, 173, 170, 1)
Lt. Gray: #FAFAFA
Brown: #A0643A


*/

@import url("reset.css");

@font-face {
    font-family: 'proximanova';
    src: url('/fonts/proximanova-regular-webfont.eot');
    src: url('/fonts/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/proximanova-regular-webfont.woff2') format('woff2'),
         url('/fonts/proximanova-regular-webfont.woff') format('woff'),
         url('/fonts/proximanova-regular-webfont.ttf') format('truetype'),
         url('/fonts/proximanova-regular-webfont.svg#proxima_novaregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'proximanova';
    src: url('/fonts/proximanova-regularit-webfont.eot');
    src: url('/fonts/proximanova-regularit-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/proximanova-regularit-webfont.woff2') format('woff2'),
         url('/fonts/proximanova-regularit-webfont.woff') format('woff'),
         url('/fonts/proximanova-regularit-webfont.ttf') format('truetype'),
         url('/fonts/proximanova-regularit-webfont.svg#proxima_novaitalic') format('svg');
    font-weight: normal;
    font-style: italic;

}
@font-face {
    font-family: 'proximanova';
    src: url('/fonts/proximanova-medium-webfont.eot');
    src: url('/fonts/proximanova-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/proximanova-medium-webfont.woff2') format('woff2'),
         url('/fonts/proximanova-medium-webfont.woff') format('woff'),
         url('/fonts/proximanova-medium-webfont.ttf') format('truetype'),
         url('/fonts/proximanova-medium-webfont.svg#proxima_novamedium') format('svg');
    font-weight: 500;
    font-style: normal;

}
@font-face {
    font-family: 'proximanova';
    src: url('/fonts/proximanova-semibold-webfont.eot');
    src: url('/fonts/proximanova-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/proximanova-semibold-webfont.woff2') format('woff2'),
         url('/fonts/proximanova-semibold-webfont.woff') format('woff'),
         url('/fonts/proximanova-semibold-webfont.ttf') format('truetype'),
         url('/fonts/proximanova-semibold-webfont.svg#proxima_novasemibold') format('svg');
    font-weight: 700;
    font-style: normal;

}




/* HTML5 */

header, section, footer,
aside, nav {
	display: block;
}



/* BROWSER OVERRIDES */

* {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-moz-osx-font-smoothing: grayscale; /* Font weight in Firefox. */
	-webkit-font-smoothing: antialiased;  /* Fixes font weight in Safari. */
}

input[type="text"], input[type="email"], input[type="search"], input[type="password"] {
	-webkit-appearance: caret;
	-moz-appearance: caret;
}

a {
	outline: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

a img {
	outline : none;
}

img {
	outline: none;
}




/* GLOBAL */

html, body {
	height: 100%;
}

body {
	background-color: white;
	font-family: 'proximanova', sans-serif;
	font-size: 100%;
	color: #8C8885;
	margin: 0 auto;
}

a {
	color: #56D7D7;
		-webkit-transition: all 200ms ease-in;
		-moz-transition: all 200ms ease-in;
		-o-transition: all 200ms ease-in;
	transition: all 200ms ease-in;
	text-decoration: none;
}

a:hover {
	background-color: #FFF89F;
	color: #999491;
}

em,
i {
	font-style: italic;
}

strong {
	font-weight: 700;
}

img {
	height: auto;
	margin: 0 auto;
	max-width: 100%;
	width: auto;
}

ul {
	list-style-type: none;
	padding-left: 0;
	margin-left: 0;
}

h1 {
	color: #B3ADAA;
	font-size: 180%;
	font-weight: normal;
	line-height: 1.5;
}

h2 {
	color: #8C8885;
	font-size: 170%;
	font-weight: 500;
	padding-bottom: .2em;
	text-transform: uppercase;
}

h3 {
	font-size: 100%;
	font-weight: normal;
	text-transform: uppercase;
}

h4 {
	letter-spacing: .5px;
	font-size: 80%;
	font-weight: 700;
	margin-bottom: 1em;
	text-transform: uppercase;
}




/* LIBRARY */


#push {
	height: 12em;  /* Same height as footer. */
}

.clear {
	clear: both;
}

span.highlight {
	background-color: #FFF89F;
}




/* LAYOUT */

#wrap {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -12em; /* Negative value of footer height. */
	overflow-x: hidden;
}

.container,
section.container {
	margin-left: auto;
	margin-right: auto;
	max-width: 1280px;
	width: 80%;
}

header {
	background-color: white;
	padding: 4rem 0;
	width: 100%;
}

a#logo {
	background: url('https://brookecondolora.com/assets/images/logo.svg') no-repeat;
	background-size: 120px 120px;
	display: block;
	height: 120px;
	float: left;
	width: 120px;
}

nav {
	float: right;
	font-size: 100%;
	font-weight: 700;
	height: 61px;
	margin-left: auto;
	margin-top: 3.25rem;
	text-transform: uppercase;
}

nav ul li {
	display: inline-block;
	float: left;
	text-align: right;
	padding: 0;
	padding-left: 1.5rem;
}

nav ul li a {
	color: #B3ADAA;
}

nav ul li a:hover {
	background: transparent;
	color: #56D7D7;
}

nav ul li.active a {
	color: #8C8885;
}

header h1 {
	display: block;
	margin-top: 4rem;
}

header h1 strong {
	color: #8C8885;
	font-weight: 500;
}

footer {
	background-color: #56D7D7;
    height: 12em;
    overflow: hidden;
    width: 100%;
}




/* HOME */

section#work {
	margin: 0 auto;
	max-width: 1280px;
	padding-bottom: 5rem;
	width: 100%;
}

section#work .container {
	width: 90%;
}

section#work ul.projects {
	margin: 0 -4% -4% 0;
	overflow: hidden;
}

section#work ul.projects > li {
	display: inline-block;
	float: left;
	margin: 0 4% 4% 0;
	padding: 0;
	position: relative;
}

section#work ul.projects li.small {
	max-width: 614px;
	width: 46%;
}

section#work ul.projects li .project-image {
	position: relative;
}

section#work ul.projects li article {
	background-color: transparent;
	clear: both;
	color: transparent;
	height: 100%;
		-webkit-transition: all 300ms ease-in;
		-moz-transition: all 300ms ease-in;
		-o-transition: all 300ms ease-in;
	transition: all 300ms ease-in;
	position: absolute;
	text-align: center;
	top: 0; left: 0; bottom: 0; right: 0;
	width: 100%;
	z-index: 2;
}

section#work ul.projects img {
	display: block;
}

section#work ul.projects li:hover article {
	background-color:  rgba(86, 215, 215, .8);
	cursor: pointer;
}

section#work ul.projects li article:before {
	content: '';
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}

section#work ul.projects li p.overlay {
	color: transparent;
	display: inline-block;
	font-size: 150%;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: .75;
	margin: 0 auto;
	text-transform: uppercase;
		-webkit-transition: all 300ms ease-in;
		-moz-transition: all 300ms ease-in;
		-o-transition: all 300ms ease-in;
	transition: all 300ms ease-in;
	vertical-align: middle;
	width: auto;
}

section#work ul.projects li span.overlay-symbol {
	font-size: 300%;
	font-weight: 300;
}

section#work ul.projects li:hover p.overlay {
	color: white;
}

section#work .project-info {
	margin-top: 1.5rem;
	text-align: center;
	width: 100%;
}

section#work .project-info li {
	color: #B3ADAA;
	display: block;
	float: none;
}

section#work .project-info li.subtitle {
	font-style: italic;
	font-size: 110%;
	line-height: 2;
}

section#work .project-info li h2 {
	text-transform: none;
}

section#viewall {
	color: white;
	margin: 0 auto;
	text-align: center;
}

section#viewall a.grid-icon {
	background: url('/assets/images/grid.svg') no-repeat center 4em;
	background-color: #FF6F59;
	background-size: 50px 50px;
	color: white;
	display: block;
	font-size: 150%;
	font-weight: 700;
	height: 55px;
	letter-spacing: 1px;
	line-height: 5;
	margin: 0 auto;
	padding: 5em 0 6.5em 0;
	text-align: center;
	text-transform: uppercase;
	width: 100%;
}

section#viewall a.grid-icon:hover {
	background-color: #A0643A;
	color: white;
}




/* EVERYTHING */

section#everything.container {
	margin-bottom: 2em;
	width: 90%;
}

section#everything ul {
	clear: both;
	margin: 0 auto;
	width: 100%;
}

section#everything ul li {
	padding-bottom: 5%;
	width: 30%;
}

section#everything .grid-sizer {
	width: 30%;
}

section#everything .gutter-sizer {
	width: 5%;
}

.project-image {
	position: relative;
}

.project-image img {
	display: block;
}

section#everything ul li article {
	background-color: transparent;
	clear: both;
	color: transparent;
	height: 100%;
		-webkit-transition: all 300ms ease-in;
		-moz-transition: all 300ms ease-in;
		-o-transition: all 300ms ease-in;
	transition: all 300ms ease-in;
	position: absolute;
	text-align: center;
	top: 0; left: 0; bottom: 0; right: 0;
	width: 100%;
	z-index: 2;
}

section#everything ul li article a {
	display: block;
	height: 100%;
	width: 100%;
}

section#everything ul li:hover article {
	background-color:  rgba(86, 215, 215, .8);
	cursor: pointer;
}

section#everything ul li a:hover {
	background-color: transparent;
}

section#everything ul li article:before {
	content: '';
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}

section#everything ul p.overlay {
	color: transparent;
	display: inline-block;
	font-size: 150%;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: .75;
	margin: 0 auto;
	text-transform: uppercase;
		-webkit-transition: all 300ms ease-in;
		-moz-transition: all 300ms ease-in;
		-o-transition: all 300ms ease-in;
	transition: all 300ms ease-in;
	vertical-align: middle;
	width: auto;
}

section#everything ul span.overlay-symbol {
	font-size: 300%;
	font-weight: 300;
}

section#everything li:hover p.overlay {
	color: white;
}




/* PORTFOLIO */

/* Portfolio Page */
	
section#work ul#portfolio > li {
	display: block;
	margin: 0 auto;
}

section#work ul#portfolio li img {
	display: block;
	margin: 0 auto;
}

section#work ul#portfolio li.portfolio-image {
	margin: 0 auto;
	padding-bottom: 5em;
	width: 100%;
}

section#work ul#portfolio li.portfolio-image.tall-left {
	float: left;
	width: 48%;
}

section#work ul#portfolio li.portfolio-image.tall-right {
	float: right;
	width: 48%;
}

section#work ul#portfolio .project-info a {
	float: left;
	letter-spacing: 1px;
	padding-top: 1em;
	font-weight: 700;
	text-transform: uppercase;
}

/* Visual Essay */

section#work ul#essay li {
	display: block;
	margin: 0 auto;
}

section#work ul#essay li.small {
	display: inline-block;
	float: left;
	margin: 0 4% 4% 0;
	max-width: 614px;
	padding: 0;
	position: relative;
	width: 48%;
}

section#work ul#essay li.small + li.small {
	margin: 0 0 4% 0;
}

section#work ul#essay li img {
	display: block;
	margin: 0 auto;
}

section#work li.headline {
	padding-top: 5rem;
	text-align: center;
}

section#work li.headline h2 {
	font-size: 190%;
}

section#work li.headline span.subtitle {
	display: block;
	font-style: italic;
	line-height: 2;
}

section#work li.essay-text {
	cursor: auto;
	font-size: 130%;
	line-height: 1.6;
	margin: 0 auto;
	padding: 2rem 0 4rem 0;
	width: 80%;
}

section#work li.essay-text p {
	padding-bottom: 1rem;
}

section#work li.essay-text span.roles {
	clear: both;
	display: block;
	font-size: 90%;
	font-style: italic;
	line-height: 1.5;
	padding: 1rem 0;
}

section#work li.essay-text span.roles h4 {
	display: inline-block;
	font-style: normal;
}

section#work li.essay-text ul#links {
	padding-bottom: 1em;
}

section#work li.essay-text ul#links li {
	display: block;
	font-size: 90%;
	line-height: 2;
}

section#work li.essay-text ul#links li.heading {
	display: inline-block;
	line-height: 1;
}

section#work li.essay-image {
	margin: 0 auto;
	margin-bottom: 5rem !important;
	width: 100%;
}

section#work li.essay-image p {
	clear: both;
	font-size: 110%;
	font-style: italic;
	line-height: 1.4;
	margin: 0 auto;
	text-align: center;
	padding-top: 2em;
	width: 80%;
}

section#work .essay-video {
	height: auto;
	max-width: 1280px;
	overflow: hidden;
	width: 100%;
}

/* Animation */

ul#grid {
	clear: both;
	margin: 0 auto;
	padding-bottom: 5em;
	width: 100%;
}

ul#grid > li {
	padding-bottom: 2em;
	width: 47%;
}

ul#grid .grid-sizer {
	width: 47%;
}

ul#grid .gutter-sizer {
	width: 6%;
}

/* Shop */

p#gumroad {	
	text-align: center;
}

a.gumroad-button {
	display: block;
}



/* ABOUT */

section#about {
	color: #8C8885;
	font-size: 120%;
	margin: 0 auto;
	width: 100%;
}

section#about #about-upper {
	background-color: #FAFAFA;
	padding: 5rem 0;
}

section#about .grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 0 10%;
	overflow: hidden;
}

section#about #about-upper .grid {
	align-items: center;
}

section#about #bio {
	line-height: 1.8;
	margin: 0 auto;
}

section#about #bio p {
	padding-bottom: 1em;
}

section#about #bio p:last-child {
	padding-bottom: 0;
}

section#about .portrait {
	margin: 0 auto;
}

section#about #about-lower {
	padding: 5rem 0;
}

section#about #about-lower ul {
	padding-bottom: 2rem;
}

section#about ul li {
	display: block;
	line-height: 1.5;
	padding-bottom: 2rem;
}

section#about ul li span {
	font-size: 90%;
	font-style: italic;
}

section#about ul#articles li {
	display: inline;
	font-size: 90%;
	line-height: 2;
	padding: 0;
}

section#about ul#articles li a {
	color: #B3ADAA;
}

section#about ul#articles li.article:not(:last-child):after {
	content: '•';
	padding: 0 .4em;
}

section#about ul li.heading {
	display: block;
	font-size: 100%;
	padding: 0;
}

li.heading h4 {
	color: #8C8885;
}

section#about #about-lower img {
	display: block;
	width: 60%;
}




/* READING */

section#reading {
	color: #8C8885;
	width: 100%;
}

section#reading #description {
	background-color: #FAFAFA;
	cursor: auto;
	font-size: 130%;
	line-height: 1.6;
	margin: 0 auto;
	padding: 5rem 0;
}

section#reading #lists {
	padding: 5rem 0 3rem 0;
	width: 80%;
}

section#reading #description p {
	padding-bottom: 1em;
}

section#reading #description em {
	font-size: 80%;
}

section#reading ul.books {
	font-size: 130%;
	padding-bottom: 2rem;
}

section#reading ul.books li {
	line-height: 1.6;
	margin-bottom: 1rem;
	width: auto;
}

section#reading li span.author {
	font-size: 80%;
}

section#reading li span.highlight {
	background-color: #FFF89F;
	color: #999491;
}

section#reading #divider {
	border-bottom: 1.5px solid #B3ADAA;
	display: block;
	height: 1.5px;
	margin-bottom: 3rem;
	opacity: .25;
	width: 35%;
}




/* ERROR PAGE */

section#error {
	background-color: #FF684A;
	display: block;
    margin: 0 auto;
	text-align: center;
}

section#error a {
	color: white;
}

section#error h2 {
	color: white;
	font-size: 150%;
	font-weight: 700 !important;
	letter-spacing: 1px;
	line-height: 1.5;
	padding: 8em 0;
}

section#error span.symbol {
	font-size: 300%;
}



/* FOOTER */

footer p {
	color: white;
	text-align: center;
	font-size: 120%;
	margin-top: 4em;
}



/* MEDIA QUERIES */

/* Medium Desktop Browser */
@media only screen 
and (max-width : 1200px) {
	
	header h1 {
		font-size: 2.2vw;
		text-align: center;
	}
	
	section#about #about-upper .grid {
		grid-gap: 0 6%;
	}
	
}

/* Landscape iPad */
@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) 
and (orientation : landscape) {

	
	section#viewall a.grid-icon {
		background-position: center 3em;
		padding: 4em 0 5.5em 0;
	}
	
	section#about #about-upper .grid {
		grid-template-columns: 1fr;
		grid-gap: 0 0;
	}
	
	section#about #about-upper .portrait {
		margin-top: 3rem;
		width: 60%;
	}
	
	section#about ul#articles {
		display: none;
	}
	
}

/* Portrait iPad */

@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) 
and (orientation : portrait) {

/*	header h1 {
		float: none;
		font-size: 2.5vw;
		margin: 0 auto;
		margin-top: 2em;
		text-align: left;
		width: 100%;
	}
	
	a#logo {
		background-size: 150px 150px;
		float: none;
		height: 150px;
		margin: 0 auto;
		width: 150px;
	}
	
	section#viewall a.grid-icon {
		background-position: center 3em;
		padding: 4em 0 5.5em 0;
	}
	
	section#about #about-upper .grid {
		grid-template-columns: 1fr;
		grid-gap: 0 0;
	}
	
	section#about #about-upper .portrait {
		margin-top: 3rem;
		width: 60%;
	}
	
	section#about ul#articles {
		display: none;
	}*/
	
}

/* Small Desktop Browser */

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

	a#logo {
		background-size: 150px 150px;
		float: none;
		height: 150px;
		margin: 0 auto;
		width: 150px;
	}
	
	nav {
		float: none;
		font-size: 3vw;
		height: auto;
		margin: 0 auto;
		margin-top: 3.25rem;
		text-align: center;
	}
	
	nav ul li {
		display: inline-block;
		float: none;
		text-align: center;
		padding: 0 1rem;
	}
	
	header h1 {
		float: none;
		font-size: 4vw;
		margin: 0 auto;
		margin-top: 2em;
		width: 100%;
	}
	
	section#work ul.projects {
		margin: 0 auto;
		margin-bottom: -3rem;
	}
	
	section#work ul.projects > li,
	section#work ul.projects li.small,
	section#work ul#portfolio li.portfolio-image.tall-left,
	section#work ul#portfolio li.portfolio-image.tall-right {
		clear: both;
		display: block;
		float: none;
		margin: 0 auto;
		max-width: 100%;
		width: 90%;
	}
	
	section#work ul.projects > li,
	section#work ul.projects li.small {
		margin-bottom: 3rem;
	}
	
	section#work .project-info li h2 {
		font-size: 4vw;
		text-transform: uppercase;
	}
	
	section#work .project-info li.subtitle {
		font-size: 2.5vw;
	}
	
	section#viewall a.grid-icon {
		background-position: center 3em;
		background-size: 40px 40px;
		font-size: 130%;
		padding: 3.75em 0 5.5em 0;
	}
	
	section.animation ul#grid {
		height: auto !important;
		margin-bottom: -4rem;
	}
	
	section.animation ul#grid > li {
		margin: 0 auto;
		margin-bottom: 2rem;
		max-width: 100%;
		padding-bottom: 2rem;
		position: relative !important;
		top: 0 !important;
		width: 90%;
	}
	
	section.animation ul#grid .grid-sizer {
		width: 90%;
	}
	
	section.animation ul#grid .gutter-sizer {
		display: none !important;
		width: 0;
	}
	
	section#about .grid {
		grid-template-columns: 1fr;
		grid-gap: 0 0;
	}
	
	section#about #about-upper .portrait {
		margin-top: 3rem;
		width: 60%;
	}
	
	section#about #about-lower .grid {
		display: block;
	}
	
	section#about ul#interviews {
		padding-bottom: 0;
	}
	
	section#about ul#articles {
		display: none;
	}
	
	section#about #about-lower .portrait img {
		display: none;
	}

}

/* Landscape iPhone SE and Down */

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

	header {
		padding: 2em 0 3em 0;
	}
	
	a#logo {
		background-size: 120px 120px;
		float: none;
		height: 120px;
		margin: 0 auto;
		width: 120px;
	}
	
}

/* Portrait iPhone 2G-4S */

@media only screen 
and (min-width : 320px) 
and (max-width : 480px) {

	nav {
		font-size: 4vw;
	}
	
	header h1 {
		background-color: #FAFAFA;
		padding: 2rem;
		margin-top: 2rem;
		text-align: left;
	}
	
	section#work ul.projects {
		margin-bottom: -2rem;
	}
	
	section#work ul.projects > li,
	section#work ul.projects li.small {
		margin-bottom: 2rem;
	}
	
	section#work .project-info {
		margin-top: 1rem;
	}
	
	section#work .project-info li h2 {
		font-size: 4.5vw;
		text-transform: uppercase;
	}
	
	section#work .project-info li.subtitle {
		font-size: 3vw;
	}
	
	ul#icons li {
		padding: 0 1em;
	}
	
	section#viewall a.grid-icon {
		background-position: center 3em;
		background-size: 40px 40px;
		font-size: 130%;
		padding: 3.75em 0 5.5em 0;
	}
	
	section#work li.headline h2 {
		font-size: 150%;
	}
	
	section#work li.essay-text {
		font-size: 100%;
	}
	
	section#work li.essay-image p {
		font-size: 100%;
	}
	
	section#about .portrait {
		width: 90%;
	}

}