/*
Theme Name: Bravo BGL!
Theme URI: 
Author: Transistor design
Author URI: 
Description: Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html  
*/

@import url('assets/css/resets.css');
@import url('assets/css/base.css');
@import url('assets/css/fonts.css');

/*******************************************************************************************************************************************  Generals  */





body {
	color: #000;
	margin: 0;
	padding: 0;
	letter-spacing: 0.05em;
}

body > header,
body > main,
body footer [role="contentinfo"] {
	background: #FFF;
	padding-left: 8.3333%;
	padding-right: 8.3333%;
}

body, h1, h2, h3, h4, h5, h6 {
	font: 400 16px/1.5em 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;	
}

body > header,
footer [role="contentinfo"] {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

body > footer {
	color: #999;
	text-align: center;
	padding:0;
}


body > footer a {
	color: #999;
}

a {
	color: #000;
	text-decoration: none;
	font-weight: 400;
}

img, video {
	width: 100%
}




nav .grid {
	margin:0;
	padding: 0;
	overflow: hidden;
}

nav .grid li {
	display: block;
	margin-top: 0;
	text-align: center;
}

nav a, nav span {
	display: block;
}

[role="navigation"] a {
	color: #999;
	color: rgba(0,0,0, 0.5);
	font-weight: 400;
	display: inline-block;
	padding-bottom: 0.15em;
}
	[role="navigation"] a:hover {
		color: #000
	}
	
[role="navigation"] .active > *,
[role="navigation"] .current-menu-item > *,
[role="navigation"] .current_page_parent > * {
	color: #000;
	border-bottom: 1px solid #000;
}

nav .grid .disable {
	color: #999;
	color: rgba(0,0,0, 0.5);
}

footer nav li:hover a {
	margin-top: -0.25em;
}








/*
	
	Styling
	
*/

.big.title {
	font-size: 3rem;
	line-height: 1.25em;
	font-weight: 500;
	margin-top: 2rem;
	text-align: center;
}

.caption {
	margin: 0;
	color: #999;	
	
}

.caption:before {
	content: '– ';
	display: inline-block;
	margin-right: 0.25em;
}









section {
	overflow: hidden;
}

.home section:first-child {
	margin-bottom: 1rem;
}

.site-header .video,
.site-header .image {
	position: relative;
	overflow: hidden;
	height: 75vh;
	max-height: 75vh;
	min-height: 300px;
	background: #000;
}

.site-header .image span {
	display: block;
	background-size: cover;
	background-position: center top;
}

.site-header .video video,
.site-header .image span {
	opacity: 0.2;
	display: block;
	min-width: 1255px;
}

.site-header .video video, 
.site-header .video canvas,
.site-header .image span {
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.site-header .video video,
.site-header .image span {
  width: 100%;
  height: auto;
  /* height: 100%; */
  position: absolute;
}


.site-header .parallax h1 {
	color: #fff;
	font-weight: 500;
	font-size: 2.8rem;
	line-height: 2.7em;
	margin: 0;
	padding: 5% 9.667%;
	
	position: absolute;
	top:0;left:0;bottom:0;right:0;
}

	.site-header .parallax.hover h1 {
		opacity: 0;
	}
	.site-header .parallax:hover video,
	.site-header .parallax:hover span {
		opacity: 1;
	}


.grid {
	overflow: hidden;
}

.grid > *,
.column {
	float: left;
	width: 30%;
	margin-top: 5%;
	margin-right: 5%;
	position: relative;
}
	.grid > *:nth-child(3n) {
		margin-right: 0;
	}
	.column.right {
		float: right;
		margin-top: 0.5rem;
		margin-right: 0;
		padding: 1.25em 1.5em;
		line-height: 1em;
	}
	
.grid.projects > * .title {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	padding: 1.25em 1.5em;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.25em;
}

.grid.full > * {
	width: 100%;
	float: none;
}


.grid.projects > * a {
	display: block;
	color: #fff;
	background: #000;
}

.grid.projects > * a:hover img {
	opacity: .4
}




.huge-post {
	position: relative;
}
.huge-post .post-link {
	position: absolute;
	bottom:0.5rem;
	right:0;
/* 	color: #FFF; */
}




.post-type-archive-project [role="main"] .grid > * {
	margin-top:0;
	margin-bottom: 5%;
}

.year {
	position: relative;
	overflow: visible;
	margin-bottom: 5%
}
	.year:last-of-type {
		margin-bottom: 0
	}

.year > .title {
	font-size: 1rem;
	line-height: 1.25em;
	position: absolute;
	top: 0;
	left: -10%;
	width: 10%;
	text-align: center;
}

	.year > .title.is_stuck {
		left: 0;
	}
	
	.year > .title.is_stuck.bottom {
		left: -10%;
	}


.post-link {
	font-weight: 500;
	line-height: 2.5em;
}


.project header,
.project figure {
	width: 100%;
	overflow: hidden;
	margin-bottom: 5%;
}

.project figure.half {
	width: 47.5%;
	float: left;
}
	.project figure.half:nth-child(2n) {
		float: right;
	}

.project hgroup * {
	font-size: 1rem;
	line-height: 1.5em;
	font-weight: 400;
}
.project header h1 {
	font-style: italic;
	margin: 0;
}
.project header img {
	margin-bottom: 1rem;
}


.bgl,
.to-top {
	position: fixed;
	top: 0;
	left:0;
	z-index: 100;
	width: 8.3333%;
	margin-top: 4rem;
	text-align: center;
}
	.bgl a {
		color: #000
	}

.bgl.right {
	left:auto;
	right: 0
}

.to-top {
	top: auto;
	bottom:0;
	margin-bottom: 4rem;
	opacity: 0;
}
.to-top.right {
	left:auto;
	right: 0
}
.docked .to-top {
	opacity: 1
}







/*
	
	Journal
	
*/


.journal article + article {
	margin-top: 6rem;
}

.journal article {
	margin-top: 2rem;
}

.journal article.journal-article a {
	display: block;
	text-align: center
}
.journal article.journal-article .title {
	display: inline;
}

article.journal-article date {
	display: block;
	margin-top: 1em;
	color: #999;
}

article.journal-article a h1 {
	border-bottom: 1px solid rgba(0,0,0,0.2)
}

article.journal-article a:hover h1 {
	border-color: #000;
}



article.journal-article > a,
article.journal-article .article-content a {
	cursor: e-resize
}
	article.journal-article > a[target="_blank"],
	article.journal-article .article-content a[target="_blank"] {
		cursor: ne-resize;
	}




/*
	
	Article
	
*/

.single-post article h1,
.single-post article date {
	display: block;
	text-align: center;
}

.article-content {
	font-size: 1.25em;
	line-height: 1.6em;
}
	.single .article-content {
		padding: 5% 0;
	}

.single-post article h1,
.article-content > * {
	padding: 0 10%;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
	font-size: 1em;
	line-height: 1.5em;
	font-weight: 500;
	margin: 5% 0 1.5em 0;
}

.article-content a {
	display: inline-block;
	line-height: 1em;
	border-bottom: 1px solid rgba(0,0,0,0.2)
}

.article-content a:hover {
	border-color: #000;
}


	.article-content > img {
		padding: 0;
	}
	
.article-content * + * {
	margin-top: 1.5em;
}

.article-content * + img,
.article-content * + figure {
	margin-top: 4em;
}

.article-content small {
	color: #999;
	font-size: 0.75em;
}






/*
	
	Module : Simple content
	
*/


.simple-content:first-child .article-content {
	margin-top: 0;
}








.preload {
	position: fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index: 666;
	
	background: #000;
	background: rgba(0, 0, 0, 0.95);
	color: #FFF;	
	cursor: wait;
}

.preload > * {
	position: absolute;
	bottom: 10%;
	left: 0;
	right: 0;
	text-align: center;


	font-weight: 400;
	font-size: 3rem;
	line-height: 1.25em;
}






.flip {
	-moz-transform: scaleX(-1);    /* Gecko */
	-o-transform: scaleX(-1);      /* Operah */
	-webkit-transform: scaleX(-1); /* webkit */
	transform: scaleX(-1);         /* standard */
	filter: FlipH;                 /* IE 6/7/8 */
}

nav a, .grid article *, a, a * {
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
}

body, .flip {
	-webkit-transition: transform 500ms ease-out;
	-moz-transition: transform 500ms ease-out;
	-ms-transition: transform 500ms ease-out;
	-o-transition: transform 500ms ease-out;
	transition: transform 500ms ease-out;
}

.parallax * {
	-webkit-transition: opacity 300ms ease-out;
	-moz-transition: opacity 300ms ease-out;
	-ms-transition: opacity 300ms ease-out;
	-o-transition: opacity 300ms ease-out;
	transition: opacity 300ms ease-out;
}





/*
	
	Venise Beach
	
*/


.venise {
	position: fixed;
	bottom: -100%;
	left:0;
	right:0;
	height: 100%;
	z-index: 4186942050
}

.venise > * {
	display: block;
	position: absolute;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	background: url('http://bgl.hugovachon.com/wp-content/uploads/2014/09/venise-under-water-3.gif');
	background-size: cover;	
	opacity: 0.98
}

.venise.sink-or-swim {
	animation: swim 10s ease-in-out 2 alternate;
	-webkit-animation: swim 10s ease-in-out 2 alternate;
}

.venise.sink-or-swim span {
	animation: bounce 1s ease-in-out 22 alternate;
	-webkit-animation: bounce 1s ease-in-out 22 alternate;
}

@keyframes swim {
	0% 			{bottom: -100%}
	100% 		{bottom: 0}
}
@-webkit-keyframes swim {
	0% 			{bottom: -100%}
	100% 		{bottom: 0}
}

@keyframes bounce {
	0% 			{margin-top: 50px}
	100% 		{margin-top: -50px}
}
@-webkit-keyframes bounce {
	0% 			{margin-top: 50px}
	100% 		{margin-top: -50px}
}


/*
	
	Torontoronto
	
*/



.wow {
	position: fixed;
	top: 300%;
	bottom: 0;
	left:0;
	right:0;
	height: 100%;
	z-index: 4186942050;
	background: #000;
	text-transform: uppercase;
	color: #fff;
	opacity: 0;
	-webkit-transition: all 1s linear;
	-moz-transition: all 1s linear;
	-ms-transition: all 1s linear;
	-o-transition: all 1s linear;
	transition: all 1s linear;
}
	.wow.show-me {
		top: 0;
		opacity: 1;
	}

.wow canvas {
	position: absolute;
	top: 0;
	left: 0;
	background: transparent;
}
.wow p {	
	color: #000;
	font-size: 15em;
	font-weight: bold;
	line-height: 1.15em;
	position: absolute;
	top: 50%;
	margin-top: -.6em;
	left: 0;
	right: 0;
	z-index: 3;
	text-transform: none;
}

.wow span {
	position: relative;
	z-index: 2;
	/* display: none; */
}

/*
.wow.show-me {
        
	-webkit-animation: colorRotate 8s linear 0s infinite;
	-moz-animation: colorRotate 8s linear 0s infinite;
	-o-animation: colorRotate 8s linear 0s infinite;
	animation: colorRotate 8s linear 0s infinite;
    
}
*/

.wow.show-me span {        
	-webkit-animation: textColorRotate 8s linear 500ms infinite;
	-moz-animation: textColorRotate 8s linear 500ms infinite;
	-o-animation: textColorRotate 8s linear 500ms infinite;
	animation: textColorRotate 8s linear 500ms infinite;
}


@-webkit-keyframes colorRotate {
    from {
        background-color: rgb(255, 0, 0);
    }
    16.6% {
        background-color: rgb(255, 0, 255);
    }
    33.3% {
        background-color: rgb(0, 0, 255);
    }
    50% {
        background-color: rgb(0, 255, 255);
    }
    66.6% {
        background-color: rgb(0, 255, 0);
    }
    83.3% {
        background-color: rgb(255, 255, 0);
    }
    to {
        background-color: rgb(255, 0, 0);
    }
}

@-moz-keyframes colorRotate {
    from {
        background-color: rgb(255, 0, 0);
    }
    16.6% {
        background-color: rgb(255, 0, 255);
    }
    33.3% {
        background-color: rgb(0, 0, 255);
    }
    50% {
        background-color: rgb(0, 255, 255);
    }
    66.6% {
        background-color: rgb(0, 255, 0);
    }
    83.3% {
        background-color: rgb(255, 255, 0);
    }
    to {
        background-color: rgb(255, 0, 0);
    }
}

@-o-keyframes colorRotate {
    from {
        background-color: rgb(255, 0, 0);
    }
    16.6% {
        background-color: rgb(255, 0, 255);
    }
    33.3% {
        background-color: rgb(0, 0, 255);
    }
    50% {
        background-color: rgb(0, 255, 255);
    }
    66.6% {
        background-color: rgb(0, 255, 0);
    }
    83.3% {
        background-color: rgb(255, 255, 0);
    }
    to {
        background-color: rgb(255, 0, 0);
    }
}

@keyframes colorRotate {
    from {
        background-color: rgb(255, 0, 0);
    }
    16.6% {
        background-color: rgb(255, 0, 255);
    }
    33.3% {
        background-color: rgb(0, 0, 255);
    }
    50% {
        background-color: rgb(0, 255, 255);
    }
    66.6% {
        background-color: rgb(0, 255, 0);
    }
    83.3% {
        background-color: rgb(255, 255, 0);
    }
    to {
        background-color: rgb(255, 0, 0);
    }
}


@-webkit-keyframes textColorRotate {
    from {
        color: rgb(255, 0, 0);
    }
    16.6% {
        color: rgb(255, 0, 255);
    }
    33.3% {
        color: rgb(0, 0, 255);
    }
    50% {
        color: rgb(0, 255, 255);
    }
    66.6% {
        color: rgb(0, 255, 0);
    }
    83.3% {
        color: rgb(255, 255, 0);
    }
    to {
        color: rgb(255, 0, 0);
    }
}

@-moz-keyframes textColorRotate {
    from {
        color: rgb(255, 0, 0);
    }
    16.6% {
        color: rgb(255, 0, 255);
    }
    33.3% {
        color: rgb(0, 0, 255);
    }
    50% {
        color: rgb(0, 255, 255);
    }
    66.6% {
        color: rgb(0, 255, 0);
    }
    83.3% {
        color: rgb(255, 255, 0);
    }
    to {
        color: rgb(255, 0, 0);
    }
}

@-o-keyframes textColorRotate {
    from {
        color: rgb(255, 0, 0);
    }
    16.6% {
        color: rgb(255, 0, 255);
    }
    33.3% {
        color: rgb(0, 0, 255);
    }
    50% {
        color: rgb(0, 255, 255);
    }
    66.6% {
        color: rgb(0, 255, 0);
    }
    83.3% {
        color: rgb(255, 255, 0);
    }
    to {
        color: rgb(255, 0, 0);
    }
}

@keyframes textColorRotate {
    from {
        color: rgb(255, 0, 0);
    }
    16.6% {
        color: rgb(255, 0, 255);
    }
    33.3% {
        color: rgb(0, 0, 255);
    }
    50% {
        color: rgb(0, 255, 255);
    }
    66.6% {
        color: rgb(0, 255, 0);
    }
    83.3% {
        color: rgb(255, 255, 0);
    }
    to {
        color: rgb(255, 0, 0);
    }
}