

html, body, .container2, .header2 {
	height: 100%;
}

/* Header */
.header2 {
	position: relative;
	margin: 0px auto;
	min-height: 560px;
	width: 100%;
	z-index:1
}

.bg-img, .bg-img2, .bg-img3, .bg-img4, .bg-img5, .bg-img6, .bg-img7, .bg-img8, .bg-img9   {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	
}

.bg-img img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	min-width: 100%;
	min-height: 100%;
	background-image:url(../img/portfolio/avilas/img_header_avilas.jpg);
	background-position:top center;
	background-repeat:no-repeat;
	background-color:#d6d6d6
	
}

.bg-img2 img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	min-width: 100%;
	min-height: 100%;
	background-image:url(../img/portfolio/pr/img_header_pr.jpg);
	background-position:top center;
	background-repeat:no-repeat;
	background-color:#d6d6d6
	
}

.bg-img3 img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	min-width: 100%;
	min-height: 100%;
	background-image:url(../img/portfolio/experiencia/01.jpg);
	background-position:top center;
		background-repeat:no-repeat;
	background-color:#d6d6d6
	
}

.bg-img4 img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	min-width: 100%;
	min-height: 100%;
	background-image:url(../img/portfolio/quintans/img_header_quintans.jpg);
	background-position:top center;
		background-repeat:no-repeat;
	background-color:#d6d6d6
	
}

.bg-img5 img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	min-width: 100%;
	min-height: 100%;
	background-image:url(../img/portfolio/noya/img_header_noya.jpg);
	background-position:top center;
		background-repeat:no-repeat;
	background-color:#d6d6d6
	
}

.bg-img6 img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	min-width: 100%;
	min-height: 100%;
	background-image:url(../img/portfolio/ash/img_header_ash.jpg);
	background-position:top center;
		background-repeat:no-repeat;
	background-color:#d6d6d6
	
}

.bg-img7 img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	min-width: 100%;
	min-height: 100%;
	background-image:url(../img/portfolio/amplitone/img_header_amplitone.jpg);
	background-position:top center;
		background-repeat:no-repeat;
	background-color:#d6d6d6
	
}

.bg-img8 img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	min-width: 100%;
	min-height: 100%;
	background-image:url(../img/portfolio/dance/img_header_dance.jpg);
	background-position:top center;
		background-repeat:no-repeat;
	background-color:#d6d6d6
	
}

.bg-img9 img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	min-width: 100%;
	min-height: 100%;
	background-image:url(../img/portfolio/torres/img_header_torres.jpg);
	background-position:top center;
		background-repeat:no-repeat;
	background-color:#d6d6d6
	
}

.title {
	z-index: 1000;
	margin: 0 auto;
	padding: 0 1.25em;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 60%;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	
}

.title h1 {
	padding: 0 0 0.2em;
	color: #EEE;
	font-weight: 800;
	font-size: 3.25em;
	margin: 0 auto;
text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 5px 1px rgba(0,0,0,.25),
               0 5px 5px rgba(0,0,0,.2),
               0 10px 10px rgba(0,0,0,.15);
}




.title p {
	color: #fff;
	padding: 0 0 0.6em;
	font-weight: 300;
	font-size: 0.85em;
	margin: 0 auto;
}

.title h1,
.title p.subline {
	line-height: 1;
}

.title p.subline {
	font-size: 1.75em;
}



/* Conent */
.content {
	margin: 0 auto;
	padding: 0 0 3em;
	background-color:#eee
}

.content > div:not(.title) {
	margin: -80px auto 0;
	max-width: 1182px;
	padding: 0 1.25em;
}

.content > div:not(.title) p {
	margin: 0 auto 1.5em auto;
}

.content > div:not(.title) p:first-child {
	font-size: 1.35em;
}

.content h3 {
	margin: 0;
	font-size: 1.4em;
}

.content blockquote {
	padding: 0.25em;
	font-style: italic;
	font-size: 1.65em;
	font-family: 'Lora', serif;
	line-height: 1.4;
}

.content blockquote::before {
	content: '\201C';
}

.content blockquote::after {
	content: '\201D';
}

/***** Individual effects *****/

/* -------------------------- */
/* Jam 3 */
/* -------------------------- */
.intro-effect-jam3:not(.notrans) .bg-img
.intro-effect-jam3:not(.notrans) .bg-img2 
.intro-effect-jam3:not(.notrans) .bg-img3
.intro-effect-jam3:not(.notrans) .bg-img4 
.intro-effect-jam3:not(.notrans) .bg-img5
.intro-effect-jam3:not(.notrans) .bg-img6
.intro-effect-jam3:not(.notrans) .bg-img7
.intro-effect-jam3:not(.notrans) .bg-img8
.intro-effect-jam3:not(.notrans) .bg-img9 {
	-webkit-transition-property: top, left, right, bottom;
	transition-property: top, left, right, bottom;
}




.intro-effect-jam3:not(.notrans) .header2 h1,
.intro-effect-jam3:not(.notrans) .codrops-top a {
	-webkit-transition-property: color;
	transition-property: color;
}

.intro-effect-jam3:not(.notrans) .codrops-demos a {
	-webkit-transition-property: border-color, color;
	transition-property: border-color, color;
}

.intro-effect-jam3:not(.notrans) .header2 p {
	-webkit-transition-property: color, opacity, -webkit-transform;
	transition-property: color, opacity, transform;
}

.intro-effect-jam3:not(.notrans) .content > div {
	-webkit-transition-property: opacity, -webkit-transform;
	transition-property: opacity, transform;
}

.intro-effect-jam3:not(.notrans) .bg-img,
.intro-effect-jam3:not(.notrans) .bg-img2,
.intro-effect-jam3:not(.notrans) .bg-img3,
.intro-effect-jam3:not(.notrans) .bg-img4,
.intro-effect-jam3:not(.notrans) .bg-img5,
.intro-effect-jam3:not(.notrans) .bg-img6,
.intro-effect-jam3:not(.notrans) .bg-img7,
.intro-effect-jam3:not(.notrans) .bg-img8,
.intro-effect-jam3:not(.notrans) .bg-img9,
.intro-effect-jam3:not(.notrans) .header2 h1,
.intro-effect-jam3:not(.notrans) .codrops-top a,
.intro-effect-jam3:not(.notrans) .codrops-demos a,
.intro-effect-jam3:not(.notrans) .content > div {
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}


.intro-effect-jam3:not(.notrans) .header2 p,
.intro-effect-jam3:not(.notrans) .header2 p.subline,
.intro-effect-jam3:not(.notrans) .content > div {
	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
}

.intro-effect-jam3.modify:not(.notrans) .header2 p,
.intro-effect-jam3.modify:not(.notrans) .header2 p.subline,
.intro-effect-jam3.modify:not(.notrans) .content > div {
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
}

.intro-effect-jam3 .codrops-demos a {
	color: #fff;
}

.intro-effect-jam3 .codrops-demos a.current-demo {
	border-color: #fff;
}

.intro-effect-jam3.modify .codrops-demos a {
	color: #c03b5d;
}

.intro-effect-jam3.modify .codrops-demos a.current-demo {
	border-color: #c03b5d;
}


.intro-effect-jam3.container2 {
	padding: 0px;
}

.intro-effect-jam3 .bg-img .bg-img2 .bg-img3 .bg-img4 .bg-img5 .bg-img6 .bg-img7 .bg-img8 .bg-img9{
	top: -45px;
	right: -30px;
	bottom: -45px;
	left: -30px;
	background: #eee;
}


.intro-effect-jam3.modify .bg-img {
	top: 0;
	right: 0;
	bottom: 76%;
	left: 0;
}

.intro-effect-jam3.modify .bg-img2 {
	top: 0;
	right: 0;
	bottom: 76%;
	left: 0;
}

.intro-effect-jam3.modify .bg-img3 {
	top: 0;
	right: 0;
	bottom: 76%;
	left: 0;
}

.intro-effect-jam3.modify .bg-img4 {
	top: 0;
	right: 0;
	bottom: 76%;
	left: 0;
}

.intro-effect-jam3.modify .bg-img5 {
	top: 0;
	right: 0;
	bottom: 76%;
	left: 0;
}

.intro-effect-jam3.modify .bg-img6 {
	top: 0;
	right: 0;
	bottom: 76%;
	left: 0;
}

.intro-effect-jam3.modify .bg-img7 {
	top: 0;
	right: 0;
	bottom: 76%;
	left: 0;
}

.intro-effect-jam3.modify .bg-img8 {
	top: 0;
	right: 0;
	bottom: 76%;
	left: 0;
}

.intro-effect-jam3.modify .bg-img9 {
	top: 0;
	right: 0;
	bottom: 76%;
	left: 0;
}

.intro-effect-jam3.modify .header2 h1 {
	color: #514753;
}

.intro-effect-jam3 .header2 p {
	color: #514753;
	opacity: 0;
	-webkit-transform: translateY(150px);
	transform: translateY(150px);
}

.intro-effect-jam3.modify .header2 p {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

.intro-effect-jam3 .content {
	padding: 0 5em 3em;
}

.intro-effect-jam3 .header2,
.intro-effect-jam3 .content {

}

.intro-effect-jam3 .content > div {
	opacity: 0.5;
	-webkit-transform: translateY(150px);
	transform: translateY(150px);
}

.intro-effect-jam3.modify .content > div {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

.intro-effect-jam3.modify .codrops-top a {
	color: #514753;
}

/* Delays */
.intro-effect-jam3.modify:not(.notrans) .header2 p:nth-last-child(2) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

.intro-effect-jam3.modify:not(.notrans) .header2 p:last-child {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

.intro-effect-jam3.modify:not(.notrans) .content > div {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}



/*

@media screen and (max-width: 27em) {
	.intro-effect-jam3 .content {
		padding: 0 2em 5em;
	}

	.intro-effect-grid .grid li h2 {
		display: none;
	}

	.intro-effect-push .header2 .title {
		top: 60px;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.title, .content {
		font-size: 50%;
	}

	button.trigger::before {
		display: none;
	}
}
*/



