/* Header */
.page-ficha #siteHeader{
	position: fixed;
}
.page-ficha #siteHeader.im-sticky{
	background: #fff;
}
.page-ficha .nav-toggle span{
	background: #ffffff;
}
.page-ficha #siteHeader.im-sticky .nav-toggle span{
	background: #04005E;
}
.page-ficha #siteHeader.im-sticky.opened-menu .nav-toggle span{
	background: #ffffff !important;
}
.page-ficha #siteHeader #frontalyLogo{
	width: 116px;
	margin-top: 0;
}
/* Parte de arriba */
#fichaMainData{
	max-height: 90vh;
	position: relative;
}
#fichaMainData .ficha-titles{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding-bottom: 65px;
}
#fichaMainData .ficha-titles h1{
	font-size: 26px;
	line-height: 36px;
	text-align: center;
	color: #ffffff;
	margin-bottom: 38px;
}
/*#fichaMainData .ficha-titles picture{
	width: 165px;
}*/
/* Destacado Color */
#fichaColor{
	padding: 0 0 3px;
	position: relative;
}
#fichaColor .info-holder{
	padding: 67px 0 0;
	border-radius: 12px;
	position: relative;
	-webkit-animation-name: animate-foco;
	animation-name: animate-foco;
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-transition: all .5s linear;
	-o-transition: all .5s linear;
	transition: all .5s linear;
	overflow: hidden;
}
/*@-webkit-keyframes animate-foco{
  0%{
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
  }
  100% {
	-webkit-transform: translateY(-30px);
	-ms-transform: translateY(-30px);
	transform: translateY(-30px);
  }
}
@keyframes animate-foco{
  0%{
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
  }
  100% {
	-webkit-transform: translateY(-30px);
	-ms-transform: translateY(-30px);
	transform: translateY(-30px);
  }
}*/
#fichaColor .info-holder .extra-holder{
	padding: 24px 20px 50px;
}
#fichaColor .info-holder h1{
	display: inline-block;
	font-size: 32px;
	font-weight: 700;
	line-height: 40px;
	color: #ffffff;
	position: relative;
	margin-bottom: 13px;
}
#fichaColor .info-holder .kicker{
	font-size: 16px;
	line-height: 1;
	text-decoration: underline;
	margin-bottom: 24px;
	position: relative;
	color:#ffffff;
}
#fichaColor .info-holder h2{
	font-size: 20px;
	line-height: 26px;
	color: #ffffff;
	margin-bottom: 36px;
}
#fichaColor .info-holder .extra-holder > p{
	font-size: 20px;
	line-height: 1;
	color: #ffffff;
	margin-bottom: 25px;
}
#fichaColor .info-holder p{
	font-size: 20px;
	line-height: 24px;
	color: #ffffff;
	margin-bottom: 16px;
	position: relative;
}
#fichaColor .info-holder > picture{
	position: relative;
}
#fichaColor .info-holder > picture img{
	width: 100%;
	max-width: 600px;
	height: auto;
	margin: 0 auto;
	margin-top: 20px;
}

#fichaColor .linkable{
	font-size: 20px;
	line-height: 26px;
	color: #ffffff;
	text-decoration: none;
	border-bottom: 1px dashed #FF753F;
}
#fichaColor .linkable:hover{
	font-size: 20px;
	line-height: 26px;
	color: #FF753F;
	text-decoration: none;
	border-bottom: none;
}


/* Tiempo de carga */
#tiempoDeCarga{
	background: #FF662A;
	padding: 42px 30px 38px;
}
#tiempoDeCarga .load-time{
	font-size: 80px;
	line-height: 96px;
	color: #ffffff;
	margin-bottom: 4px;
}
#tiempoDeCarga .kicker{
	font-size: 28px;
	line-height: 34px;
	color: #ffffff;
	margin-bottom: 11px;
}
#tiempoDeCarga p{
	font-size: 18px;
	line-height: 24px;
	color: #ffffff;
	margin-bottom: 37px;
}
#tiempoDeCarga picture{
	width: 262px;
	margin: 0 auto;
}
/* Brief */
#brief{
	padding: 60px 30px 90px;
}
#brief .extra-holder{
	margin-bottom: 62px;
}
#brief h2{
	font-size: 28px;
	line-height: 32px;
	color: #303030;
	margin-bottom: 28px;
}
#brief .extra-holder p{
	font-size: 18px;
	line-height: 24px;
	color: #303030;
}
#brief .brief-highlight{
	padding: 28px 0 24px;
	border-top: 4px solid #F5F5F5;
	border-bottom: 4px solid #F5F5F5;
}
#brief .brief-highlight p{
	font-size: 22px;
	line-height: 28px;
	text-align: center;
}
/* Site info */
#siteInfo{
	background: #FBFBFB;
	padding: 61px 0;
}
#siteInfo .title-holder{
	padding: 0 30px;
	margin-bottom: 35px;
}
#siteInfo h2{
	font-size: 28px;
	line-height: 32px;
	color: #303030;
	margin-bottom: 9px;
}
#siteInfo .orange-bar{
	width: 0;
	height: 5px;
}
#siteInfo .orange-bar.in-view{
	width: 56px;
}
#siteInfo p{
	font-size: 18px;
	line-height: 24px;
	color: #303030;
	padding: 0 30px;
}
#siteInfo > picture{
	margin: 60px 0;
}
#siteInfo > .swiper-container{
	margin: 60px 0;
}
#siteInfo .swiper-slide picture{    
    margin-right: 5px;
}
/* Blockquote */
#blockquote{
	padding: 184px 30px 60px;
	background: url(../../resources/img/blockquote-bg.svg)no-repeat;
	background-position: -192px 105px;
}
#blockquote .quote{
	font-size: 161px;
	line-height: 44px;
	margin-bottom: 10px;
}
#blockquote blockquote p{
	font-size: 28px;
	line-height: 40px;
	text-align: center;
	color: #303030;
	margin-bottom: 39px;
}
#blockquote blockquote .kicker{
	font-size: 18px;
	line-height: 1;
	text-align: center;
}
.instagram-container{
    margin: 40px auto;
    max-width: 656px;
}
/* Mas trabajos */
#masTrabajos{
	background: #F5F5F5;
	/*padding: 56px 0 56px 20px;*/
}
#masTrabajos .title-holder{
	margin-bottom: 40px;
}
#masTrabajos h2{
	font-size: 28px;
	line-height: 32px;
	color: #303030;
	margin-bottom: 9px;
}
#masTrabajos .orange-bar{
	width: 0;
	height: 5px;
}
#masTrabajos .orange-bar.in-view{
	width: 56px;
}
/* Slider en mas trabajos - como el nuestros proyectos */
#masTrabajos .swiper-container{
	padding-right: 20px;
}
#masTrabajos .swiper-slide{
	width: 252px;
	height: 371px;
    overflow: hidden;
    border-radius: 15px;
	padding-top: 20px;
	margin-right: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
#masTrabajos .swiper-slide:before{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 15px;
	z-index: -1;
}
#masTrabajos .swiper-slide:last-child{
	margin-right: 0;
}
#masTrabajos .text-holder{
	padding: 0 20px;
}
#masTrabajos .site-name{
	font-size: 23px;
	color: #ffffff;	
	margin-bottom: 8px;
}
#masTrabajos .site-tags{
	font-size: 16px;
	line-height: 1;
	color: #ffffff;
}
/* Estilo Depo */
#masTrabajos .swiper-slide.overflow-style:before{
	height: 310px;
	top: auto;
}
#masTrabajos .swiper-slide.overflow-style:after{
	content: '';
	display: block;
	height: 257px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 60%,rgba(0,0,0,0.84) 84%,rgba(0,0,0,1) 100%);
	border-radius: 0 0 15px 15px;
}
#masTrabajos .swiper-slide.overflow-style .text-holder{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 35px;
	z-index: 1;
}
#masTrabajos .swiper-slide.overflow-style picture{
	position: absolute;
	bottom: 0;
}
/* flecha +Proyectos JUANE */
#masTrabajos .swiper-slide.swiper-last-slide{height:371px}
#masTrabajos .swiper-slide.swiper-last-slide .ver-todos-holder{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative}
#masTrabajos .swiper-slide.swiper-last-slide .ver-todos-holder .arrow-holder{width:58px;height:58px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px solid #DEDEDE;border-radius:50%;background:#f5f5f5;margin:0 auto 10px}
#masTrabajos .swiper-slide.swiper-last-slide .ver-todos-holder .arrow-holder svg{width:24px;height:auto;display:block}
#masTrabajos .swiper-slide.swiper-last-slide .ver-todos-holder .arrow-holder svg path{fill:#005fd9}
#masTrabajos .swiper-slide.swiper-last-slide .ver-todos-holder p{font-size:14px;text-align:center;color:rgba(0,0,0,.54)}

/* Link ficha JUANE */
.page-ficha p a{color: #005FD9; text-decoration: underline; cursor: pointer;}
.page-ficha p a:hover {color: #005FD9;text-decoration: none;-webkit-transition: background-color 50ms ease-out;transition: background-color 50ms ease-out;}


/* Animaciones cuando entrar en viewport las secciones */
#tiempoDeCarga,
#brief,
#siteInfo,
#blockquote,
#masTrabajos{
	opacity: 0;
	-webkit-transform: translateY(50px);
	-ms-transform: translateY(50px);
	transform: translateY(50px);
}
#tiempoDeCarga.in-view,
#brief.in-view,
#siteInfo.in-view,
#blockquote.in-view,
#masTrabajos.in-view{
	opacity: 1;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition: opacity .4s ease-out,-webkit-transform .4s ease-out;
	transition: opacity .4s ease-out,-webkit-transform .4s ease-out;
	-o-transition: transform .4s ease-out,opacity .4s ease-out;
	transition: transform .4s ease-out,opacity .4s ease-out;
	transition: transform .4s ease-out,opacity .4s ease-out,-webkit-transform .4s ease-out;	    
}

@media screen and (max-width: 1023px){
	.swiper-button-prev,
	.swiper-button-next{
		display: none!important;
	}
}

/* Nuevo contacto */
.page-ficha #contacto{
	background: url(http://frontaly.com/resources/img/contacto-mobile-bg.svg)no-repeat;
	background-position: -64px 4px;
	background-color: #FF662A;
	padding: 25px 0 35px;
	margin-bottom: 50px;
}
.page-ficha #contacto .text{
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
	margin-bottom: 9px;
}
.page-ficha #contacto .kicker{
	font-size: 15px;
	margin-bottom: 25px;
}
.page-ficha #contacto .contacto__link{
	max-width: 240px;
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    color: #303030;
    background: #ffffff;
    border-radius: 8px;
    margin: 0 auto;
}

/**** DESKTOP *****/
@media screen and (min-width: 1024px){
	/* Header */ 
	.page-ficha #siteHeader #frontalyLogo{
		width: 142px;
	}
	.page-ficha #siteHeader.im-sticky #frontalyLogo{
		width: 116px;
	}
	.page-ficha #siteHeader.opened-menu #frontalyLogo{
		width: 237px;
	}
	.page-ficha .nav-toggle span{
		background: #ffffff;
	}
	.page-ficha #siteHeader.im-sticky .nav-toggle span{
		background: #04005E;
	}
	.page-ficha #siteHeader.im-sticky.opened-menu .nav-toggle span{
		background: #ffffff !important;
	}
	/* Parte de arriba */
	#fichaMainData .ficha-titles{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
		padding: 0 0 0 80px;
	}
	#fichaMainData .ficha-titles h1{
		font-size: 52px;
		line-height: 60px;
		text-align: left;
		margin-bottom: 42px;
	}
	/* Destacado Color - ex Foco visual */
	#fichaColor{
		padding: 60px 0 57px 69px;
	}
	#fichaColor .info-holder{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		justify-content: space-between;
		-webkit-animation-name: unset;
		animation-name: unset;
		padding: 0;
	}
	#fichaColor .info-holder:before{
		display: none;
	}
	#fichaColor .info-holder .extra-holder{
		max-width: 821px;
		-ms-flex-preferred-size: 64.22222%;
	    flex-basis: 64.22222%;
    	-ms-flex-negative: 0;
    	flex-shrink: 0;
		padding: 80px 88px 80px 0px;
		margin-left: 11px;
		margin-bottom: 18px;
	}
	#fichaColor .info-holder h1{
		font-size: 52px;
		line-height: 58px;
		font-weight: 700;
		margin-bottom: 27px;
	}
	#fichaColor .info-holder h1:after{
		width: 16px;
		height: 16px;
		top: -17px;
		right: -44px;
	}
	#fichaColor .info-holder .kicker{
		font-size: 16px;
		text-decoration: underline;
		margin-bottom: 40px;
	}
	#fichaColor .info-holder .kicker:hover{
		text-decoration: underline;
	}
	#fichaColor .info-holder p{
		max-width: 590px;
		font-size: 20px;
		line-height: 28px;
	}
	#fichaColor .info-holder p:last-child{
		margin-bottom: 0;
	}
	#fichaColor .info-holder > picture{
		order: 2;
		padding: 0;
		margin-top: 7px;
	}
	#fichaColor .extra-holder .desktop-flex-container{
		display: flex;
		gap: 0 30px;
	}
	/* Tiempo de carga */
	#tiempoDeCarga{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: start;
    	-ms-flex-align: start;
        align-items: flex-start;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		padding: 70px 30px 50px;
	}
	#tiempoDeCarga .info-holder{
		-ms-flex-preferred-size: 50%;
		flex-basis: 50%;
		-webkit-box-ordinal-group: 3;
		-ms-flex-order: 2;
		order: 2;
		padding-top: 30px;
		padding-left: 26px;
	}
	#tiempoDeCarga .load-time{
		font-size: 138px;
		line-height: 166px;
		margin-bottom: 24px;
	}
	#tiempoDeCarga .kicker{
		font-size: 38px;
		font-weight: 700;
		line-height: 46px;
		margin-bottom: 27px;
	}
	#tiempoDeCarga p{
		max-width: 500px;
		font-size: 20px;
		line-height: 36px;
	}
	#tiempoDeCarga picture{
		-ms-flex-preferred-size: 50%;
		flex-basis: 50%;
		-webkit-box-ordinal-group: 2;
		-ms-flex-order: 1;
		order: 1;
		margin: 0;
	}
	#tiempoDeCarga picture img{
		width: initial;
		max-width: 100%;
	    margin: 0 auto;
	}
	/* Brief */
	#brief{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		padding: 168px 80px 161px;
	}
	#brief .extra-holder{
		-ms-flex-preferred-size: 488px;
		flex-basis: 488px;
		margin: 0 119px 0 0;
	}
	#brief h2{
		font-size: 38px;
		line-height: 46px;
		margin-bottom: 26px;
	}
	#brief .extra-holder p{
		font-size: 24px;
		line-height: 42px;
	}
	#brief .brief-highlight{
		-ms-flex-preferred-size: 388px;
		flex-basis: 388px;
		padding: 43px 0 51px;
		margin: 0;
	}
	#brief .brief-highlight p{
		font-size: 36px;
		line-height: 45px;
	}
	/* Site info */
	#siteInfo{
		padding: 150px 0;
	}
	#siteInfo .title-holder{
		max-width: 1166px;
		padding: 0 80px;
		margin: 0 auto 35px;
	}
	#siteInfo h2{
		font-size: 38px;
		line-height: 46px;
	}
	#siteInfo p{
		max-width: 1166px;
		font-size: 24px;
		line-height: 42px;
		padding: 0 80px;
		margin: 0 auto;
	}
	#siteInfo > picture,
	#siteInfo > .swiper-container{
		margin: 80px 0;
	}
    
    #siteInfo .swiper-slide{
        width:80%;
    }
	/* Blockquote */
	#blockquote{
		background-position: right 31px;
		padding: 184px 80px 205px;
	}
	#blockquote .extra-holder{
		max-width: 890px;
		margin: 0 auto;
	}
	#blockquote .quote{
		margin-bottom: 2px;
	}
	#blockquote blockquote p{
		font-size: 46px;
		line-height: 54px;
		margin-bottom: 55px;
	}
	#blockquote blockquote .kicker{
		font-size: 22px;
	}
	/* Mas trabajos */
	#masTrabajos{
		/*padding: 83px 0 148px 0;*/
	}
	#masTrabajos .title-holder{
		margin-bottom: 33px;
		padding-left: 26px;
		padding-left: 80px;
	}
	#masTrabajos h2{
		font-size: 32px;
		line-height: 46px;
	}
	#masTrabajos .swiper-container{
		padding-left: 26px;
		padding-left: 80px;
	}
	#siteInfo .swiper-button-prev,
	#siteInfo .swiper-button-next,
	#masTrabajos .swiper-button-prev,
	#masTrabajos .swiper-button-next{
		width: 60px;
		height: 60px;
		background: #DEDEDE;
		border-radius: 50%;
		margin-top: -30px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		opacity: 1!important;
	}
	#masTrabajos .swiper-button-prev{
		left: 54px;
	}
    #siteInfo .swiper-button-prev svg,
	#masTrabajos .swiper-button-prev svg{
		-webkit-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	#masTrabajos .swiper-button-next{
		right: 64px;
	}
    #siteInfo .swiper-button-disabled,
    #masTrabajos .swiper-button-disabled,
    #masTrabajos .swiper-button-disabled-cust{
        opacity: 0 !important;
    }
    /* Nuevo contacto */
	.page-ficha #contacto{
		background: url(../img/contacto-bg.svg)no-repeat;
	    background-color: #FF662A;
		background-position: 126px -116px;
		padding: 45px 0 50px;
	}
	.page-ficha #contacto .inner-container{
		max-width: 1088px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20px;
		margin: 0 auto;
	}
	.page-ficha #contacto .text{
		font-size: 32px;
		font-weight: 400;
		line-height: 1;
		text-align: left;
		margin-bottom: 18px;
	}
	.page-ficha #contacto .kicker{
		font-size: 22px;
		text-align: left;
		margin-bottom: 0;
	}
	.page-ficha #contacto .contacto__link{
		max-width: 338px;
		flex-basis: 338px;
		flex-shrink: 0;
	    height: 60px;
	    font-size: 20px;
	    line-height: 60px;
	    margin: 0;
	}
	.page-ficha #contacto .contacto__link:hover{
		-webkit-box-shadow: 0 6px 6px rgba(0, 0, 0, 0.1);
    	box-shadow: 0 6px 6px rgba(0, 0, 0, 0.1);
	}
}