/* 

Autor: Charles Bird 
Agency:  Family
Concept Diseño Meeting Sur - 2015 

*/


*,
*:before,
*:after  {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html,
body {
	height: 100%;
	background: #fff;
}

html {
	font-size: 16px;
}

@media ( min-width: 768px ) {

	html {
		font-size: 18px;
	}

}

@media ( min-width: 1200px ) {


	html {
		font-size: 20px;
	}

}


@media ( min-width: 1350px ) {
	html {
		font-size: 22px;
	}

}

body,
input,
select,
button {
	font-family: 'Open Sans', sans-serif;
	font-size: 22px;
	font-size: 1rem;
	line-height: 1.36;
	color: #86888b;
	letter-spacing: -0.035em;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4 {
	margin: 0;
	color: #2a2a2a;
}

h1,
.h1,
h2,
.h2 {
	
}

h1,
.h1 {
	font-weight: 700;
	text-transform: uppercase;
}

h2,
.h2 {
	font-weight: 300;
}

h1,
.h1,
h2,
.h2 {
	font-size: 44px;
	font-size: 2rem;
	letter-spacing: 0;
	line-height: 1;
}

@media ( min-width: 768px ) {
	h1,
	.h1 {	
		font-size: 72px;
		font-size: 3.273rem;
		line-height: 0.8334;
	}
}

	h1.scaled {
		font-size: 28px;
		line-height: 1;
	}

@media ( min-width: 480px ) {

	h1.scaled {
		font-size: 48px;
		font-size: 2.182rem;

		line-height: 1.042;
	}
	
}

@media ( min-width: 768px ) {
	h2,
	.h2 {
		font-weight: 300;
		font-size: 54px;
		font-size: 2.455rem;
		line-height: 1;
	}
	.h2 .mb-20{
		font-size: 49px!important;
	}
}

h3,
.h3,
h4,
.h4 {
	text-transform: uppercase;
	font-size: 22px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.09;
	letter-spacing: inherit;
}

h4,
.h4 {
	font-size: 14px;
}

@media ( min-width: 768px ) {
	h3,
	.h3 {
		font-size: 18px;
		font-size: 0.818rem;
	}
	
	h4,
	.h4	{
		font-size: 16px;
	}
}

p {
	margin: 0;
}

ul {
	margin: 0;
	list-style-type: square;
	padding: 0 0 0 20px;
}

nav ul {
	padding: 0;
	line-height: 1.8;
}


@media ( max-width: 767px ) {
	ul {
		padding-left: 0;
		list-style-position: inside;
	}

}

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

iframe {
	border: 0;
}

hr {
	border: 0;
	height: 1px;
	background: #dfe0e1;
}

a {
	color: inherit;
	text-decoration: none;
	-webkit-transition: color .2s;
	transition: color .2s;
}

a:focus,
a:active {
	outline: none;
}

time {
	font-size: 14px;
}

input {
	border-radius: 0;
}

input:focus {
	outline: none;
}


input.text {
	-webkit-appearance: none;
	font-size: 1rem;
	line-height: 1;
	border: 1px solid #e5e5e5;
	width: 220px;
	padding: 1.14rem .6rem;
}

select {
	border: 1px solid #e5e5e5;
}

.no-js label {
	display: none;
}

@media ( min-width: 768px ) {
	input.text,
	input.error + label.error	{
		width: 270px;
		width: 12.273em;
		font-size: 1.091rem;
		padding: 26px;
		padding: 1.14rem;
	}

}

input.text:focus {
	border-color: #dfe0e1;
}

.submit {
	color: #fff;
	background: #42A5F5;
	border: 0;
	-webkit-appearance: none;
	text-transform: uppercase;
	font-size: 12px;
}

@media ( min-width: 768px ) {
	.submit {
		font-size: 0.727rem;
	}

}

::-webkit-input-placeholder {
   color: #cecece;
}

::-moz-placeholder { 
   opacity: 1;
	color: #cecece;   
}

:-ms-input-placeholder {  
   color: #cecece;  
}

::placeholder {
	color: #cecece;
}

img {width: 100%; height: auto;}

p, a, h1, h2, h3, h4, h5 {font-family: 'Lato', sans-serif; }

.row {margin-left: 0; margin-right: 0;}

/* Diseño Menu */


.menu {position: relative; width: 100%; height: auto; max-height: 150px; background: #fff; top:0; left:0; padding: 0.4%;z-index: 4; position: fixed;}


.logotipo {width: 100%; max-width: 290px; float:left;z-index: 2; }

.menu .row {z-index: 2;}

nav {position: relative; width: 100%; text-align: right; padding-right: 20px;}

nav li { display: inline-block;  list-style: none; text-decoration: none;  padding: 0.5%; line-height: 2.5em; z-index: 2;}

nav li a {text-transform: uppercase; font-weight: 500; font-size: 1em; color:#000; text-align: right; cursor: pointer; letter-spacing: inherit; transform: scale(1); transition: all .2s;}

nav li a:hover {border: 2px solid #39b54a; border-radius: 5%; color: #39b54a; text-decoration: none;transform: scale(0.9); margin-left: 5%; padding: 4px;}

nav li a.active {margin-left: 5%; padding: 4px; color: #39b54a; border: 2px solid #39b54a; border-radius: 10%;}



.menu::after {content: ''; background:#fff;  transform: rotate(-5deg); z-index: -1; width: 100%; height: 200px; position: absolute;bottom: 0; transition: all .5s; opacity: 1; visibility: visible;}

.menu::after {
    content: '';
    transform: translateY(40px) skew(0deg, -3deg);
    z-index: -1;
    width: 100%;
    position: absolute;
    bottom: 0;
    margin: 0;
    padding: 0;
    padding-top: 0;
    left: 0;
    transition: all .5s;
    opacity: 1;
    visibility: visible;
    border: 40px solid #fff;

 }

.menu.skew:after { transform: skew(0deg, 0deg);opacity: 0; visibility: hidden;border: 20px solid #fff;}

.menu > .row {transform: scale(1); transition: all .2s; }

.menu.skew > .row {transform: scale(0.8);}





/* Diseño Contenido */


/* Secciones */

.contenido {padding: 0; margin: 0;}

section {width: 100%; height: 100vh; position: relative; margin: 0; }

section:first-child {margin-top: 100px; height: auto;}

section.inicio {

background-size: fixed;
background-repeat: no-repeat;

overflow: hidden;

}

section.efecto-imagen {

background-image: url('https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?fit=crop&fm=jpg&h=1000&ixjsv=2.0.0&ixlib=rb-0.3.5&q=80&w=17009I'), linear-gradient(45deg, red, green, blue) ;
background-blend-mode: hard-light;
background-position: center center;
background-size: cover;
max-height: 100vh;
transition: background-image 2s;

}

section.efecto-imagen:hover {

background-image: url('https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?fit=crop&fm=jpg&h=1000&ixjsv=2.0.0&ixlib=rb-0.3.5&q=80&w=17009I'), linear-gradient(180deg, red, green, blue);

}

section.multiplicar {

background-image: url('https://images.unsplash.com/photo-1432821596592-e2c18b78144f?ixlib=rb-0.3.5&q=80&fm=jpg&w=1080&fit=max&s=fc0104dcd202c87d8c82586d5d83ce0c');
background-color: #0fc;
background-position: center center;
background-size: cover;
background-blend-mode: multiply;
max-height: 100vh;
transition: background-color 2s;

}


section.multiplicar:hover {
background-color: #01013a;
}

section.screen {

background-image: url('https://images.unsplash.com/photo-1422479516648-9b1f0b6e8da8?ixlib=rb-0.3.5&q=80&fm=jpg&w=1080&fit=max&s=38df72f167bbb3be670b56b7a320076c');
background-color: #481a02;
background-position: center center;
background-size: cover;
background-blend-mode: screen;
max-height: 100vh;
transition: background-color 2s;


}



section.screen:hover {
background-color: #ce521b;
}


.titulares { font-family: 'Lato', sans-serif; 
font-weight: 500; 
text-transform:none; 
color: #fff; 
font-size: 1.5em;
letter-spacing: 0;
line-height: 1.2;
 text-align: center; 
 position: absolute; 
 top: 50%; left: 50%; 
 transform: translate(-50%, -50%); 

 background: rgba(0,0,0,0.6);
 padding: 2%;

}

strong {font-weight: bold; text-transform: uppercase; }



section.clear {height: 100px; background: #000;  position: relative; bottom: 0;display: inline-block;}

section:last-child {    margin-bottom: -50px;}


/* /Secciones */

/* Pagina Proyectos */

section {}

.proyectos {

background: #000;
padding-top: 120px;
padding-bottom: 0px;
height: auto;
padding-bottom: 10%;
}



/* Proyectos ---- Cuadros */

.titulo {text-align: center; color: #f4f4f4;}

.proyectos .bloque { position: relative;  overflow: hidden;margin-bottom: 2%; border: 5px solid #000;}

.bloque {height: 250px; overflow: hidden;}

 .bloque span {color:#fff; font-size: 1em; position: absolute; top:50%; left: 50%;transform: scale(1) translate(-50%, -50%);transition: all .3s;}

 .bloque img {position: absolute; top:50%; left: 50%; transform: scale(2) translate(-50%, -50%); transition: all .3s;}

.bloque {border: 10px solid #000; }

 .bloque:hover {cursor: pointer;}

 .bloque:hover img {position: absolute; top:50%; left: 50%; transform: scale(1.3) translate(-50%, -50%); }

 .bloque:hover span { padding: 4px; color: #39b54a;  border-radius: 10%; font-size: 1.2em;}

 .bloque:hover .nombre-p { padding: 4px; color: #39b54a; border: border-radius: 10%; font-size: 12px; padding-bottom: 2%;}

.fa span {font-size: 1em; font-family: 'Lato', sans-serif; font-weight: bold;}



.proyectos .bloque span, 
.proyectos .bloque .nombre-p {z-index: 2;}

.nombre-p {color: #f4f4f4;
    text-align: center;
    font-size: 16px;
    position: absolute;
    bottom: 0;
    padding: 2%;

    background: none;
    width: 100%;
    left: 0;transition: all .3s;}

 .fa {transition: all .2s;}

 .fa:hover {transform: rotate(45deg);}

.bloque:before {content: url('../recursos/Cuadros.png'); 
width: 10px;
height: 20px;
background-position: center center;
position: absolute;
top:0;
left: 0;
transform: translateY(130px);
transition: all .2s;
z-index: 1;
opacity: 1;

}


.proyectos .bloque:hover:before {transform: translateY(100px);opacity: 0.2;}

/* /Pagina Proyectos */


/* Single Project */

.cabecera {background: #fff; position: relative; overflow: hidden;}

.cabecera::after {
    content: '';
    transform: translateY(40px) skew(0deg, -3deg);
    z-index:1;
    width: 100%;
    position: absolute;
    bottom: 0;
    margin: 0;
    padding: 0;
    padding-top: 0
    left: 0;
    transition: all .5s;
    opacity: 1;
    visibility: visible;
    border: 40px solid #fff;

   }


section.proyecto-single {height: auto;}


.titulo-proyecto {color:#fff; font-size: 2.2em; position: absolute; top:50%; left: 50%;transform: scale(1) translate(-50%, -50%);transition: all .3s;}

.proyecto-single {z-index: 2;}

.proyecto-single .descripcion { padding: 4%; border: 4px solid #f4f4f4; margin-top: 5%; text-transform: lowercase;}

h3.subtitulo {font-size: 0.8em; color: #7A7A7A;}

.subtitulo strong, .subtitulo strong a  {font-size: 1em; color: #3A3A3A; text-decoration: none;}

strong a:hover {text-decoration: none; color:#C4C4C4;}

.separador {background: transparent; height: 10px; width: 100%; display: block; padding: 4%;}

.subseccion h3 {font-size: 1em; color: #7A7A7A; text-align: center; padding-bottom: 2%; }

.desc-content p strong {color:#7A7A7A;text-transform: capitalize ;}

.desc-content p {color: #3A3A3A;text-transform: none ; line-height: 1.7em;}


/* /Single Project */



/* Equipo */


section.equipo { height: auto;}

.cabecera.trama {
    background: #fff;
    position: relative;
    overflow: hidden;
    margin-top: 70px;

}


.equipo { margin-top: 50px; padding-bottom: 100px;}




/* --------------------------------------------------------------------  Contenido Expandido ----------------------------------------------------- */

.contenido {

	background-color: #fff;
	position: relative;
	width: 100%;
	transition:all .5s; opacity: 1;
	visibility: visible;
    margin-bottom: 0px;

}




.texto{

	position: relative;
	width: 100%;
	max-width: 1024px;
	margin: 4em auto;
	

}

.contenido h1.titular {


	color: #CD5C5C;
	text-align: center;
	font-size: 30px;

}


h1.titular { text-align: center; margin: 1em auto; display: block;}


.tarjeta { position: relative; background: #fff; 
border: 2px solid #9E005D;
padding: 4%;
text-align: center;
overflow: hidden;
padding-bottom: 0;
transition: all 2s ;

}


.foto { border: 6px solid #fff;  border-radius: 50% 50%; width: 200px; height: 200px; overflow: hidden;  margin: 0 auto;  z-index: 2; position: relative; }

.foto img { width: 100%; height:auto; max-width: 100%: bottom: 0px; transform: scale(1.6) translateY(20px); transition: all .5s;cursor: pointer;}
.foto img:hover {transform: scale(1) translateY(0px);}

.tarjeta::before { 
     content: "";
   display: block;
   width: 100%;
   position: absolute;
   left: 0;
   margin: 0;
   top: 0;
   height: 180px;
   background:#9E005D ;

}

.tarjeta::after { 
     content: url(../recursos/Faldon.png);
   display: block;
   width: 100%;
   left: 0;
   bottom: 0;
   position: relative;
   transform: scale(1.2);
   transform: translateY(20px),  translateX(-20px);

   transition: transform 2s;
   
}

.equipo .descripcion {padding-bottom: 5%; border: 0px; z-index: 9;}

.equipo .descripcion .nombre { color:#9E005D ; font-size: 26px; font-weight: 500;  margin: 1em  auto;}



.mostrar .descripcion {position: relative;}


.descripcion-profile {padding-bottom: 5%; border: 0px; }

.descripcion-profile .nombre { font-size: 21px; font-weight: 500;  margin: 1em  auto;}

.descripcion-profile .datos {  font-size: 14px; font-weight: 500; margin: 1em auto; }


.izquierda .descripcion-profile .nombre { color:#fff ; font-size: 26px; font-weight: 500;  margin: 1em  auto;}

.izquierda .descripcion-profile .datos  { color: #fff ;  font-size: 14px; font-weight: 500; margin: 1em auto; }

.derecha strong  {    color: #fff; font-size: 19px; margin-right: 2%;}

.derecha .parrafo {color: #fff; font-size: 14px;}

.derecha .social {color: #fff; font-size: 22px;}

.derecha {text-align: left;}

.gridder-expanded-content .social li {display: inline-block; }

.gridder-expanded-content .social {margin: 0; float: left; color: #fff; font-size: 17px;}

.gridder-expanded-content .social::before {content: 'Compartir en las Redes Sociales:'; font-size: 14px; color: #CEBCBC;}
.ver { z-index: 5; color: #4444; position: absolute; display: block; cursor: pointer; }


/*--------

FICHA

----------*/



.ficha {padding: 2%;}

.ficha {}

.cerrar {position: absolute; right: 0; top: 0; color: #fff; margin-right: 1%; margin-top: 1%; cursor: pointer;}

.morado {background:  #9E005D url('../recursos/Faldon.png') repeat-x bottom; width: 100%; height: auto;}

.visible {display: none;}






/* --- Expandido --- */


.selectedItem.tarjeta {opacity: 0.5;}

.selectedItem .gridder-show {display: none;}

.gridder-show { background: #9E005D; border: 2px solid #fff; padding: 2%;}

.gridder-list{ padding: 0; margin: 0;}

.expandido {background:#9E005D; }

.gridder-navigation {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;

  
}

.gridder-nav, .gridder-close {

	background: #fff;
    padding: 2%;
    color: #000;
    margin: 0.2%;
    font-size: 20px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;

}

/* Gridder */


.gridder.hasSelectedItem .gridder-list {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    opacity: 0.5;
}
.gridder.hasSelectedItem .gridder-list.selectedItem {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 100;
}
.gridder-list {
  
    cursor: pointer;
    }
.gridder-list:nth-child(n) {
    margin-bottom: 1%;
    margin-right: 1%}
.gridder-list:nth-of-type(3n) {
    margin-right: 0;
    margin-bottom: 0;
}
.gridder-list .overlay {
    position: absolute;
    left: 15px;
    top: 15px;
    color: #FFF;
}
.gridder-list .overlay .title {
    font-weight: 800;
    font-size: 16px;
}
.gridder-list .overlay .description {
    font-weight: 300;
    font-size: 14px;
}
.gridder-list .image {
    background-color: #EEE;
    background-image: url("../img/loading-spin.svg");
    background-size: cover;
    background-position: center;
    height: 250px;
}
@media only screen and (max-width: 768px) {

.gridder-list .image {
    height: auto;
}
}.gridder-show {
    float: left;
    display: block;
    padding: 0px;
    margin-bottom: 20px;
    -webkit-box-shadow: inset 0px 0px 20px 5px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: inset 0px 0px 20px 5px rgba(0, 0, 0, 0.16);
    box-shadow: inset 0px 0px 20px 5px rgba(0, 0, 0, 0.16);
}

}
@media only screen and (max-width: 768px) {
    .gridder-show {
    padding: 15px;
}
}.gridder-navigation {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 0px;
    text-align: left;
}
.gridder-navigation a {
    background: #FFF;
    display: inline-block;
    padding: 15px;
    color: #000;
    text-decoration: none;
    font-size: 24px;
    margin-right: 0px;
    transition: all .3s ease-in-out;
}
.gridder-navigation a:hover {
    background: #000;
    color: #FFF;
}
.gridder-navigation a.disabled {
    opacity: 0;
}
.gridder-expanded-content {
    animation-name: fadeIn;
    animation-duration: .3s;
    animation-fill-mode: both;
}
@keyframes fadeIn {
    0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

.gridder-expanded-content {
    animation-name: fadeIn;
    animation-duration: .4s;
    animation-fill-mode: both;
    overflow: hidden;
}

.izquierda {

animation-name: izquierda;
    animation-duration: .4s;
    animation-delay: .5s;
    animation-fill-mode: both;
    

}


 .derecha {
animation-name: derecha;
    animation-duration: .4s;
    animation-delay: 1s;
    animation-fill-mode: both;

}


@keyframes fadeIn {
   from {
    opacity: 0;
    visibility: hidden;
    transform: scale(0);

}
to {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

}
@keyframes izquierda {
   from {
    opacity: 1;
    visibility: hidden;
    transform: translateZ(0);
	transform: translateX(-100%);
	transition: transform .5s cubic-bezier(.07,.23,.34,1);

}
to {
    visibility: visible;
    opacity: 1;
   
	transform: translateX(0%);
	transition: transform .5s cubic-bezier(.07,.23,.34,1);
}

}

@keyframes derecha {
   from {
    opacity: 0;
    visibility: hidden;
    transform: translateZ(0);
	transform: translateX(100%);
	transition: transform .5s cubic-bezier(.07,.23,.34,1);

}
to {
    visibility: visible;
    opacity: 1;

   
	transform: translateX(0%);
	transition: transform .5s cubic-bezier(.07,.23,.34,1);
}

}



.gridder-navigation {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 0px;
    text-align: left;
}

.gridder-content {opacity: 0; visibility: hidden; display: none;}

.gridder-navigation {
    z-index: 1;
    position: relative;
    top: 0px;
    left: 0px;
    padding: 0px;
    text-align: left;
    background: #fff;

   }

.gridder {width: 100%; padding: 0; margin: 0;}

.gridder-list:nth-child(n) {margin: 0;padding: 0.3%;}


/* Contenido */

.faldon {
    transform: scale(1);
    width: 100%;
}


.gridder-expanded-content .row { background: #fff; margin: 0;}

.col-md-4.izquierda { padding: 4%; }
.col-md-8.derecha {padding: 4%; }



/* --------------------------------------------------------------------  /Contenido Expandido ----------------------------------------------------- */


/* /Equipo **/


/* linear-gradient(45deg, #e24412, #f18905, #00a092, #21aadf, #e5126f) Degradado Meeting */

/* Pie */

footer {position: relative;}

.cuadros {
background-image: url('../recursos/Cuadros.png');
background-position: left center;
background-blend-mode: multiply; 
width: 100%; 
height: 250px;
position: relative;
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); 
z-index: 4; 
position: absolute;
background-repeat: no-repeat;
background-size: cover;
bottom: 0;
}

footer .cuadros {position: relative;}

.titular {

font-family: 'Lato', sans-serif; 
font-weight: 500; 
text-transform: lowercase; 
color: #fff; 
font-size: 1.5em;
letter-spacing: 0;
line-height: 1.2;
text-align: center; 


}


.centrado {

position: absolute; 
 top: 50%; left: 50%; 
 transform: translate(-50%, -50%); 


}


.social  {margin: 0 auto; text-align: center; display: block;}

.social ul li {display: inline-block; color: #fff; font-size: 2em; text-align: center; margin: 4%; transition: all .5s;}

.social ul li:first-child, .social ul li:last-child {margin-left: 0%;}

.social ul li a:hover {color: #fff; transition: all .5s;}

.social ul li a:hover {color: #000;}

/* /Pie */




/* Responsive */

@media (min-width: 1300px) {

.cabecera::after {
    content: '';
    transform: translateY(42px) skew(0deg, -2deg);  
    width: 100%;
    position: absolute;
    bottom: 0;
    margin: 0;
    padding: 0;
    padding-top: 0;
    left: 0;
    transition: all .5s;
    opacity: 1;
    visibility: visible;
    border: 40px solid #fff;
}

.titulo-proyecto {
    color: #fff;
    font-size: 2.2em;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: scale(1) translate(-50%, -80%);
    transition: all .3s;
    text-shadow: 2px 2px #000;
 }

 .cabecera.trama {
    background: #fff;
    position: relative;
    overflow: hidden;
    margin-top: 0px;
}

.menu::after {
 
    transform: translateY(40px) skew(0deg, -2deg);
   
}

.foto { width: 300px; height: 300px;}

.logotipo {    width: 100%;
    max-width: 300px;
    float: left;
    z-index: 2;

}

  .cuadros { height: 333px; }

  .cabecera img {max-height: 300px;}

  .cabecera.single { margin-top: 80px; }

}


.fixed-menu {opacity: 0; visibility: hidden;}



@media (max-width: 780px) {

	
.logotipo {    width: 100%;
    max-width: 80%;
    float: left;
    z-index: 2;
    max-height:  110px;
    display: block;

}

.titulares {    

	top: 20%;
    left: 28%;
    transform: translate(-20%, -20%);
    padding: 5%;
   
}

section:first-child {margin-top: 140px;}



.menu { max-height:  110px; padding: 0;}


/* MENU RESPONSIVO */


.fixed-menu {opacity: 1; visibility: visible; cursor: pointer;}


.nav-trigger {
	position: fixed;
	z-index: 10;
	top: 30px;
	right: 25px;
	height: 44px;
	width: 44px;

	overflow: hidden;
	color: transparent;
	white-space: nowrap;
	text-indent: 100%;
}

.nav-trigger span,
.nav-trigger span::before,
.nav-trigger span::after {
	position: absolute;
	height: 4px;
	width: 36px;
	background: #1F2B3D;
}

.nav-trigger span {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: background .3s;
}

.nav-trigger span::before,
.nav-trigger span::after {
	content: '';
	top: 0;
	left: 0;
	transition: background .3s, transform .3s;
}

.nav-trigger span::before {
	transform: translateY(-12px);
}

.nav-trigger span::after {
	transform: translateY(12px);
}

.nav-trigger:hover span, 
.nav-trigger:hover span::before,
.nav-trigger:hover span::after {
	background: #1F2B3D;
}

.open .nav-trigger span {
	background: transparent;
}

.open .nav-trigger span::before,
.open .nav-trigger span::after {
	background: #1F2B3D;
}

.open .nav-trigger span::before {
	transform: rotate(-45deg);
}

.open .nav-trigger span::after {
	transform: rotate(45deg);
}



/* /MENU RESPONSIVO */

nav li {
    display: block;
    list-style: none;
    text-decoration: none;
    padding: 0.5%;
    line-height: 2.5em;
    z-index: 2;
    clear: both;
    float: right;}

nav li a, nav li a:hover {clear: both;
    float: right;}



nav {display: block; position: fixed; top: 0; right: 0; width: 40%; height: 100vh; background: #fff; margin: 0; padding: 5%; padding-top: 20%; transform: translateX(100%); transition:all .5s;}

nav::after { content: url('../recursos/Logotipo.svg');margin: 0 auto; text-align: center; position: absolute; bottom: 0; width: 100%;left:0;}

.open nav  {transform: translateX(0%); padding-top: 20%; z-index: 9;     box-shadow: -5px 0px 7px -3px rgba(0,0,0,0.75);}


.open .contenido {opacity: 0.2;}

.menu.skew > .row {transform: scale(1);}

.menu .col-md-3  {padding-left: 0;padding-right: 0;}

.cabecera.single {margin-top: 120px;}

.cabecera.trama img {    margin-bottom: 32px;}

.cabecera.trama {    margin-top: 127px;}

.titulo-proyecto {    top: 36%; font-size: 1.6em;}


.gridder-list:nth-child(n) { list-style: none; }

section:first-child { margin-top: 120px; }

.text-right {text-align: left;}


.cabecera.single  {  margin-top: 140px; }


}


/* Prueba */


.fullpage{
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: white;
  background-image: url('../recursos/Proyecto.jpg');
  background-position: bottom;
  background-size: cover;
  z-index: 2;
  color: white;
  box-shadow: inset 0 0 0 1000px rgba(41, 128, 185, 0);
  transition: height 0.6s cubic-bezier(0.7, 0, 0.3, 1), box-shadow 0.6s 0s;
}

.fullpage.clicked{
  height: 100px;
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.5);
  transition: height 0.6s cubic-bezier(0.7, 0, 0.3, 1), box-shadow 0.6s 0.3s;
}

.fullpage h1{

    font-weight: 100;
    line-height: 110px;
    transition: 0.6s 2s;
    font-family: 'lato', san-serif;
    color: #fff;
        text-shadow: 2px 2px #000;

}


.fullpage h1 {
    top: 50%;
    left: 50%;
    transition: 0.6s;
    transform: translate(-50%, -50%);
    opacity: 1;
    visibility: visible;
    font-size: 2em;
    position: absolute;

  } 

.fullpage.clicked h1 {

    font-size: 0; opacity: 0; visibility: hidden;
}


.button{
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
  margin: 0 30px 30px 0;
  font-size: 0;
  cursor: pointer;
  z-index: 5;
}


.icon{
  transform-origin: 50% 50%;
  transition: opacity 0.3s, transform 0.3s;
}

.icon rect{
  stroke: white;
  fill: none;
  stroke-width: 2px;
}

body.clicked .icon{
  opacity: 0;
  transform: scale3d(0.5, 0.5, 1);
}

.firstcross, .secondcross{
  width: 1px;
  height: 0px;
  position: absolute;
  background: white;
  top: 50%;
  left: 50%;
  transition: 0.3s;
}

.firstcross{
  transform: translate(-50%, -50%) rotate(45deg);
}

.secondcross{
  transform: translate(-50%, -50%) rotate(135deg);
}

body.clicked .firstcross, body.clicked .secondcross{
  height: 56px;
}

body .firstcross, body .secondcross {

    opacity: 0.9;
}



.gallery{
  width: 100%;
  background: #fff;
  text-align: center;
  font-size: 0;
  padding: 5px;
  margin: 0px 0 0 0;
  transition: 0.6s;
}

.gallery a{
  width: calc(100% / 4 - 10px);
  height: calc(100% / 4 - 10px);
  overflow: hidden;
  display: inline-block;
  margin: 5px;
}

.gallery a:hover img{
  transform: scale(1.06);
}

.gallery a img{
  min-height: 100%;
  width: 100%;
  transition: 0.6s;
}

@media screen and (max-width: 1440px) {
  .gallery a {
    width: calc(100% / 3 - 10px);
    height: calc(100% / 3 - 10px);
  }
}

@media screen and (max-width: 1000px) {
  .gallery a {
    width: calc(100% / 2 - 10px);
    height: calc(100% / 2 - 10px);
  }
  .fullpage h1 {
    font-size: 120px;
    margin: 0 0 20px 10px;
  }
}

@media screen and (max-width: 590px) {
  .gallery a {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
  }
  
.fullpage h1 {
      font-size: 2em;
    /* margin: 0 0 20px 10px; */
    line-height: 1em;
    width: 100%;
    left: 65%;
}


}

.titulo-proyecto .cerrar { font-size: 0.4em; color: #E2E2E2; display: block; position: relative;  transition: all .5s; padding-top: 2%; width: 100%; text-align: center;height: auto; }

.titulo-proyecto .cerrar.button{ font-size: 12px; display: block;margin: 0;  position: relative;  height: 56px; transition: all .5s; text-align: center;height: auto;}

.fa.icon { position: fixed; font-size: 41px; color:#fff; }

.fa.icon:hover {   transform: rotate(90deg);}

.see {opacity: 0; visibility: hidden; transition: all .3s; transform: translateX(-100%); }

.ver-proyecto  { 
	opacity: 1;
    visibility: visible;
    bottom: 50px;
    left: 50px;
    position: absolute;
    color: #fff;
    transform: translateX(0%);

}


.gridder {

    width: 100%;
  background: #fff;
  text-align: center;
  font-size: 0;
  padding: 0px;
  margin: 0px 0 0 0;
  transition: 0.6s;


}


.gridder-list {
    
    width: calc(100% / 4 - 0px);
    height: auto;
    overflow: hidden;
    display: inline-block;
    margin: 0px;
}

.gridder-show {
    
    width: 100%;
    
}


.gridder-expanded-content .row {background: transparent;}


.text-right .subtitulo {text-align: right;}

.desc-content p strong { font-size:  1.4em; }

.desc-content p { color: #9E9D9D; }

.cabecera::after { transform: translateY(250px) skew(0deg, -3deg); margin-bottom: 2%;} 

.proyecto-single {padding-top: 2%;}


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

.gridder-list {
    
    width: calc(100% / 1 - 0px);
    height: auto;
    overflow: hidden;
    display: inline-block;
    margin: 0px;
}


.text-right .subtitulo {text-align: left;}

.desc-content p strong { font-size:  1rem; }

}


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

.gridder-list {
    
    width: calc(100% / 3 - 0px);
    height: auto;
    overflow: hidden;
    display: inline-block;
    margin: 0px;
}
}
/* Perfiles */

.perfil {padding: 2%;
    display: inline-block;
    position: relative;}

.imagen-perfil { 

	overflow: hidden; 
	height: auto;
	width: 100%;

}

.imagen-perfil img {width: 100%; transform: scale(1.4) translateX(10%); transition: .5s;}
.imagen-perfil img:hover  {transform: scale(1) translateX(0%);}

.perfil:hover img {transform: scale(1) translateX(0%);}

.perfil .descripcion-profile {width: 100%; transform: scale(1.2); transition: .5s;}

.perfil:hover .descripcion-profile {transform: scale(1) translateX(0%);}



.pink .descripcion-profile .nombre, .orange .descripcion-profile .nombre, .blue .descripcion-profile .nombre, .green .descripcion-profile .nombre, .red .descripcion-profile .nombre {color:#fff; position: relative; padding-bottom: 4%;}

.perfil .descripcion-profile .nombre  {color:#000 position: relative; padding-bottom: 4%;}


/* Colors */

.pink {    background: #9E005D url('../recursos/Faldon.png') repeat-x bottom;     box-shadow: inset 0px 20px 20px 5px rgba(0, 0, 0, 0.16);}

.orange {    background: #e2440c  repeat-x bottom;     box-shadow: inset 0px 20px 20px 5px rgba(0, 0, 0, 0.16);}

.red {    background: #f70029 url('../recursos/Red.jpg') repeat-x bottom;    box-shadow: inset 0px 20px 20px 5px rgba(0, 0, 0, 0.16);}

.green {    background: #5be412 url('../recursos/Green.jpg') repeat-x bottom;    box-shadow: inset 0px 20px 20px 5px rgba(0, 0, 0, 0.16);}

.blue {    background: #00c0f8 url('../recursos/Blue.jpg') repeat-x bottom;    box-shadow: inset 0px 20px 20px 5px rgba(0, 0, 0, 0.16);}


.gridder-list:nth-child(n) {margin: 0; padding: 0; }


.gridder-show {background: transparent;    box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0);}


.gridder-padding {position: relative; }

.gridder-navigation {background: transparent; position: absolute;}

.gridder-show {margin-top: 5%;}

section:last-child {height: auto;}

a.link-video {color: #CA952D;text-decoration: none;}

.descripcion-profile .nombre { font-size: 16px;}

.gridder-expanded-content .orange { background: #fff; box-shadow: inset 0px 20px 20px 5px rgba(0, 0, 0, 0.02);}

.derecha .parrafo { color: #B5B5B5; font-size: 17px;}

.derecha strong, .gridder-expanded-content .orange .descripcion-profile .nombre, .gridder-expanded-content .social, .gridder-navigation a {    color: #e2440c;}

.gridder-expanded-content .orange .row {padding: 5%; }

.foto {
    width: 100%;
    height: auto;
}

.orange strong:first-child {
    /* display: none; */
    clear: both;
    display: block;
    margin-bottom: 2%;
}

.area {
    /* display: none; */
    clear: both;
    display: block;
    margin-bottom: 1%;
    margin-top: 2%;
}


/* Contacto */


.contacto { padding-bottom: 15%; padding-top: 2%;}

textarea {
	resize: none;
}
.form-label {
	font-size: 12px;
	color: #5e9bfc;
	margin: 0;
	display: block;
	opacity: 1;
	-webkit-transition: .333s ease top, .333s ease opacity;
	transition: .333s ease top, .333s ease opacity;
}
.form-control {
	border-radius: 0;
	border-color: #ccc;
   	border-width: 0 0 2px 0;
   	border-style: none none solid none;
   	box-shadow: none;
}
.form-control:focus {
	box-shadow: none;
	border-color: #5e9bfc;
}
.js-hide-label {
	opacity: 0; 	
}
.js-unhighlight-label {
	color: #999 
}
.btn-start-order {
	background: 0 0 #ffffff;
    border: 1px solid #2f323a;
    border-radius: 3px;
    color: #2f323a;
    font-family: "Raleway", sans-serif;
    font-size: 16px;
    line-height: inherit;
    margin: 30px 0;
    padding: 10px 50px;
    text-transform: uppercase;
    transition: all 0.25s ease 0s;
}
.btn-start-order:hover,.btn-start-order:active, .btn-start-order:focus {
	border-color: #5e9bfc;
	color: #5e9bfc;
}

.play {position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; width: 20%; opacity: 1;}

.first {opacity: 0.8;}