/*
**********************************************************************
 * Website: Fluido Digital 
 * Version: 2.0
 * Thursday, January 17th, 2019
 * Last Update: 17/01/2019
 * https://www.fluido.es/
 * 
 * Thank you for taking a look at our code!
**********************************************************************/	


/*
 *********************************************************************
 * MAIN BLOCKS
 * 17/01/2019
  **********************************************************************/

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

body {
  	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
 	font-weight: 300;
	overflow-x: hidden;
	overflow-y: scroll;
	height: auto;
}

html.fixed,
body.fixed {
	overflow: hidden;
	height: 100%;
}

header,
main,
footer {
    overflow: hidden;
}

.container-fluid {
    padding: 0;
}

header .row {
    margin: 0;
}

main {
    position: relative;
    z-index: 10;
    margin-bottom: 440px;
    background-color: #ffffff;
}

section {
    padding: 70px 20px 0px 20px;
}

section.dynamic-block {
	padding: 0 10vw 0 10vw;
}

section.dynamic-block.full-block {
	padding: 0 0 0 10vw;
	min-height: 47vw;
}

#overview.dynamic-block {
	padding: 0px 20vw 0 20vw;
	z-index: 2;
	position: relative;
}

@media (max-width: 1380px) {
	
	#overview.dynamic-block {
		padding: 0px 10vw 0 10vw;
	}
}

@media (max-width: 992px) {
	
	section.dynamic-block.full-block {
		padding: 0px 10vw 0 10vw;
	}
}

.row {
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto;
    max-width: 1440px;
    width: 100%;
    text-align: left;
}

img {
	width: 100%;
}

hr {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0px;
	width: 100%;
}

hr.clearfix {
	display: inline;
}

.truncate {
  	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
}

.clickable:hover {
    cursor: pointer
}

.no-padding {
	padding: 0 !important;
}

.padding-top {
	padding-top: 50px;
}

.white {
	color: #ffffff !important;
}

#backtotop {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    opacity: 1;
    position: absolute;
    right: 15px;
    z-index: 11;
    height: 44px;
    width: 44px;
    border-radius: 100%;
    -webkit-transition: opacity, background-position;
    -moz-transition: opacity, background-position;
    -o-transition: opacity, background-position;
    -ms-transition: opacity, background-position;
    transition: opacity, background-position;
    transition-duration: 0s, 0s;
    -webkit-transition-duration: .25s;
    -moz-transition-duration: .25s;
    -o-transition-duration: .25s;
    -ms-transition-duration: .25s;
    transition-duration: .25s;
}

#home #backtotop,
#tienda #backtotop {
	background-color: rgba(185, 4, 19, 1.0);
    border: 2px solid rgba(185, 4, 19, 1.0);
}

#studio #backtotop {
	background-color: #225599;
    border: 2px solid #225599;
}

#approach #backtotop {
	background-color: #048a81;
	border: 2px solid #048a81;
}

#clients #backtotop {
	background-color: #693668;
	border: 2px solid #693668;
}

#projects #backtotop {
	background-color: #00afb5;
    border: 2px solid #00afb5;
}

#careers #backtotop {
	background-color: #ab3428;
    border: 2px solid #ab3428;
}

#contact #backtotop {
	background-color: #555555;
    border: 2px solid #555555;
}

#backtotop:hover {
    background-color: #fbba48;
	border: 2px solid #fbba48;
}

#backtotop svg {
	fill: #ffffff;
}

@media (max-width: 767px) {
	
	#backtotop {
		display: none;
	}
}

/*
 *********************************************************************
 * TYPOGRAPHIC STUFF
 * 17/01/2019
  **********************************************************************/


.smallcaps {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.title, .heading, .quote h2 {
    width: 100%;
    text-align: center;
    padding-bottom: 30px;
    font-size: 50px;
    font-weight: 200;
}

.case-study .title,
.case-study .heading, 
.case-study .quote h2 {
	text-align: left !important;
}

.case-study .title.center {
	text-align: center !important;
}

.legend .title {
    font-size: 40px;
}

.heading {
	text-transform: none;
	text-align: left;
	padding-top: 50px;
	padding-left: 20px;
	padding-right: 20px;
}

@media (max-width: 767px) {
	
	.smallcaps.title {
		font-size: 30px;
	}
	
	.title { 
		font-size: 30px;
	}
	
	.heading {
	    font-size: 30px;
	}
	
	.quote {
		font-size: 20px;
	}
}

.head {
	width: 200px;
}

.head:before {
	position: relative;
	display: block;
	content: " ";
	top: 16px;
	margin-left: -50px;
	width: 40px;
	height: 3px;
	background-color: #225599;
}

.head.white:before {
	background-color: #dbdbdb;
}

.center {
	text-align: center !important;
}

.large {
	font-size: 20px;
}

p {
	line-height: 24px;
}

p.large {
	padding-left: 220px;
	position: relative;
	top: -35px;
}

#overview p.large,
#overview p.medium {
    padding-left: 150px;
    padding-right: 100px;
    line-height: 30px;
    top: -35px;
}

#overview p.medium {
	position: relative;
    font-weight: 500;
}

p.medium {
	font-size: 16px;
	line-height: 24px;
}

p.large.full {
	float: none;
	padding-left: 50px;
	padding-right: 50px;
	top: 0;
}

@media (max-width:1024px) {
	
	p.large.full {
		padding-left: 10px;
		padding-right: 10px;
	}

	p.medium {
		font-size: 14px;
	}
}

@media (max-width:992px) {
	
	#overview p.large,
	#overview p.medium {
    	padding-left: 0px;
    	padding-right: 0px;
    	top: 0;
	}
}


@media (max-width:767px) {

	p.large {
    	padding-left: 0;
		top: 0px;
	}
}

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

#overview ul {
	padding-left: 0;
}

blockquote {
	padding: 20px 100px;
	border: none;
}

@media (max-width: 992px) {
	
	blockquote {
		padding: 20px 40px;
	}
}

@media (max-width: 767px) {
	
	blockquote {
		padding: 20px 10px;
	}
}

blockquote,
blockquote p {
	font-size: 16px;
}

.clear {
	color: #737373
}

.left {
	float: left;
}

.hidden {
    display: none;
}

.flex {
	display: flex;
}

/*
 *********************************************************************
 * BRAND
 * 17/01/2019
  ********************************************************************/


.navbar-brand {
    width: 60px;
	height: 54px;
    margin-left: -100px !important;
    color: #ffffff;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

.navbar-brand:hover {
    width: 310px;
    color: #434343;
    background: #fff;
    border-bottom-right-radius: 10px;
}

.navbar-brand-wrapper {
    margin-left: 10px;
}

.navbar-brand .logo {
	position: absolute;
	top: 15px;
	left: -60px !important;
    width: 50px;
    height: 50px;
    background: transparent url('../media/ui/logo.png') no-repeat 0% 0%;
    background-size: 50px 50px;
    float: left;
    display: inline-block;
    margin: -14px 10px 0 0;
    /*-webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    transition: all 0.4s ease-in-out;*/
}

.navbar-brand.loaded .logo {
	left: 10px !important;	
}

#home .navbar.nav-down.transparent .navbar-brand .logo,
#careers .navbar.nav-down.transparent .navbar-brand .logo,
#projects.google .navbar.nav-down.transparent .navbar-brand .logo,
.navbar.open .navbar-brand .logo {
    filter: brightness(200%) sepia(200) saturate(0) hue-rotate(0deg);
}

.navbar.nav-down:not(.open) .navbar-brand .logo {
    filter: none;
}

.navbar-brand:hover .logo {
	filter: none !important;
}

.navbar-brand .brand {
    position: absolute;
    top: 15px;
    left: -120px;
    width: 150px;
    font-size: 20px;
    transition: all 0.4s ease-in-out;
}

.navbar-brand.loaded .brand {
	left: 70px;
}

.navbar-toggle {
	margin-top: 10px;
	margin-right: calc(50vw - 35px);
}
	
.navbar-toggle::before {
	position: absolute;
	top: 3px;	
	left: -44px;	
	width: 50px;
	height: 24px;
	color: #ffffff;
	font-size: 16px;
}

html[lang="es"] .navbar-toggle::before,
html[lang="ca"] .navbar-toggle::before {	
	content: 'MENÚ';
}

html[lang="en"] .navbar-toggle::before {	
	content: 'MENU';
}

html[lang="es"] .navbar-toggle.open::before {
	left: -60px;
	content: 'CERRAR';
}

html[lang="ca"] .navbar-toggle.open::before {
	left: -60px;
	content: 'TANCAR';
}

html[lang="en"] .navbar-toggle.open::before {
	left: -50px;
	content: 'CLOSE';
}
	
.navbar-toggle .icon-bar {
    height: 1px;
    transition: 0.55s;
}

.navbar-toggle .icon-bar.menu-middle {
    width: 19px;
}

.icon-bar.menu-top-click {
  	backface-visibility: hidden;
  	top: 15px;
  	margin-top: 5px;
  	transform: rotate(45deg);
  	transition: 0.55s 0.5s;
}

.icon-bar.menu-middle-click {
  	opacity: 0;
}

.icon-bar.menu-bottom-click {
  	backface-visibility: hidden;
  	top: 15px;
  	margin-top: -6px !important;
  	transform: rotate(-405deg);
  	transition: 0.55s 0.5s;
}

@media (min-width:767px) and (max-width:1023px) {
		
	.navbar-brand .brand {
		display: none;
		left: 60px;
	}
}

@media (max-width: 767px) {
	
	.navbar-brand-wrapper {
    	margin-left: 15px;
	}
	
	.navbar-brand {
		width: 75px;
	}
	
	.navbar-brand .logo {
		margin-left: 0;
	}

	.navbar-brand:hover {
    	width: 85px;
	}
}

@media (max-width: 550px) {
		
	.navbar-brand .brand {
		display: none;
	}
}



/*
 *********************************************************************
 * MAIN NAVIGATION BAR
 * 17/01/2019
  ********************************************************************/

.navbar-toggle .icon-bar {
    background-color: #ffffff;
}

nav ul.navbar-nav {
    width: 713px;
    height: 57px;
    float: none;
}

html[lang="ca"] nav ul.navbar-nav {
    width: 713px;
}

html[lang="en"] nav ul.navbar-nav {
    width: 713px;
}

nav li a {
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 500;
}

ul.lang-nav {
    position: absolute;
    right: 30px;
    text-transform: uppercase;
    margin: 8px 0 0 0;
	padding: 6px 0;
    font-size: 16px;
    list-style-type: none;
    height: 30px;
    transition: height 0.3s ease-in-out;
    cursor: pointer;
    overflow: hidden;
    z-index: 1000;
}

ul.lang-nav:hover {
    height: 80px;
}

ul.lang-nav li {
    opacity: 0;
    transition: all 0.4s ease-in-out;
    width: 60px;
    display: none;
}

ul.lang-nav:hover li {
	display: block;
}

ul.lang-nav li.active {
    position: relative;
    opacity: 1;
    display: block;
}

ul.lang-nav li.active::after {
    display: block;
    content: url('../media/ui/arrow-down.svg');
    position: absolute;
    top: -1px;
    left: 38px;
    width: 10px;
    height: 10px;
}

ul.lang-nav li a {
    padding: 8px 15px;
}

ul.lang-nav li:hover a {
    color: #fbba48;
    text-decoration: none;
}

ul.lang-nav:hover li {
    opacity: 1;
}

.navbar-fixed-top.solid ul.lang-nav:hover {
    background-color: rgba(36, 37, 41, 0.5);
}

.navbar-fixed-top {
    top: 0px;
    max-height: 57px;
    transition: all 0.2s ease-in-out;
    background-color: rgba(36, 37, 41, 0);
}

.navbar-fixed-top.nav-up {
    top: -57px;
}

ul.navbar-nav li {
	-webkit-transition: all 500ms cubic-bezier(0.330, 0.595, 0.000, 1); /* older webkit */
	-webkit-transition: all 500ms cubic-bezier(0.330, 0.595, 0.000, 1.320);
	   -moz-transition: all 500ms cubic-bezier(0.330, 0.595, 0.000, 1.320);
	     -o-transition: all 500ms cubic-bezier(0.330, 0.595, 0.000, 1.320);
	        transition: all 500ms cubic-bezier(0.330, 0.595, 0.000, 1.320); /* custom */
	
	-webkit-transition-timing-function: cubic-bezier(0.330, 0.595, 0.000, 1); /* older webkit */
	-webkit-transition-timing-function: cubic-bezier(0.330, 0.595, 0.000, 1.320);
	   -moz-transition-timing-function: cubic-bezier(0.330, 0.595, 0.000, 1.320);
	     -o-transition-timing-function: cubic-bezier(0.330, 0.595, 0.000, 1.320);
	        transition-timing-function: cubic-bezier(0.330, 0.595, 0.000, 1.320); /* custom */
}

ul.navbar-nav li:nth-child(1) {
    top: -45px;
    transition-delay: 75ms
}

ul.navbar-nav li:nth-child(2) {
    top: -45px;
    ttransition-delay: 150ms
}

ul.navbar-nav li:nth-child(3) {
    top: -45px;
    transition-delay: 225ms
}

ul.navbar-nav li:nth-child(4) {
    top: -45px;
    transition-delay: 300ms
}

ul.navbar-nav li:nth-child(5) {
    top: -45px;
    transition-delay: 375ms
}

ul.navbar-nav li:nth-child(6) {
    top: -45px;
    transition-delay: 450ms
}

ul.navbar-nav li:nth-child(7) {
    top: -45px;
    transition-delay: 525ms
}


ul.navbar-nav.nav-down.loaded li:nth-child(1),
ul.navbar-nav.nav-down.loaded li:nth-child(2),
ul.navbar-nav.nav-down.loaded li:nth-child(3),
ul.navbar-nav.nav-down.loaded li:nth-child(4),
ul.navbar-nav.nav-down.loaded li:nth-child(5),
ul.navbar-nav.nav-down.loaded li:nth-child(6),
ul.navbar-nav.nav-down.loaded li:nth-child(7) {
    top: 0px;
}

.navbar-fixed-top.solid {
    background-color: rgba(36, 37, 41, 0.8);
}

.navbar-fixed-top.transparent {
    transition: all 0.2s ease-out;
    background-color: rgba(36, 37, 41, 0);
}

.underline:hover,
nav .navbar-btn:hover {
    color: #fbba48;
    background-color: transparent !important;
}

@media (min-width: 767px) and (max-width:1023px) {

	html[lang="en"] nav ul.navbar-nav {
	    width: 575px;
	}
	
	html[lang="ca"] nav ul.navbar-nav {
	    width: 565px;
	}
	
	html[lang="es"] nav ul.navbar-nav {
	    width: 575px;
	}
	
	nav ul.navbar-nav li a {
		padding-left: 4px;
		padding-right: 8px;
	}
	
	.lang-nav {
		right: 15px !important;
	}
}

@media (max-width:767px) {

	.navbar-fixed-top.open, 
	.navbar-fixed-top.transparent.open {
	    background-color: rgba(185, 4, 19, 1.0);
	}
	
	nav ul.navbar-nav {
		width: 100vw;
	}
	
	nav ul.navbar-nav li {
		text-align: center;
		margin-left: -40px;
		width: 100vw;
		margin: 0;
		height: 12vh;
	}
	
	nav ul.navbar-nav li a {
		line-height: 10vh;
		font-size: 20px;
	}
	
	ul.navbar-nav li:nth-child(1):hover {
		background-color: #b10513;
	}
	
	ul.navbar-nav li:nth-child(2):hover {
		background-color: #a60512;
	}
	
	ul.navbar-nav li:nth-child(3):hover {
		background-color: #8e0410;
	}
	
	ul.navbar-nav li:nth-child(4):hover {
		background-color: #79030d;
	}
	
	ul.navbar-nav li:nth-child(5):hover {
		background-color: #63030b;
	}
	
	ul.navbar-nav li:nth-child(6):hover {
		background-color: #510309;
	}
	
	ul.lang-nav {
    	right: 15px;
		top: 0;
	}
	
	div.navbar-collapse {
		overflow: hidden;
		min-height: 100vh;
	}
	
	div.navbar-collapse.collapse,
	div.navbar-collapse.collapsing {
		opacity: 0;
		transition: all 0.25s ease-in-out;
	}
	
	div.navbar-collapse.collapsing,
	div.navbar-collapse.collapse.in {
		background-color: rgba(185, 4, 19, 1.0);
	}
	
	div.navbar-collapse.collapse.in {
		opacity: 1;
	}
	
	.lang-nav:hover {
		background-color: rgba(36, 37, 41, 0.8);
	}
}

@media (max-height:414px) {
	nav ul.navbar-nav li a {
		line-height: 7vh;
	}
}

/*
 *********************************************************************
 * HEROS
 * 17/01/2019
  ********************************************************************/
  

.home-hero,
.inner-hero {
    position: relative;
    z-index: 10;
    background-color: #242529;
    width: 100%;
    height: 100vh;
}

.inner-hero {
	height: 95vh;
}

.home-hero-video,
.inner-hero-video,
.home-hero-image,
.inner-hero-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #225599;
    overflow: hidden;
}

.home-hero-video video,
.inner-hero-video video,
.home-hero-image picture,
.inner-hero-image picture {
    position: absolute;
    bottom: 0;
    height: auto;
    min-width: 100vw;
    min-height: 100%;
    overflow: hidden;
}

.home-hero-video video,
.home-hero-image picture,
.inner-hero-video video,
.inner-hero-image picture {
	background-position: 50% 50%;
	background-size: cover;
}

body#home .home-hero-video video,
body#home .home-hero-image picture {
	background-image:url('../media/images/home-hero-poster.jpg');
}

body#approach .inner-hero-video video,
body#approach .inner-hero-image picture {
	background-image:url('../media/images/approach-hero-poster.jpg');
}

body#projects .inner-hero-video video,
body#projects .inner-hero-image picture {
	background-image:url('../media/images/projects-hero-poster.jpg');
}

body#clients .inner-hero-video video,
body#clients .inner-hero-image picture {
	background-image:url('../media/images/clients-hero-poster.jpg');
}

body#careers .inner-hero-video video,
body#careers .inner-hero-image picture {
	background-image:url('../media/images/careers-hero-poster.jpg');
}

body#contact .inner-hero-video video,
body#contact .inner-hero-image picture {
	background-image:url('../media/images/contact-hero-poster.jpg');
}

body#tienda .inner-hero-video video,
body#tienda .inner-hero-image picture {
	background-image:url('../media/images/tienda-hero-poster.jpg');
}

.home-hero-image picture,
.inner-hero-image picture {
	 position: absolute;
	 top: 0;
	 background-repeat: no-repeat !important;
	 background-position: 100% 100% !important;
	 background-size: cover !important;
}

.home-hero-video:after,
.inner-hero-video:after,
.home-hero-image:after,
.inner-hero-image:after {
    display: block;
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(185, 4, 19, 0.7);
}

#studio .inner-hero-video:after,
#studio .inner-hero-image:after {
	height: 100vh;
    background-color: rgba(34, 85, 153, 0.7);
}

#clients .inner-hero-video:after,
#clients .inner-hero-image:after {
	background-color: rgba(105, 54, 104, 0.8);
}

#approach .inner-hero-video:after,
#approach .inner-hero-image:after {
	background-color: rgba(4, 138, 129, 0.8);
}

#projects .inner-hero-video:after,
#projects .inner-hero-image:after {
    background-color: rgba(0, 175, 181, 0.7);
}

#careers .inner-hero-video:after,
#careers .inner-hero-image:after {
    background-color: rgba(171, 52, 40, 0.8);
}

#contact .inner-hero-video:after,
#contact .inner-hero-image:after {
    background-color: rgba(73, 73, 73, 0.9);
}

#tienda .inner-hero-video:after,
#tienda .inner-hero-image:after {
	background-color: rgba(0, 175, 181, 0.7);
}

.hero-content {
    padding: 30vh 10vw 20vw 10vw;
    position: relative;
}

.inner-hero .hero-content {
    padding: 30vh 20vw 20vw 20vw;
}

@media (max-height: 450px) {

	#projects.case-study .inner-hero .hero-content {
	    padding: 15vh 10vw 0vw 10vw;
	}
}

@media (max-width: 450px) {

	#projects.case-study .inner-hero .hero-content {
	    padding: 20vh 20px 0vw 20px;
	}
}

.hero .section-icon {
	width: 100px;
	height: 100px;
	margin: 0 auto;
}

#clients .hero .section-icon {
	width: 210px;
}

#clients .hero .section-icon svg {
	margin-left: 30px;
}

#projects .hero .section-icon{
	width: 90px;
}

#careers .hero .section-icon {
	width: 180px;
}

#projects.case-study .hero .section-icon,
#projects.case-study .hero .section-icon img {
    width: 300px;
}

#projects.case-study .hero .section-icon img {
	margin: 0 auto;
}

@media (max-width: 520px) {
	#projects.case-study .hero .section-icon,
	#projects.case-study .hero .section-icon img {
	    width: 195px;
	}
}

.hero .section-icon svg {
	fill: #ffffff !important;
}

.hero-content h1 {
    font-size: 40px;
    color: #ffffff;
    font-weight: 200;
}

.inner-hero .hero-content h1 {
	font-size: 34px;
	text-transform: uppercase;
	text-align: center;
}

.hero-content .subtitle {
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    color: #ffffff;
    font-size: 16px;
	padding-top: 50px;
}

.inner-hero  .line-tag {
    text-align: center;
    font-size: 22px;
    color: #ffffff;
    font-weight: 300;
}

.inner-hero h1::after,
.home-hero p.hero-text::before {
    background: #fbba48;
    content: '';
    display: block;
    height: 4px;
    margin: 20px auto;
    width: 40px;
}

.home-hero p.hero-text::before {
	margin: 10px auto;
	left: -40px;
	position: absolute;
}

.bottom-controls {
    position: absolute;
    text-align: center;
    bottom: 30px;
    width: 100%;
}

.scroll-indicator {
    background: transparent;
    border: none;
    display: block;
    height: 50px;
}


.scroll-indicator svg path {
    fill: white;
}

@media (max-height:530px) {
	
	.bottom-controls {
		display: none;
	}
}

@media (max-width:1024px) {
	
	.bottom-controls {
    	bottom: 30px;
	}
}

@media (max-width:767px) {
	
	.hero-content {
	    padding-top: 20vh;
	}

	.hero-content h1 {
	    font-size: 24px;
	}
	
	.hero-content .subtitle div {
		margin-top: 20px;
		padding-right: 0px;
		padding-left: 0px;
	}
}

@media (max-width:767px) {
	
	.home-hero p.hero-text::before {
	    left: -35px;
	}
	
	.home-hero p.hero-text::before {
    	width: 30px;
	}
}

@media (max-width:500px) {

	.hero-content {
	    padding-top:15vh;
	}
	
	.hero-content h1 {
	    font-size: 8vw;
	}
}

@media (max-height:375px) {
	
	.bottom-controls {
		bottom: 40px;
	}
}

/*
 *********************************************************************
 * TIENDA
 * 18/05/2020
  ********************************************************************/

#tienda .inner-hero,
#tienda .content,
#tienda header .heading,
#tienda section .middle,
#tienda section:not(#our-projects-2),
#tienda .inner-hero-video::after, 
#tienda .inner-hero-image::after,
#tienda .dynamic-block picture {
	height: 100vh;
	min-height: 100vh;
}

#tienda .inner-hero,
#tienda .content {
	display: table;
}

#tienda .heading {
	display: table;
	float: none;
}

#tienda section:not(#our-projects-2) {
	padding: 0 10vw 0px 10vw;
	position: relative;
}

#our-projects-1 {
	height: auto !important;
	min-height: 450px !important;
	padding: 0 10vw 0 10vw !important;
	margin-top: 5px;
	background-color: #f5f5f5 !important;
}

#tienda section#our-projects-1 .navbar-brand span.brand,
#tienda section#contact-us .navbar-brand span.brand, #contact-us,
#contact-us a {
	color: black;
}

#tienda header, #offer, #solution {
	color: white;
}

#tienda section .navbar-brand {
	width: 200px;
	top: 0;
	left: 100px;
	position: absolute;
}

#tienda header .heading,
#tienda section .middle {
	padding: 0px 40px;
	display: table-cell;
	vertical-align: middle;
}

#tienda h1 {
	font-size: 70px;
	line-height: 70px;
}

#tienda h2 {
	font-size: 20px;
	line-height: 30px;
	margin-bottom: 50px;
	margin-top: 30px;
}

#tienda .inner-hero h1 {
	/*text-shadow: 10px 10px 10px rgba(0,0,0,0.5);*/
}

#tienda .inner-hero h2,
#tienda .inner-hero p {
	/*text-shadow: 5px 5px 5px rgba(0,0,0,0.5);*/
	line-height: 30px;
}

#tienda .inner-hero h1::after {
	display: none;
}

#tienda h1, 
#tienda .number {
	font-family: 'Work Sans', sans-serif;
}

#tienda a.button {
	background: #a60512 !important;
	border-color: #a60512 !important;
	color: white;
	margin-top: 80px;
	margin-bottom: 0;
}

#tienda a.button:hover {
	background: white !important;
	border-color: white !important;
	color: #a60512;
}


#tienda section h2, #tienda section p, #tienda section li,
#tienda .heading h2, #tienda .heading p, #tienda .heading li,
#tienda span.label {
	font-family: 'Merriweather', serif;
}

#tienda #contact-us h2 {
	margin-top: 10px;
	padding-bottom: 0px;
}

#tienda header p,
#tienda section p,
#tienda span.label {
	font-size: 18px;
	line-height: 24px;
}

#tienda header p {
	margin: 20px 0 20px;
	font-size: 20px;
}

#tienda #offer .heading {
	border-bottom: 2px solid white;
	padding-bottom: 20px;
	padding-left: 0px;
	padding-right: 0px;
	position: relative;
}

#tienda #offer .tag,
#tienda #offer .offer {
	display: table-cell;
	vertical-align: middle;
	float: none;
}

#tienda #offer .inner-hero-image::after {
	background-color: rgba(0, 0, 0, 0.5);
}

#tienda #solution .inner-hero-image::after {
	background-color:  rgba(0, 0, 0, 0.8);
}


#tienda #offer p {
	font-size: 16px;
	line-height: 22px;
}

#tienda #offer .stat-block .label {
	font-weight: normal !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
    color: white !important;
}

#tienda .dynamic-block picture {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: 50% 50% !important;
    width: 100vw;
}

#offer .stat-block {
	margin-top: 50px;
    width: 40% !important;
}

#offer .stat-block:nth-child(2) {
    width: 60% !important;
}

#offer .number {
	padding: 10px 0;
}

#solution .inner-hero-image:after {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

#contact-us .inner-hero-image:after {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

.two-columns {
	border-top: 2px solid white;
	margin-top: 100px;
	padding-top: 50px;
	column-count: 2;
	color: white;
}

#tienda .head {
	width: 100% !important;
	position: relative;
	display: block;
	margin-bottom: 10px;
	font-size: 16px;
}

#tienda .head::before {
	position: absolute !important;
    top: 10px !important;
    margin-left: -30px !important;
    width: 20px !important;
    height: 2px !important;
    background-color: white !important;
}

#our-projects-1 p {
	margin-top: 50px;
}

.projects-intro {
	padding-top: 100px;
}

.projects-display {
	background-color: #f5f5f5;
}

#tienda picture.square {
	/*width: calc(20vw - 15px);*/
}

#tienda picture.square.bottom {
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

#tienda picture.small.left {
    background-position: 50% 50% !important;
}


#tienda hr {
	height: 0 !important;
	margin: 0 !important;
}

#contact-us h2 {
    font-size: 30px;
    margin: 10px 0;
}

@media (max-width:1240px) {

	#tienda #offer .tag,
	#tienda #offer .offer {
		float: left;
	}
	
	.two-columns {
		column-count: 1;
		margin-top: 20px;
	}
	
	#tienda h1 {
		font-size: 50px;
		line-height: 50px;
	}
	
	span.number {
		font-size: 50px !important;
	}

	#tienda h2 {
		font-size: 16px;
		line-height: 22px;
		margin-bottom: 50px;
		margin-top: 30px;
	}
	
	#tienda #contact-us h2 {
		font-size: 18px;
		margin-bottom: 0px;
		margin-top: 0px;
	}

	#tienda header p, #tienda section p, #tienda span.label {
    	font-size: 16px;
		line-height: 22px;
	}
	
	#tienda #offer p {
	    font-size: 14px;
	    line-height: 20px;
	}
}


@media (max-width:767px) {

	#tienda .inner-hero,
	#tienda .content,
	#tienda header .heading,
	#tienda section .middle,
	#tienda section:not(#our-projects-2) {
		height: auto;
		min-height: 50vh;
		padding: 20px 20px;
	}
	
	#tienda header .heading,
	#tienda #contact-us .content {
		padding: 40px 20px;
	}
	
	#tienda section:not(#our-projects-2) {
		padding: 0px;
	}
	
	#offer .stat-block {
    	width: 100% !important;
	}
	
	#our-projects-1 .flex {
		display: block;
	}
	
	#our-projects-1 .flex img {
		display: none;
	}
	
	#tienda h1 {
		font-size: 40px;
		line-height: 40px !important;
	}
	
	#offer .stat-block {
    	margin-top: 20px;
    	min-height: 110px;
	}
	
	#offer .stat-block:nth-child(2) {
		width: 100% !important;
	}
		
	span.number {
		font-size: 40px !important;
	}

	#tienda h2 {
		font-size: 14px;
		line-height: 20px !important;
		margin-bottom: 0px !important;
		margin-top: 0px !important;
	}
	
	#tienda #contact-us h2 {
		font-size: 16px;
		margin-bottom: 0px;
		margin-top: 0px;
	}

	
	#tienda header p, #tienda section p, #tienda span.label {
    	font-size: 14px;
		line-height: 20px;
	}
	
	#tienda #offer p, #tienda .head {
	    font-size: 12px;
	    line-height: 18px;
	}
	
	#tienda .images-block picture.slim {
    	background-position: 100% 100% !important;
    }
    
    #tienda #contact-us.dynamic-block picture {
	    height: auto;
		min-height: 50vh;
	    background-position: 0 0;
	    background-size: contain;
    }
    
    #tienda section.images-block {
	    margin-top: 0px !important;
    	padding-bottom: 0px !important;
	}
}

/*
 *********************************************************************
 * PROJECTS
 * 17/01/2019
  ********************************************************************/

#home #projects h2 {
	margin-bottom: 50px;
}

#projects .portfolio {
	margin-bottom: 70px;
}

.project-portfolio:after {
    content: '';
    display: block;
    clear: both;
}

#filters {
	padding: 0 5px 20px 5px;
	height: 100px;
}

#filters button {
	position: relative;
	overflow: hidden;
	white-space: nowrap !important;
	border-bottom: 2px solid #dbdbdb;
	padding: 4px 14px;
	margin-right: 4px;
	margin-bottom: 4px;
	border-radius: 0;
	color: #434343;
	width: calc(12.50vw - 9.8px);
	height: 70px;
	float:left;
	font-weight: 900;
	font-size: 12px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-color: transparent;
	z-index: 1;
}

#filters button:last-child {
	margin-right: 0;
}

#filters button.is-checked,
#filters button.is-checked:hover {
	background-color: rgba(0, 175, 181, 0.7);
	color: #ffffff;
	border: 4px solid rgba(0, 175, 181, 0.7);
}

#filters button:before,
#filters button.is-checked:before {
	overflow: hidden;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	width: 100%;
	height: 100%;
	content: " ";
	position: absolute;
	pointer-events: none;
	z-index: -1;
}

#filters button.is-checked:before {
	border: 2px solid #fff;
	background-color: rgba(0, 175, 181, 0.7)
}

#filters button:hover {
	color: #ffffff;
	background-color: rgba(251,186,72,1.0);
	border-color: rgba(251,186,72,1.0);
}

/*#filters button:hover:before,
#filters button:focus:before {
	background-color: rgba(251,186,72,1.0);
	border: 2px solid #ffffff;
}

#filters button:hover:before,
#filters button:focus:before {
	border: 5px solid rgba(251,186,72,1.0);
	background-position: 100% 50%;
}*/

@media (max-width:992px) {
	
	#filters button {
		font-size: 8px; 
	}
	
	
	#filters button.is-checked:before {
		border: 2px solid #fff;
	}
}


@media (max-width:767px) {
	#filters,
	.legend { 
		display: none; 
	}
}

.project {
    padding: 5px;
	-webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.project:hover {
    transform: scale(0.98);
}

.project .content {
    background: linear-gradient(to bottom, rgba(36, 37, 41, 0), rgba(36, 37, 41, 0.2) 30%, rgba(0, 0, 0, 0.5));
    bottom: 5px;
    left: 5px;
    padding: 30% 20px 10px 20px;
    position: absolute;
    width: calc(100% - 10px);
    z-index: 11;
}

.project .slide {
    background-size: 100.3% 100%;
    background-position: -1px -1px;
    background-repeat: no-repeat;
}

.in-view .project .google 		{ background-image: url('../media/images/google.jpg'); }
.in-view .project .modernisme 	{ background-image: url('../media/images/modernisme.jpg'); }
.in-view .project .red 			{ background-image: url('../media/images/red.jpg'); }
.in-view .project .discographic { background-image: url('../media/images/discographic.jpg'); }
.in-view .project .salle 		{ background-image: url('../media/images/salle.jpg'); }
.in-view .project .doc 			{ background-image: url('../media/images/doc.jpg'); }
.in-view .project .benjamin 	{ background-image: url('../media/images/benjamin.jpg'); }
.in-view .project .bk 			{ background-image: url('../media/images/bk.jpg'); }
.in-view .project .kioskos 		{ background-image: url('../media/images/kioskos.jpg'); }
.in-view .project .plus 		{ background-image: url('../media/images/plus.jpg'); }
.in-view .project .sc 			{ background-image: url('../media/images/sc.jpg'); }
.in-view .project .microsites 	{ background-image: url('../media/images/microsites.jpg'); }
.in-view .project .aepj 		{ background-image: url('../media/images/aepj.jpg'); }
.in-view .project .rasgo 		{ background-image: url('../media/images/rasgo.jpg'); }
.in-view .project .ata 			{ background-image: url('../media/images/ata.jpg'); }
.in-view .project .incubator 	{ background-image: url('../media/images/incubator.jpg'); }
.in-view .project .ns 			{ background-image: url('../media/images/ns.jpg'); }
.in-view .project .jpo 			{ background-image: url('../media/images/salle.jpg'); }

.project.double-width .slide,
.project.double-height .slide {
    background-size: cover;
}

.project .category,
.project .description,
.project .name {
    display: block;
}

.project .category {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1.715;
    text-transform: uppercase;
    color: #fff;
    line-height: 1;
}

.project .description {
    color: #ffffff;
}

.project .name {
    margin-bottom: -2.8125rem;
    margin-top: 1.25rem;
    opacity: 0;
    transition: margin-bottom 600ms cubic-bezier(0.14, 0.58, 0.18, 1), opacity 300ms ease-out;
    color: #ffffff;
}

.project:hover .name {
    margin-bottom: 10px;
    opacity: 1;
}

.case-study-link {
    min-height: 200px;
    display: block;
}

/*.case-study-link:after {
	display:block;
	position: absolute;
	content: " ";
	bottom: 0;
	left: 0;
	width: calc(100% - 10px);
	margin: 5px;
	height: 0;
	background: rgba(185,19,24,0.5);
	z-index: 10;
	-webkit-transition: all 700ms cubic-bezier(0.995, 0.010, 0.020, 1.000); 
	   -moz-transition: all 500ms cubic-bezier(0.995, 0.010, 0.020, 1.000); 
		-ms-transition: all 500ms cubic-bezier(0.995, 0.010, 0.020, 1.000); 
		 -o-transition: all 500ms cubic-bezier(0.995, 0.010, 0.020, 1.000); 
			transition: all 500ms cubic-bezier(0.995, 0.010, 0.020, 1.000);
	
	-webkit-transition-timing-function: cubic-bezier(0.995, 0.010, 0.020, 1.000); 
	   -moz-transition-timing-function: cubic-bezier(0.995, 0.010, 0.020, 1.000); 
		-ms-transition-timing-function: cubic-bezier(0.995, 0.010, 0.020, 1.000); 
		 -o-transition-timing-function: cubic-bezier(0.995, 0.010, 0.020, 1.000); 
			transition-timing-function: cubic-bezier(0.995, 0.010, 0.020, 1.000);

	-moz-transition-duration: 1s;
}

.case-study-link:hover:after {
	height: calc(100% - 10px);
}*/



@media (min-width:1200px) {
    .case-study-link {
        height: calc(25vw - 10px);
    }
    .double-height .case-study-link {
        height: calc(50vw - 10px);
    }
    .triple-height .case-study-link {
        height: calc(75vw - 10px);
    }
    .double-width .case-study-link {
        width: calc(50vw - 30px);
    }
}

@media (max-width:1200px) {
    .case-study-link {
        height: calc(33.333vw - 10px);
    }
    .double-height .case-study-link {
        height: calc(66.333vw - 5px);
    }
    .triple-height .case-study-link {
        height: calc(66.666vw - 10px);
    }
    .double-width .case-study-link {
        height: calc(33.333vw - 10px);
    }
    .triple-height .slide {
        background-size: cover;
    }
}

@media (max-width:992px) {
    .case-study-link {
        height: calc(50vw - 10px);
    }
    .double-height .case-study-link {
        height: calc(100vw - 10px);
    }
    .triple-height .case-study-link {
        height: calc(100vw - 10px);
    }
    .double-width .case-study-link {
        height: calc(50vw - 10px);
    }
}

@media (max-width:767px) {
    .case-study-link {
        height: calc(100vw - 40px);
    }
    .double-height .case-study-link,
    .triple-height .case-study-link  {
        height: calc(100vw - 40px);
    }
    .triple-height .case-study-link {
        height: calc(100vw - 10px);
    }
    .double-width .case-study-link {
        height: calc(100vw - 40px);
    }
}



/*
 *********************************************************************
 * CLIENTS
 * 17/01/2019
  ********************************************************************/

.clients {
    padding-bottom: 100px;
}

.client-list {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    list-style: none;
    margin: 0 3%;
    padding: 0;
}

.client-item {
    width: 20vw;
    height: 20vw;
    max-width: 200px;
    max-height: 200px;
    text-indent: -3000px
}

@media (min-width:1380px) {
    .client-list {
        max-width: 1280px;
        margin: 0 auto;
    }
}

@media (max-width:962px) {
    .client-item {
        width: 33.333vw;
        height: 33.333vw;
    }
}

@media (max-width:768px) {
    .client-item {
        width: 400px;
        height: 400px;
        margin: 0 auto;
    }
}

@media (max-width:470px) {
    .client-item {
        width: 200px;
        height: 160px;
    }
}

.client-item.in-view {
	background: transparent url('../media/images/client-sprite.png');
	background-repeat: no-repeat;
}

.client-item.aepj {
    background-position: 0px 0px;
}

.client-item.fcb {
    background-position: -800px 0px;
}

.client-item.doc {
    background-position: -200px 0px;
}

.client-item.call {
    background-position: -400px 0px;
}

.client-item.plus {
    background-position: -600px 0px;
}

.client-item.google {
    background-position: -400px -600px;
}

.client-item.red {
    background-position: -200px -600px;
}

.client-item.modernisme {
    background-position: 0px -200px;
}

.client-item.ub {
    background-position: -200px -200px;
}

.client-item.il3 {
    background-position: -400px -200px;
}

.client-item.cvc {
    background-position: -200px -400px;
}

.client-item.medulas {
    background-position: 0px -400px;
}

.client-item.uoc {
    background-position: -400px -400px;
}

.client-item.cohen {
    background-position: -600px -400px;
}

.client-item.salle,
.client-item.jpo {
    background-position: -800px -400px;
}

.client-item.gencat {
    background-position: -800px -600px;
}

.client-item.mac {
    background-position: -600px -600px;
}

.client-item.udg {
    background-position: 0px -600px;
}

.client-item.atapuerca {
    background-position: -600px -200px;
}

.client-item.telefonica {
    background-position: -800px -200px;
}

/*
 *********************************************************************
 * STATS BLOCKS
 * 22/01/2019
  ********************************************************************/

section#stats {
	padding-top: 0px;
	padding-bottom: 0px;
	height: 220px;
}

section#stats ul {
	padding: 0;
}

li.stats-block {
	height: 220px;
	display: block;
	padding: 5px;
	margin: 5px 0;
}

li.stats-block .wrapper {
	height: 220px;
	background-color: #efefef;
	border-radius: 4px;
	display: block;
	padding: 20px 40px;
	color: #ffffff;
}

li.stats-block .wrapper:after {
	position: absolute;
	display: block;
	content: " ";
	left: 0;
	bottom: -5px;
	top: 0;
	right: 0;
	margin: 5px 5px 0px 5px;
	border-radius: 4px;
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */
}

li.stats-block .wrapper.first {
	background-color: #ff7700;
}

li.stats-block .wrapper.second {
	background-color: #efd28d;
}

li.stats-block .wrapper.third {
	background-color: #00afb5;
}

li.stats-block .wrapper.fourth {
	background-color: #004777;
}

li.stats-block .wrapper span {
	display: block;
	position: relative;
	z-index: 100;
}

li.stats-block .wrapper .icon {
	display: block;
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 100;
	width: 100px;
	height: 100px; 
}

li.stats-block .wrapper.second .icon {
	top: -20px;
	right: 0px;
	width: 150px;
}

li.stats-block .wrapper.third .icon {
	top: 20px;
	right: 20px;
	width: 80px;
	height: 80px;
}

li.stats-block .wrapper.fourth .icon {
	top: 20px;
	right: 20px;
	width: 80px;
	height: 80px;
}

.vi-primary {
	fill: #ff7700;
}

.vi-primary {
	fill-rule: evenodd;
}

.vi-accent {
	fill: #cf6202;
}


li.stats-block .wrapper .fact {
	font-size: 60px;
	font-weight: 900;
}

li.stats-block .wrapper .concept {
	font-size: 30px;
	margin-top: -25px;
	text-transform: lowercase;
}

li.stats-block .wrapper .description {
	font-size: 24px;
	position: absolute;
	bottom: 20px;
	text-align: center;
	width: calc(100% - 80px);
}

@media (max-width: 1400px) {
	
	#stats.dynamic-block {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

@media (max-width: 1199px) {
	
	#stats ul {
		max-width: 620px;
		margin: 0 auto;
	}
}

@media (min-width: 1199px) {
	
	#like ul {
		max-width: 1000px;
		margin: 0 auto;
	}
}

#like {
	padding-top: 50px;
	padding-bottom: 50px;
}

#like ul {
	margin-bottom: 0px;
}
#like ul,
#like li {
	position: relative;
}


/*
 *********************************************************************
 * WHAT WE MAKE
 * 23/01/2019
  ********************************************************************/

#make {
	background-color: #225599;
	min-height: 550px;
	padding-top: 100px;
	padding-bottom: 100px !important;
	color: #ffffff;
	position: relative;
	background-position: 50% 50%;
	background-repeat: repeat;
	background-size: cover;
}

#make .smallcaps {
	margin-left: -30px;
}

.list {
	max-width: 800px;
	padding-left: 0px;
	position: relative;
}

section#make {
	padding-bottom: 0px;
}

#make .list ul.large li {
	font-size: 40px;
	font-weight: 200;
	padding: 4px 20px;
	display: block;
	cursor: pointer;
	transition: all 0.25s ease-in-out;
}


@media (max-width: 767px) {
	
	#make {
    	padding-top: 50px;
    	padding-bottom: 0px !important;
    }
	
	#make .smallcaps {
		margin-left: 0px;
	}
	#make .list ul.large li {
		font-size: 25px;
		padding: 4px 0px;
	}
}

@media (max-width: 500px) {
	
	#make .smallcaps {
		margin-left: 0px;
		text-align: center;
	}
}

#make .list ul.large li:hover {
	background-color: #fbba48;
}

#make.consulting {
	background-image: url('../media/images/modernisme.jpg'); 
}

#make.web {
	background-image: url('../media/images/red.jpg');
}

#make.mobile {
	background-image: url('../media/images/discographic.jpg');
}

#make.cms {
	background-image: url('../media/images/salle.jpg');
}

#make.si {
	background-image: url('../media/images/google.jpg');
}

#make.wp {
	background-image: url('../media/images/benjamin.jpg');
}

#make.programming{
	background-image: url('../media/images/doc.jpg');
}

#make.seo{
	background-image: url('../media/images/incubator.jpg');
}

#make:before {
	position: absolute;
	content: " ";
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background-color: rgba(34,85,153,0.95);
}


/*
 *********************************************************************
 * IMAGES BLOCKS
 * 22/01/2019
  ********************************************************************/

section.image-single {
	padding: 0 !important;
}

section.image-single picture.full {
	position: relative;
	display: block;
	background-size: cover !important;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 100%;
	min-height: 580px;
	max-height: 800px;
	padding: 0;
 }
  
 section.images-block {
    margin-top: 4px;
	padding-top: 0px;
	padding-bottom: 4px;
 }

.images-block {
	position: relative;
	padding: 50px 0 0 0;
	height: calc(40vw + 4px);
}

.image-block.last-block {
	overflow: hidden;
}

.images-block picture {
	position: relative;
    display: block;
	background-repeat: no-repeat;
	background-position: 100% 67% !important;	
	background-size: cover !important;
	overflow: hidden;
	
}

.images-block picture.large {
	width: 50vw;
    height: 25vw;
}

.images-block picture.slim {
	position: absolute;
	width: 50vw;
    height: calc(15vw - 4px);
    bottom: 4px;
    background-position:50% 50% !important;
    margin-top: 4px;
}

.images-block picture.small {
	width: calc(30vw -  8px);
    height: 40vw;
    margin-left: 4px;
    margin-right: 4px;
}

#projects.salle .images-block picture.small,
#projects.jpo .images-block picture.small {
    margin-left: 0px;
}

.images-block picture.square {
	width: 18.8vw;
    height: 20vw;
}

.images-block picture.square.top {
	width: 18.8vw;
    height: calc(20vw -  4px);
    margin-bottom: 4px;
}

.images-block picture.left {
	float: left;
}

.images-block picture.right {
	float: right;
}

@media (max-width: 992px) {
	
	section.image-single picture.full {
		    min-height: 280px;
	}
}

@media (max-width: 767px) {
	
	.images-block {
		height: auto;
	}
	
	.images-block picture {
		position: relative !important;
		width: 100vw !important;
	    height: 100vw !important;
	    margin: 0 0 4px 0 !important;
	    float: none !important;
	}
	
	.images-block picture.slim {
    	bottom: 0px;
    }
}	

.img900 {
	max-width: 900px;
}

/*
 *********************************************************************
 * APPROACH LIST
 * 28/01/2019
  ********************************************************************/

#approach .head::before {
    background-color: #048a81;
}

ol.list-approach  {
	counter-reset:_section-counter;
	list-style:none;
	padding: 0 60px 0;
}

ol.list-approach li {
 	counter-increment:_section-counter;
 	position:relative
}

ol.list-approach li span.title {
	font-weight: 700;
}

ol.list-approach .content::after {
    font-size: 80px;
    font-weight: 500;
    line-height: 1;
    color: #dbdbdb;
    content: counter(_section-counter, decimal-leading-zero);
    left: 10px;
    position: absolute;
    text-align: right;
    top: 0;
    width: 60px;
}

ol.list-approach .content-container::before {
    position: absolute;
    display: block;
    content: " ";
    width: 40px;
    height: 4px;
    background: #048a81;
    top: -10px;
    left: 15px;
}

ol.list-approach .content {
    display: block;
    margin: 0;
    padding: 5px 0 5px 110px;
    position: relative;
    font-size: 18px;
}

.list-approach .image-container {
	/*width: 50%;*/
	max-height: 600px !important;
	overflow: hidden;
}

.list-approach .image-container.mobile {
		display: none;
}

.list-approach img {
	display: block;
	width: 100%;
	max-width: 720px;
	margin-top: 40px;
	margin-bottom: 40px;
}

#approach .images-block .small,
#projects.modernisme.case-study .images-block .small,
#projects.discographic.case-study .images-block .small {
	position: absolute;
	top: 0;
	left: 20vw;
}

#approach .images-block .square.large,
#projects.case-study .images-block .square.large  {
	position: absolute;
	top: 0;
	width: 50vw;
	height: 40vw;
	left: 50vw;
}

#projects.case-study.salle .images-block .square.large,
#projects.case-study.jpo .images-block .square.large {
	left: 50vw;
}

#projects.case-study .images-block picture {
	background-position: 50% 50% !important;
}

@media (max-width: 768px) {
	
	#approach .images-block .small,
	#projects.modernisme.case-study .images-block .small,
	#projects.discographic.case-study .images-block .small {
		left: 0px;
	}
	
	#approach .images-block .square.large,
	#projects.case-study .images-block .square.large,
	#projects.case-study.salle .images-block .square.large,
	#projects.case-study.jpo .images-block .square.large {
    	left: 0vw;
	}
}

.columns {
    padding-top: 1.5rem;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto;
    max-width: 1440px;
    width: 100%;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.column-one {
    width: 50%;
    padding-right: 15px
}

.column-two {
    width: 50%;
    padding-left: 15px;
}

section.image-block,
section.image-block div {
	width: 100%;
	height: 800px;
}

section.image-block div {
	background-size: cover;
	background-position: 0% 50%;
}

section.feature {
    width: 50%;
    padding: 100px 0 100px 0;
    margin: 0 auto;
}

@media (max-width: 1380px) {

	.case-study section.feature {
    	width: 80%;
	}
	
	.case-study section.feature.results {
    	width: 50%;
	}
}

@media (max-width:1024px) {
	
	ol.list-approach li {
		padding-bottom: 40px;
	}
	
	ol.list-approach .content {
    	font-size: 14px;
	}
	
	section.feature {
    	width: 58%;
    	padding: 70px 0 70px 0;
	}
}


@media (max-width:1023px) {
	
	.list-approach .image-container {
		/*width: 90%;*/
	}
	
	.list-approach .image-container.desktop {
		display: none;
	}
	
	.list-approach .image-container.mobile {
		display: block;
	}
	
	section.feature {
		width: 80%;
	}
	
	.column-one, 
	.column-two {
    	width: 100%;
		padding-right: 0px;
		padding-left: 0px;
	}

}

@media (max-width: 767px) {

	ol.list-approach  {
		padding: 0 0 0 0;
	}
	
	section.image-block, 
	section.image-block div {
	    height: 400px;
	}
}

/*
 *********************************************************************
 * CONTACT PAGE
 * 24/1/2019
 **********************************************************************/
 
 section.form {
	 padding-top: 0;
	 padding-left: 0;
	 padding-right: 0;
	 clear: both;
 }
 
 section.form .container {
	 max-width: 900px;
 }
 
 section.form .heading {
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
 }

#contact .head::before {
    background-color: #555555;
}

#contact p.large {
    padding-left: 150px;
}

@media (max-width: 1023px) {
	
	.address h2 {
	    margin-left: 0px;
	}
	
	#contact p.large {
    	padding-left: 60px;
    	top: 0;
	}
}

@media (max-width: 767px) {
	
	#contact p.large {
    	padding-left: 0px;
	}
}
 
#thank_you {
    position: fixed;
    display: none;
    top: 0;
    width: 100vw;
    height: 100vh;
	padding: 0vh 10vh;
    background: #1cadba;
    z-index: -1;
    text-align: center;
}

#thank_you h1 {
	color: #ffffff;
	font-size: 60px;
    font-weight: 300;
    padding-top: 80px;
    line-height: 1.0em;
}

#thank_you h2 {
	color: #ffffff;
	font-size: 30px;
    font-weight: 300;
    padding: 40px 15vw 0 15vw;
    line-height: 1.0em;
}

#thank_you p {
	color: #ffffff;
    text-align: center;
    font-size: 20px;
    line-height: 20px;
    padding-bottom: 10px;
    letter-spacing: 0px;
    margin-top: 55px;
}

#thank_you a.button {
	background-color: transparent;
	border-color: #ffffff;
	color: #ffffff;
	margin-top: 40px !important;
}

#thank_you ul {
	width: 420px;
	height: 140px;
	margin: 20px auto;
	padding: 0;
}

#thank_you ul li {
	width: 100px;
	height: 100px;
	margin: 20px;
	float: left;
	border-radius: 20px;
	overflow: hidden;
}

#thank_you ul li a svg path,
#thank_you ul li a svg rect {
	transition: all 0.25s ease-in-out;
}

#thank_you ul li a svg path,
#thank_you ul li a svg rect {
	fill: #ffffff;
}

#thank_you ul li a svg:hover path,
#thank_you ul li a svg:hover rect {
	fill: #fbba48 !important;
}

#thank_you ul li a svg path.tt-bird,
#thank_you ul li a svg:hover path.tt-bird {
	fill: #1cadba !important;
}

@media (max-width: 767px) {
	
	#thank_you {
    	width: 100vw;
		padding: 0vh 20px;
	}
	
	#thank_you h1 {
    	padding-top: 20px;
	}
	
	#thank_you h2 {
		font-size: 20px;
		padding: 20px 20px 0 20px;
	}
	
	#thank_you p {
	    font-size: 14px;
		line-height: 14px;
		margin-top: 35px;
	}
	
	#thank_you a.button {
		margin-top: 0px !important;
	}
	
	#thank_you ul {
		width: 270px;
		height: 90px;
		margin: 40px auto;
	}
	
	#thank_you ul li {
		width: 70px;
		height: 70px;
		margin: 10px;
		border-radius: 10px;
	}
}

@media (max-height: 768px) {
	
	#thank_you h1 {
    	padding-top: 20px;
	}
	
	#thank_you h2 {
		font-size: 20px;
		padding: 20px 20px 0 20px;
	}
	
	#thank_you p {
	    font-size: 14px;
		line-height: 14px;
		margin-top: 35px;
	}
	
	#thank_you a.button {
		margin-top: 20px;
	}
	
	#thank_you ul {
		width: 270px;
		height: 90px;
		margin: 40px auto;
	}
	
	#thank_you ul li {
		width: 70px;
		height: 70px;
		margin: 10px;
		border-radius: 10px;
	}
}

form {
	position: relative;
}

fieldset {
    margin: 40px 0 0 0;
    padding: 0;
    border: none;
    background: white;
}

fieldset.submit {
	margin-bottom: 100px;
}

.application-field {
	display: inline-block;
	width: 100%;
	height: 42px;
}

.field {
    position: relative;
    margin-bottom: 28px;
}

.field.email-field {
    padding-right: 8px;
    float: left;
    width: calc(50% - 1px);
}

.field.phone-field {
    padding-left: 8px;
    float: right;
    width: calc(50% - 1px);
}

#email {
	display: none !important; /*honeypot*/
}

.row {
	z-index: 1;
}

fieldset input[type='text'], 
fieldset input[type='number'], 
fieldset input[type='password'], 
fieldset input[type='email'], 
fieldset input[type='tel'], 
select,
textarea {
    display: block;
    width: 100%;
    padding: 17px 30px 17px 20px;
    border-style:solid;
    border: 1px solid #dbdbdb;
    border-radius: 0px;
    background-color: #fbfbfb;
    box-shadow: none;
    font-size: 18px;
    line-height: 1.2;
    outline: none;
    -webkit-appearance: none;
    -webkit-transition: border-color 0.5s ease;
    transition: border-color 0.5s ease;
}

fieldset .has-error input[type='text'], 
fieldset .has-error input[type='number'], 
fieldset .has-error input[type='password'], 
fieldset .has-error input[type='email'], 
fieldset .has-error input[type='tel'], 
fieldset .has-error textarea,
fieldset .has-error select,
fieldset .application-field.has-error label.attach-button {
    border: 1px solid #a60512;
}

select {
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #dbdbdb, #dbdbdb);
  background-position:
    calc(100% - 20px) calc(1.8em + 2px),
    calc(100% - 15px) calc(1.8em + 2px),
    calc(100% - 3em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 2.9em;
  background-repeat: no-repeat;
}

select:focus {
  background-image:
    linear-gradient(45deg, blue 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, blue 50%),
    linear-gradient(to right, #333, #333);
  background-position:
    calc(100% - 15px) 1.8em,
    calc(100% - 20px) 1.8em,
    calc(100% - 3em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 2.9em;
  background-repeat: no-repeat;
  border-color: #555;
  outline: 0;
}


select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

label {
    position: absolute;
    margin-top: 18px;
    margin-left: 18px;
    font-size: 16px;
    color: #adadad;
    transition: 0.2s ease all;
}

div.has-error.option-privacy label {
	padding: 10px;
    border: 1px solid #a60512;
	display: inline-block;
	background: white;
}

div.has-error.option-privacy .error-hint {
	top: 70px;
}

.default-label {
	position: relative;
	z-index: 100;
}

.default-label.success {
	color: #ffffff;
}

.field-required {
	color: #a60512;
	font-size: 20px;
	line-height: 10px;
}

.field.focused label {
	margin-top: -20px;
	margin-left: 2px;
    font-size: 12px;
    color: #555555;
}

.field.focused input,
.field.focused textarea,
.application-field.focused label {
    border: 1px solid #434343;
    border-radius: 0px;
}

div.progress {
	display:block;
	position: absolute;
	top: 0;
	left: 0;
	width: 0%;
	height: 40px;
	background-color: #1cadba;
	border-radius: 0;
}

.focused .field-required {
	font-size: 14px;
}

button, 
input, 
select, 
textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

.error-hint {
    display: none;
    position: absolute;
    right: 17px;
    top: 50%;
    z-index: 1;
    width: 26px;
    height: 23px;
    margin-top: -2px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
			transform: translateY(-50%);
    background: url(../media/ui/icon_alert.svg) no-repeat center;
    cursor: pointer;
}

.error-hint .error-message {
    display: none;
    position: absolute;
    right: -35px;
    bottom: 100%;
    width: 275px;
    margin-bottom: 9px;
    padding: 19px;
    background-color: #ffdc00;
    font-size: 14px;
}

.has-error .error-hint {
	display: block;
}

.error-hint:hover .error-message{
	display:block
}

.error-hint .error-message span {
	display:none;
}

html[lang="es"] .error-hint .error-message span.es {
	display:block;
}

html[lang="ca"] .error-hint .error-message span.ca {
	display:block;
}

html[lang="en"] .error-hint .error-message span.en {
	display:block;
}

.error-hint .error-message::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    bottom: -9px;
    right: 38px;
    border: 10px solid transparent;
    border-bottom-width: 0;
    border-top-color: #ffdc00;
}

fieldset.submit {
	text-align: center;
}
 
.button {
    display: inline-block;
    padding: 10px 50px;
    border: 2px solid transparent;
    border-radius: 4px;
    background-color: #a60512;
    font-size: 17px;
    outline: none;
    -webkit-transition: all 0.3s ease;
    		transition: all 0.3s ease;
}

a.button {
	background-color: transparent;
	border-color: #434343;
	color: #434343;
}

.button,
a.button,
#thank_you a.button {
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-align: center;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	color: #fff;
	height: auto;
	position: relative;
	display: inline-block;
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.33;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

a.button {
	margin: 50px 0 100px 0;
	color: #555555;
}

#overview a.button {
	margin: 50px 0 100px 0;
	color: black;
	border: 2px solid #dbdbdb;
	width: 200px;
	padding: 20px;
}

.button:hover {
    border-color: #a60512;
    background-color: transparent;
    color: #a60512;
    text-decoration: none;
}

a.button:hover {
	background-color: #ffffff;
	border-color: #fbba48;
	color: #fbba48;
}

#thank_you a.button:hover {
	border-color: #fbba48;
	color: #fbba48;
}

.address {
	padding-top: 0px;
	padding-bottom: 100px;
}

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

	.address .row div {
		width: calc(50vw - 40px); 
	}
}

.address img {
	width: 50vw;
	max-width: 720px;
	max-height: 720px;
	
}

.address h2 {
	font-weight: 300 !important;
    margin-left: -65px;
    font-size: 50px;
}

.address p.large {
    top: 0px;
    padding: 40px 0px 20px 50px;
}

.address .button {
	margin: 0 auto;
    width: 250px;
    display: block;
    color: #555555;
}

section.map {
	padding: 0 !important;
	height: 800px;
}

.map-container {
    clear: both;
}

#map {
	position: relative;
    width: 100%;
    height: 800px;
    margin: 0 auto;
    background: #efefef;
}

.map-legend {
    position: relative;
    bottom: 125px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 250px;
    min-height: 57px;
    padding-top: 19px;
    padding-bottom: 17px;
    border-radius: 4px;
    background-color: rgba(73,73,73,0.7);
    font-size: 11px;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
}

.map-legend .pin {
    padding-left: 22px;
    padding-right: 22px;
}

.map-legend .pin::before {
    display: inline-block;
    width: 17px;
    height: 21px;
    position: relative;
    content: " ";
    top: -1px;
    margin-right: 6px;
    vertical-align: middle;
    background: url('../media/ui/map_marker.svg') center no-repeat;
}

.phone-number {
    display: block;
    margin: 0 0  100px 0;
}

.phone-number .number {
    display: block;
    font-weight: 300;
    line-height: 1;
    margin: 1em 0 .5em;
    width: 100%;
    font-size: 40px;
    color: #555;
    display: block;
    margin: 0 auto 1.25rem;
    margin-top: 0px;
    text-align: center;
    text-decoration: none;
}

.phone-number .smallcaps {
    font-weight: 600;
    color: #bdbdbd;
    letter-spacing: 0.2em;
    display: block;
    text-align: center;
    line-height: 1;
}

.icon-paperclip {
	position: relative;
	left: 0;
	top: 2px;
}

.attach-button {
    font-size: 14px;
    line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-align: center;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	color: #434343;
	background: #dbdbdb;
	height: auto;
	position: relative;
	display: inline-block;
	margin: 0;
	margin-right: 0px;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.33;
	padding: 10px 15px;
	padding-left: 15px;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid #dcdcdc;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.application-field input[type="file"] {
    position: absolute;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    top: 0;
    left: 0;
}

@media (max-width: 767px) {
	
	.address img {
		width: 100vw;
		margin-left: -35px;
	}

	.address h2,
	.address p.large {
	    margin-left: 0px;
	    padding-left: 0px;
	    text-align: center;
	}
	
	.address p.large {
		font-size: 18px;
	}
	
	.address .button {
		margin: 0px auto;
		width: 240px;
		display: block;
	}
	
	section.map,
	.map-container,
	#map {
		height: 100vw; 
	}
	
	.map-legend {
	    bottom: 80px;
	}
}


@media screen and (max-width: 550px) {
	
	fieldset input[type='text'], 
	fieldset input[type='number'], 
	fieldset input[type='password'], 
	fieldset input[type='email'], 
	fieldset input[type='tel'], 
	textarea {
    	font-size: 14px !important;
	}
	
	.field.email-field {
    	padding-right: 0px;
    	float: none;
    	width: 100%;
	}

	.field.phone-field {
    	padding-left: 0px;
		float: none;
		width: 100%;
	}
	
	fieldset.submit {
    	text-align: center;
	}
	
	.button {
		font-size: 16px;
		margin-bottom: 0px;
		width: 220px;
	}
	
	.phone-number .number {
		font-size: 30px;
	}
}


/*
 *********************************************************************
 * CAREERS
 * 25/01/2019
  ********************************************************************/


form section h3.smallcaps {
	padding: 0 0 40px 0;
	font-size: 16px;
}

form .head {
	width: auto;
}

form .head::before {
    top: 10px;
    background-color: #ab3428;
}

@media (max-width: 767px) {
	
	form section {
		padding: 30px 0px 0px 0px;
	}
	
	form .head {
		margin-left: 50px;
	}
	
	#careers p.large {
	    padding-left: 0px;
		padding-right: 0px;
	}
}

form label.attach-button,
form label.attach-button:hover {
	text-decoration: none;
	cursor: pointer;
	display: inline-block;
}

form label.attach-button:hover {
	background-color: #555;
	color: #ffffff;
}

form label.attach-button:hover svg.icon-paperclip path {
	fill: #ffffff;
}

#bt_application_submit {
	margin-top: 40px;
}

.privacy {
	margin-top: 100px;
	margin-bottom: 100px;
}

/*
 *********************************************************************
 * QUOTE BLOCK
 * 8/02/2019
  ********************************************************************/
  

section.dynamic-block.quote-block {
	padding: 100px 20% 100px 20%;
}

section.dynamic-block.quote-block.dots {
	background: url('../media/ui/bg-dots.png') repeat-x;
}

@media (max-width: 1380px) {
	
	section.dynamic-block.quote-block {
		padding: 100px 10% 100px 10%;
	}
}

.quote {
	position: relative;
}

.quote h2 {
	font-size: 34px;
	font-weight: 700;
	text-align: left;
}

@media (max-width: 767px) {
	
	.quote h2 {
		font-size: 24px;
	}
}

.strong-quote::before {
    content: '';
    height: .1875rem;
    width: 1.875rem;
    position: absolute;
    left: -3.125rem;
    top: 50%;
    background: #dedede;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.strong-quote {
    color: #17547b;
    font-size: 14px;
    font-weight: 800;
    position: relative;
}


/*
 *********************************************************************
 * DYNAMIC-BLOCKS AND FEATURE-BLOCKS IN CASE STUDIES
 * 9/02/2019
  ********************************************************************/

section.background {
	/*margin-top: 140px;*/
	padding-bottom: 100px;
}

section.background .first-block,
section.background .second-block {
	min-height: 700px;
}

section.background .second-block {
	padding-top: 100px;
	padding-bottom: 100px;
	clear: both;
}

.carousel {
	margin-top: -40px;
}

@media (max-width: 1380px) {
	
	#projects.google .carousel {
	    margin-top: 40px;
	    
	}
	
	section.background .first-block .title {
		padding-top: 40px;
	}
}

@media (max-width: 992px) {
	
	#projects.google .carousel {
	    padding: 0 0 0 10vw;
		margin-top: 40px;
	}
	
	#projects.modernisme .carousel {
	    padding: 0;
		margin-top: 40px;
	}
}

.dynamic-block picture {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: 100% 0% !important;
	display: block;
	width: 100%;
	height: 600px;
}

.dynamic-block .video-left,
.dynamic-block .video-right {
	min-height: 600px;
	position: relative;
	z-index: 100;
}

.dynamic-block .video-right {
	overflow: hidden;
	width: 100%;
	top: -260px;
	margin-bottom: -300px;
}

.dynamic-block .video-right .image-container {
	float: right;
	margin-right: -10vw;
}


.dynamic-block .video-right .image-container img {
	width: auto;
}

.dynamic-block .video-right .feature {
	margin-top: 260px;
}


@media (max-width: 1210px) {

	.dynamic-block .video-right {
    	top: -80px;
    	margin-bottom: -50px;
	}
	
	.dynamic-block .video-right .feature {
    	margin-top: 160px;
	}
	
	.dynamic-block .video-right .image-container {
		margin-right: 0vw;
	}
}

@media (max-width: 992px) {

	.dynamic-block .video-right {
    	top: 0px;
    	margin-bottom: 0px;
	}
	.dynamic-block .video-right .feature {

    	margin-top: 0px;
	}
	
	.dynamic-block .video-right .image-container {
		float: none;
		margin-right: 0vw;
		text-align: center;
	}
		
	.dynamic-block .video-right .image-container img {
		width: 100%;
	}
}

.dynamic-block .image-left .feature {
	padding-right: 14vw;
	padding-left: 80px;		
}

.dynamic-block .image-right .feature {
	padding-left: 12vw;
	padding-right: 100px;
	padding-top: 50px;
}

.dynamic-block .image-center .feature {
    padding: 0 10vw;
    z-index: 2;
	position: relative;
}

.dynamic-block .feature.video {
	position: absolute;
	right: 10vw;
	width: 50%;
	margin-top: 50px;
}

@media (max-width: 992px) {

	.dynamic-block .feature.video {
    	position: relative;
    	right: 0;
    	width: 100%;
    }
}

@media (max-width: 768px) {
	
	.dynamic-block .image-left .feature,
	.dynamic-block .image-right .feature,
	.features .image-left .feature,
	.features .image-right .feature {

		padding-left: 10vw !important;
		padding-right: 10vw !important;
	}
}

.dynamic-block .image-left .feature h2.title,
.dynamic-block .image-right .feature h2.title {
	text-align: left;
	font-size: 40px;
}

.dynamic-block .feature p:nth-child(2),
.features .feature p:nth-child(2) {
	font-size: 22px;
	font-weight: 300;
	line-height: 33px;
}

.dynamic-block .feature p:nth-child(3),
.dynamic-block .feature p:nth-child(4),
.dynamic-block .feature p:nth-child(5),
.dynamic-block .feature p:nth-child(6),
.dynamic-block .feature p:nth-child(7),
.dynamic-block .feature p:nth-child(8),
.features .feature p:nth-child(3),
.features .feature p:nth-child(4),
.features .feature p:nth-child(5),
.features .feature p:nth-child(6),
.features .feature p:nth-child(7),
.features .feature p:nth-child(8) {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;	
}

.features .image-left .feature {
	padding-right: 13vw;
	overflow: hidden;
}

.features.modules {
	background: #efefef;
	overflow: hidden;
	padding-bottom: 50px;
}

.features.modules .feature {
	float: right;
}

.features.modules .image-left img {
	max-width: 900px;
	float: right;
    border-left: 11px solid white;
    border-top: 5px solid white;
}

.features .image-right .feature {
	padding-left: 13vw;
	clear:both;
	overflow: hidden;
}

.features .image-right img {
	height: 100%;
	width: auto !important;
}

@media (max-width: 1380px) {
	
	#projects.google section.background {
		padding-left: 0;
		padding-right: 0;
		padding-bottom: 0px;
		overflow: hidden;
	}
	
	section.background .first-block, section.background .second-block {
		min-height: 0;
	}
	
	.dynamic-block .image-left .feature {
		padding-right: 10vw;
		padding-top: 0px;
	}
	
	.dynamic-block .image-right .feature {
		padding-left: 10vw;
		padding-top: 0px;
	}

	.features .image-right .feature {
		padding-left: 40px;
	}
	
	.features .image-left .feature {
		padding-right: 40px;
	}
}

@media (max-width: 992px) {

	.features .image-right img {
		height: auto !important;
		width: 100% !important;
	}
}

section.image-single.with-text {
	position: relative;
	padding: 0;
}

section img.icons {
	max-width: 300px;
	margin: 0 auto;
	display: block;
}

section.image-single.right-contain picture {
	background-position: 100% 100% !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
}

section.image-single.with-text .text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding-left: 0vw;
	padding-right: 0vw;
	z-index: 10;
	color: #434343;
}

section.image-single.right-contain .text {
    left: 10vw;
    transform: translate(0%,-50%);
    width: 40vw;
}

@media (max-width: 1380px) {
	
	section.image-single.with-text.right-contain .text {
	    transform: translate(-0%, -50%);
	    padding-left: 10vw;
	    padding-right: 10vw;
	}
}

@media (max-width: 1180px) {
	
	section.image-single.with-text.right-contain {
    	margin-top: -100px;
	}
	
	section.image-single.with-text {
		margin-top: 100px;
	}
	
	section.image-single.with-text.right-contain .text {
	    left: 0vw;
	    width: 100vw;
	}
	
	section.image-single.with-text.right-contain {
	    margin-top: 0px;	
	}
	
	section.image-single.with-text.right-contain picture {
    	background-size: 50% !important;
	}
	
	section.image-single.with-text.right-contain .text {
	    transform: translate(-0%, -100%);	
	}
}

@media (max-width: 767px) {

	section.image-single.with-text .text {
	    left: 10%;
	    transform: translate(-0%, -50%);
	    padding-right: 10vw;
	}
}

@media (max-height: 400px) {
	
	section.image-single.with-text .text {
	    left: 10%;
	    transform: translate(-0%, -50%);
	    padding-right: 10vw;
	}	
}

section.image-single.with-text picture:after {
	display: block;
	position: absolute;
	content: " ";
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
}
	

section.image-single.right-contain picture:after {
	display: none;
}

.image-single.showcase {
	background: #ffffff;
	position: relative;
	padding: 0 !important;
}

.image-single.video, 
.image-single.video iframe,
.image-single.video video {
	min-height: 56.25vw !important;
	padding: 0;
}

.image-single.showcase picture {
	background-size: contain !important;
	background-position: 50% 0% !important;
	background-repeat: no-repeat !important;
	opacity: 0.8;
	height: 40.3645833vw;
	max-height: 40.3645833vw;
	min-height: 40.3645833vw;
}

.image-single .img-wrap {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
	width: 100%;
	top: 0;
}

.image-single .img-wrap img.image {
    -webkit-transform: translate(0, -6%);
    -ms-transform: translate(0, -6%);
    transform: translate(0, -6%);
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 23%;
    height: 23vw;
    box-shadow: 0px 0px 30px rgba(0,0,0,0.7);
	border: 8px solid #fff;
}

@media (max-width: 768px) {
	
	.image-single.showcase picture {
		background-size: cover !important;
		min-height: 600px;
	}
	
	.image-single .img-wrap img.image {
	    -webkit-transform: translate(0, -20px);
	    -ms-transform: translate(0, -20px);
	    transform: translate(0, -20px);
	    width: 340px;
		height: 340px;
	}
	
}

/*
 *********************************************************************
 * PRESS
 * 10/02/2019
  ********************************************************************/

section.press {
	position: relative;
}

section.press .feature:after {
    position: absolute;
    display: block;
    content: " ";
	top: -100px;
	left: -35vw;
    background: url('../media/ui/stamp-press.svg') no-repeat 0 0;
    background-size: cover;
	width: 800px;
	height: 800px;
    z-index: -1;
    opacity: 0.05;
}

@media (max-width: 1380px) {
	
	section.press .feature::after {
    	top: 0;
    	height: 600px;
	}
}

@media (max-width: 768px) {
	
	section.press .image img {
    	margin-bottom: 40px; 
	}
}

/*
 *********************************************************************
 * STATS PANEL
 * 08/02/2019
  ********************************************************************/
  

.stats {
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    min-height: 200px;
}

.stat-group {
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto;
    max-width: 1440px;
    width: 80%;
}

@media (max-width: 992px) {
	
	.stats {
		padding: 100px 0;
	}
	
	.stat-group {
		width: 100%;
	}
}

.stat-block {
    width: 33.333333%;
    float: left;
    text-align: center;
    min-height: 140px;
}


@media (max-width: 767px) {
	.stat-block {
		width: 50%;
	}
}

@media (max-width: 500px) {
	.stat-block {
		width: 100%;
	}
}


.stat-block .number {
    font-size: 72px;
    font-weight: 300;
    letter-spacing: -0.025em;
    line-height: 1;
    display: block;
    line-height: 1;
}

.stat-block .label {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: #bdbdbd;
    letter-spacing: 0.2em;
    line-height: 24px;
    white-space: normal;
}


/*
 *********************************************************************
 * IPHONE CAROUSEL
 * 08/02/2019
  ********************************************************************/


.iphone-carousel,
.iphone-video {
    position: relative;
}

.iphone-video {
	margin-top: -60px;
}

.ic-phone {
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding-top: 100%;
    position: relative;
    width: 48.14815%;
    z-index: 100
}

.ic-phone.white {
    background-image: url(../media/ui/iphone-white.png);
}

.ic-phone.black {
    background-image: url(../media/ui/iphone-black.png);
}

.ic-phone:after {
    border-radius: 50%;
    bottom: 2.25%;
    box-shadow: 0 1rem 0.625rem rgba(0, 0, 0, 0.65);
    content: '';
    display: block;
    height: 0.0625rem;
    left: 5%;
    position: absolute;
    width: 90%
}

.ic-back {
    background: #242529;
    height: 74.94553%;
	left: 3.43%;
	position: absolute;
	top: 12.4183%;
	width: 41.5%;
}

.iphone-video video {
   	left: 4.9%;
    position: absolute;
    top: 12.583%;
    width: 40.39%;
    z-index: 90;
    cursor: pointer;
    z-index: 100000;
}

.video-overlay-play-button.is-hidden {
    display: none;
}

.video-overlay-play-button {
    box-sizing: border-box;
    width: 70px;
    height: 70px;
    margin: calc(50% - 35px) calc(25% - 35px);
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    opacity: 0.95;
    cursor: pointer;
    transition: opacity 150ms;
	z-index: 10000000;
}

.iphone-carousel .ic-progress {
    background: white;
    bottom: -25px;
    display: block;
    height: 2px;
    left: 10%;
    position: absolute;
    width: 28.14815%
}

.iphone-carousel .ic-progress-bar {
	background-color: rgba(185, 4, 19, 1.0);
    height: 2px;
    left: 0;
    position: absolute;
    top: 0;
    transition: left 800ms cubic-bezier(0.38, 0.53, 0.27, 0.98);
    width: 20%
}

.iphone-carousel .ic-image-container {
    bottom: 0;
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.iphone-carousel .ic-image {
    -webkit-backface-visibility: hidden;
    left: 3.05011%;
    position: absolute;
    top: 12.4183%;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    transition: -webkit-transform 800ms cubic-bezier(0.38, 0.53, 0.27, 0.98);
    transition: transform 800ms cubic-bezier(0.38, 0.53, 0.27, 0.98);
    transition: transform 800ms cubic-bezier(0.38, 0.53, 0.27, 0.98), -webkit-transform 800ms cubic-bezier(0.38, 0.53, 0.27, 0.98);
    width: 42.15686%;
    z-index: 90
}

.iphone-carousel .ic-image[order="0"][ic-last-image="true"] {
    -webkit-animation: _ic-blow-out 800ms cubic-bezier(0.38, 0.53, 0.27, 0.98);
    animation: _ic-blow-out 800ms cubic-bezier(0.38, 0.53, 0.27, 0.98);
    opacity: 0
}

@-webkit-keyframes _ic-fade-in-1 {
    0% {
        opacity: 0;
        -webkit-transform: translate(30%, 0) scale(0.765);
        transform: translate(30%, 0) scale(0.765)
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(30%, 0) scale(0.9);
        transform: translate(30%, 0) scale(0.9)
    }
}

@keyframes _ic-fade-in-1 {
    0% {
        opacity: 0;
        -webkit-transform: translate(30%, 0) scale(0.765);
        transform: translate(30%, 0) scale(0.765)
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(30%, 0) scale(0.9);
        transform: translate(30%, 0) scale(0.9)
    }
}

.iphone-carousel .ic-image[order="1"] {
    box-shadow: 0 0 0.5rem 0.125rem rgba(36, 37, 41, 0.2);
    -webkit-transform: translate(30%, 0) scale(0.9);
    -ms-transform: translate(30%, 0) scale(0.9);
    transform: translate(30%, 0) scale(0.9);
    transition: -webkit-transform 800ms cubic-bezier(0.38, 0.53, 0.27, 0.98);
    transition: transform 800ms cubic-bezier(0.38, 0.53, 0.27, 0.98);
    transition: transform 800ms cubic-bezier(0.38, 0.53, 0.27, 0.98), -webkit-transform 800ms cubic-bezier(0.38, 0.53, 0.27, 0.98);
    z-index: 80
}

.iphone-carousel .ic-image[order="1"][ic-last-image="true"] {
    -webkit-animation: _ic-fade-in-1 1200ms cubic-bezier(0.38, 0.53, 0.27, 0.98);
    animation: _ic-fade-in-1 1200ms cubic-bezier(0.38, 0.53, 0.27, 0.98);
    opacity: 1
}

@-webkit-keyframes _ic-fade-in-2 {
    0% {
        opacity: 0;
        -webkit-transform: translate(60%, 0) scale(0.6375);
        transform: translate(60%, 0) scale(0.6375)
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(60%, 0) scale(0.75);
        transform: translate(60%, 0) scale(0.75)
    }
}

@keyframes _ic-fade-in-2 {
    0% {
        opacity: 0;
        -webkit-transform: translate(60%, 0) scale(0.6375);
        transform: translate(60%, 0) scale(0.6375)
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(60%, 0) scale(0.75);
        transform: translate(60%, 0) scale(0.75)
    }
}

.iphone-carousel .ic-image[order="2"] {
    box-shadow: 0 0 0.5rem 0.125rem rgba(36, 37, 41, 0.2);
    -webkit-transform: translate(60%, 0) scale(0.75);
    -ms-transform: translate(60%, 0) scale(0.75);
    transform: translate(60%, 0) scale(0.75);
    transition: -webkit-transform 800ms cubic-bezier(0.38, 0.53, 0.27, 0.98);
    transition: transform 800ms cubic-bezier(0.38, 0.53, 0.27, 0.98);
    transition: transform 800ms cubic-bezier(0.38, 0.53, 0.27, 0.98), -webkit-transform 800ms cubic-bezier(0.38, 0.53, 0.27, 0.98);
    z-index: 70
}

.iphone-carousel .ic-image[order="2"][ic-last-image="true"] {
    -webkit-animation: _ic-fade-in-2 1200ms cubic-bezier(0.38, 0.53, 0.27, 0.98);
    animation: _ic-fade-in-2 1200ms cubic-bezier(0.38, 0.53, 0.27, 0.98);
    opacity: 1
}

@-webkit-keyframes _ic-fade-in-3 {
    0% {
        opacity: 0;
        -webkit-transform: translate(85%, 0) scale(0.51);
        transform: translate(85%, 0) scale(0.51)
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(85%, 0) scale(0.6);
        transform: translate(85%, 0) scale(0.6)
    }
}

@keyframes _ic-fade-in-3 {
    0% {
        opacity: 0;
        -webkit-transform: translate(85%, 0) scale(0.51);
        transform: translate(85%, 0) scale(0.51)
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(85%, 0) scale(0.6);
        transform: translate(85%, 0) scale(0.6)
    }
}

.iphone-carousel .ic-image[order="3"] {
    box-shadow: 0 0 0.5rem 0.125rem rgba(36, 37, 41, 0.2);
    -webkit-transform: translate(85%, 0) scale(0.6);
    -ms-transform: translate(85%, 0) scale(0.6);
    transform: translate(85%, 0) scale(0.6);
    transition: -webkit-transform 800ms cubic-bezier(0.38, 0.53, 0.27, 0.98);
    transition: transform 800ms cubic-bezier(0.38, 0.53, 0.27, 0.98);
    transition: transform 800ms cubic-bezier(0.38, 0.53, 0.27, 0.98), -webkit-transform 800ms cubic-bezier(0.38, 0.53, 0.27, 0.98);
    z-index: 60
}

.iphone-carousel .ic-image[order="3"][ic-last-image="true"] {
    -webkit-animation: _ic-fade-in-3 1200ms cubic-bezier(0.38, 0.53, 0.27, 0.98);
    animation: _ic-fade-in-3 1200ms cubic-bezier(0.38, 0.53, 0.27, 0.98);
    opacity: 1
}

@-webkit-keyframes _ic-fade-in-4 {
    0% {
        opacity: 0;
        -webkit-transform: translate(105%, 0) scale(0.3825);
        transform: translate(105%, 0) scale(0.3825)
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(105%, 0) scale(0.45);
        transform: translate(105%, 0) scale(0.45)
    }
}

@keyframes _ic-fade-in-4 {
    0% {
        opacity: 0;
        -webkit-transform: translate(105%, 0) scale(0.3825);
        transform: translate(105%, 0) scale(0.3825)
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(105%, 0) scale(0.45);
        transform: translate(105%, 0) scale(0.45)
    }
}

.iphone-carousel .ic-image[order="4"] {
    box-shadow: 0 0 0.5rem 0.125rem rgba(36, 37, 41, 0.2);
    -webkit-transform: translate(105%, 0) scale(0.45);
    -ms-transform: translate(105%, 0) scale(0.45);
    transform: translate(105%, 0) scale(0.45);
    transition: -webkit-transform 800ms cubic-bezier(0.38, 0.53, 0.27, 0.98);
    transition: transform 800ms cubic-bezier(0.38, 0.53, 0.27, 0.98);
    transition: transform 800ms cubic-bezier(0.38, 0.53, 0.27, 0.98), -webkit-transform 800ms cubic-bezier(0.38, 0.53, 0.27, 0.98);
    z-index: 50
}

.iphone-carousel .ic-image[order="4"][ic-last-image="true"] {
    -webkit-animation: _ic-fade-in-4 1200ms cubic-bezier(0.38, 0.53, 0.27, 0.98);
    animation: _ic-fade-in-4 1200ms cubic-bezier(0.38, 0.53, 0.27, 0.98);
    opacity: 1
}

@-webkit-keyframes _ic-blow-out {
    0% {
        opacity: 1;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        z-index: 110
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(-40%, 0) scale(1.15);
        transform: translate(-40%, 0) scale(1.15);
        z-index: 110
    }
}

@keyframes _ic-blow-out {
    0% {
        opacity: 1;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        z-index: 110
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(-40%, 0) scale(1.15);
        transform: translate(-40%, 0) scale(1.15);
        z-index: 110
    }
}

@media (max-width: 1380px) {
	
	.iphone-video {
		margin-top: 50px;
	}
}

@media (max-width: 992px) {
	
	.iphone-video {
		margin-left: 10vw;
		min-height: 150vw;
		padding: 0;
	}
	
	.iphone-video .ic-phone {
    	width: 80%;
		height: 135vw;
	}
	
	.iphone-video .ic-back {
	    left: 4.20%;
		top: 10.1583%;
		width: 72%;
	}
	
	.iphone-video video {
		left: 5.20%;
		top: 11.1583%;
		width: 70%;
	}
	
	.video-overlay-play-button {
    	margin: calc(100% - 35px) calc(50% - 35px);
	}
}

@media (max-width: 767px) {
	
	.iphone-video {
		margin-left: 0vw;
		min-height: 170vw;
	}
	
	.iphone-video .ic-phone {
    	width: 100%;
		height: 170vw;
	}
	
	.iphone-video .ic-back {
	    top: 11.5%;
		width: 88.8%;
		left: 5.7%;
	}
	
	.iphone-video video {
	    top: 4.5%;
		min-height: 150vw;
		width: 86.8%;
		left: 6.7%;
	}
}

/*
 *********************************************************************
 * FOOTER
 * 17/01/2019
  ********************************************************************/


footer {
    position: fixed;
    z-index: 1;
    background: #242529;
    bottom: 0;
    left: 0;
    padding: 150px 150px 20px 150px;
    width: 100%;
}

.footer-bottom {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-top: 2px solid #494949;
    color: #ffffff;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 2.5rem 0;
}

.footer-wrapper {
    margin: 0 auto;
}

.footer-social {
    margin: 0;
    padding: 0 0 100px 0;
    text-align: center;
}

.footer-social li {
    display: inline-block;
    margin: 0 1.25rem;
    vertical-align: middle;
}

.footer-social li.footer-logo {
    position: relative;
    width: 60px;
    height: 60px;
    background: transparent url('../media/ui/logo_footer.png') no-repeat 50% 50%;
    background-size: contain;
    text-indent: -3000px;
    margin: 20px auto 20px auto;
    -moz-transition: all 700ms ease-out;
    -webkit-transition: all 700ms ease-out;
    -o-transition: all 700ms ease-out;
    transition: all 700ms ease-out;
    overflow: hidden;
}

.footer-social li.footer-logo:hover {
	-webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.footer-social a {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.715;
    text-transform: uppercase;
    color: #bdbdbd;
    padding: .3125rem 0;
    position: relative;
}

.footer-social a::after {
    background: currentColor;
    bottom: -.25rem;
    content: '';
    display: block;
    height: .125rem;
    left: 50%;
    opacity: 0;
    position: absolute;
    transition: background 200ms ease-out, opacity 0ms 350ms, width 200ms ease-out 150ms;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 0.01%;
}

.footer-copy {
    color: #bdbdbd;
    height: 28px;
    line-height: 38px;
    font-weight: 500;
}

.footer-tag {
    color: #bdbdbd;
    background: url('../media/ui/responsive.png') no-repeat 100% 50%;
    padding-right: 85px;
    right: 30px;
    height: 28px;
    line-height: 30px;
    width: 300px;
	text-align: right;
}

footer a:hover {
    color: #fbba48;
    text-decoration: none;
}

@media (min-width:500px) and (max-width:1023px) {
	footer {
	    padding: 150px 50px 20px 50px;
	}
}

@media (max-width:767px) {
	
	.footer-social li {
		display: block;
	}
	
	.footer-tag, .footer-copy {
		line-height: 16px;
		position: absolute;
		margin: 0 auto;
		width: calc(100% - 100px);
		text-align: center;
	}
		
	.footer-tag {
		bottom: 80px;
		width: calc(100vw - 60px);
		background-position: 50% 0%;
		padding-right: 0px;
		padding-top: 35px;
		height: 60px;
	}
}


@media (max-width:500px) {
	
	footer {
	    padding: 150px 10px 20px 10px;
	}
	
	.footer-social {
		padding: 0;
		width: 40%;
		margin: 0 auto 110px auto;
	}
	
	.footer-tag, .footer-copy {
		width: calc(100% - 20px);
	}
		
	.footer-tag {
		bottom: 80px;
		width: calc(100vw - 60px);
		background-position: 50% 0%;
		padding-right: 0px;
		padding-top: 35px;
		height: 60px;
	}
}

/*
 *********************************************************************
 * BANNER NEXT CASE STUDY
 * 09/02/2019
  ********************************************************************/

.banner.next-project {
    background: #242529;
    display: block;
    min-height: 300px;
    height: 40vw;
    max-height: 450px;
    position: relative;
    width: 100%;
    padding: 0;
}

.banner.next-project a {
	text-decoration: none;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    height: 100%;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
    width: 100%;
    overflow: hidden;
}

.banner.next-project a:hover .banner-img,
.banner.next-project a:focus .banner-img {
    -webkit-filter: blur(0.25rem);
    filter: blur(0.25rem);
}

.banner.next-project a:hover:before,
.banner.next-project a:focus:before {
    opacity: .15;
}

.banner.next-project a:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: black;
    z-index: 10;
    opacity: 0;
    transition: opacity 500ms ease;
}

.banner-img {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    position: absolute;
    bottom: 0;
    z-index: 5;
    transition: -webkit-filter 500ms ease;
    transition: filter 500ms ease;
    transition: filter 500ms ease, -webkit-filter 500ms ease;
}

.banner-hint {
	position: absolute;
	margin-top: -60px;
	text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.3);
	z-index: 15;
}

@media (max-width: 767px) {
	
	.banner-img {
    	background-position: left center;
	}
	
	.banner-hint {
		display: none;
	}
}

.banner-title {
    text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.3);
    display: block;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1;
    margin: 1em 0 .5em;
    width: 100%;
    font-size: 4rem;
    color: white;
    display: block;
    margin: 0 3rem 0 40%;
    position: relative;
    transition: opacity .5s ease;
    width: auto !important;
    z-index: 15;
}

.banner-title:first-child {
    margin-top: 0;
}

@media (max-width: 48em) {
    .banner-title {
        font-size: 2rem;
        font-size: 10vw;
    }
}

@media (max-height: 400px) {
    .banner-title {
        font-size: 30px;
    }
}

.banner-subtitle {
    color: #e95e3f;
	font-size: 16px;
    font-weight: 600;
	letter-spacing: 0.6px;
    position: relative;
    color: inherit;
    display: block;
    margin: 1rem 0 0 .25rem;
    z-index: 15;
}

.banner-subtitle:before {
    content: '';
    height: .1875rem;
    width: 1.875rem;
    position: absolute;
    left: -3.125rem;
    top: 50%;
    background: #dedede;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background: white;
}

/*
 *********************************************************************
 * CASE STUDY: GOOGLE
 * 09/02/2019
  ********************************************************************/
  
#projects.google #overview a,
#projects.google .feature a,
#projects.google .press a {
 	color: rgba(176, 63, 23, 1.0)
}

#projects.google .press a {
 	font-weight: 700;
}

#projects.google #backtotop {
	background-color: rgba(176, 63, 23, 1.0);
    border: 2px solid rgba(176, 63, 23, 1.0);
}
  
#projects.google .inner-hero-image:after {
	background-color: rgba(176, 63, 23, 0.7);
}

#projects.google .head,
#projects.google .strong-quote {
	 color: rgba(176, 63, 23, 1.0)
 }
 
#projects.google .head::before {
    background-color: #dbdbdb;
}

#projects.google #overview a.button:hover {
	background-color: rgba(176, 63, 23, 1.0);
	border-color: rgba(176, 63, 23, 1.0);
	color: #ffffff;
}

#projects.google section.background {
	background-color: #f6f4ee;
	border-top: 4px solid #ded5b2;
}

#projects.google .iphone-carousel .ic-progress-bar {
	background-color: rgba(176, 63, 23, 0.7);
}

#projects.google section.image-single.with-text picture:after {
	background-color: rgba(00, 67, 93, 0.7);
}

#projects.google .images-block picture.square.top,
#projects.google .images-block picture.square.bottom {
    width: calc(20vw - 15px);
    height: calc(20vw - 4px);
    margin-bottom: 4px;
    right: 0;
    position: absolute;
}

#projects.google .images-block picture.square.bottom {
	top: 20vw;
	height: 20vw;
}

/*
 *********************************************************************
 * CASE STUDY: BARCELONA MODERNISME
 * 13/02/2019
  ********************************************************************/
 

#projects.modernisme #overview a,
#projects.modernisme .feature a,
#projects.modernisme .press a {
 	color: #4b92a9;
}

#projects.modernisme .press a {
 	font-weight: 700;
}

#projects.modernisme #backtotop {
	background-color: #4b92a9;
    border: 2px solid #4b92a9;
}

#projects.modernisme .inner-hero-image picture {
    background-position: 50% 100% !important;
}
  
#projects.modernisme .inner-hero-image:after {
	background-color: rgba(0, 148, 187, 0.6);
}

#projects.case-study.modernisme .hero .section-icon, 
#projects.case-study.modernisme .hero .section-icon img {
	height: 130px;
	width: 130px;
}

#projects.modernisme .head,
#projects.modernisme .strong-quote {
	 color: #4b92a9
 }
 
#projects.modernisme .head::before {
    background-color: #dbdbdb;
}

#projects.modernisme #overview a.button:hover {
	background-color: #4b92a9;
	border-color: #4b92a9;
	color: #ffffff;
}

#projects.modernisme section.background {
	position: relative;
	background-color: #0094bd;
	border-top: 4px solid #ffffff;
	z-index: -1;
}

#projects.modernisme section.background:after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100%;
	content: " ";
	background: #0094bd url(../media/projects/modernisme/modernisme-05.jpg) no-repeat 50% 50%/cover;
	opacity: 0.1;
}

#projects.modernisme section.background h2,
#projects.modernisme section.background p,
#projects.modernisme section.background p.clear,
#projects.modernisme section.background p.medium {
	color: #ffffff !important;
}

#projects.modernisme .iphone-carousel .ic-progress-bar {
	background-color: rgba(75, 146, 269, 1);
}

#projects.modernisme section.image-single.with-text picture {
	background-size: contain;
}

#projects.modernisme section.image-single.with-text picture:after {
	background-color: rgba(0, 148, 187, 0.6);
}

/*
 *********************************************************************
 * CASE STUDY: RED DE JUDERIAS DE ESPAÑA
 * 19/02/2019
  ********************************************************************/
 

#projects.redjuderias #overview a,
#projects.redjuderias .feature a,
#projects.redjuderias .press a {
 	color: #233e99;
}

#projects.redjuderias .press a {
 	font-weight: 700;
}

#projects.redjuderias #backtotop {
	background-color: #233e99;
    border: 2px solid #233e99;
}

#projects.redjuderias .inner-hero-image picture {
    background-position: 50% 100% !important;
}
  
#projects.redjuderias .inner-hero-image:after {
	background-color: rgba(35, 62, 153, 0.7);
}

#projects.case-study.redjuderias .hero .section-icon, 
#projects.case-study.redjuderias .hero .section-icon img {
	height: 120px;
	width: 120px;
}

#projects.case-study.redjuderias .hero .section-icon img {
	margin-left: 15px;
}

#projects.redjuderias .head,
#projects.redjuderias .strong-quote {
	 color: #233e99
 }
 
#projects.redjuderias .head::before {
    background-color: #dbdbdb;
}

#projects.redjuderias #overview a.button:hover {
	background-color: #233e99;
	border-color: #233e99;
	color: #ffffff;
}

#projects.redjuderias .image {
	text-align: center;
}

#projects.redjuderias section.image-single picture.full {
    min-height: 500px;
    max-height: 500px;
}

#projects.redjuderias .icon.red {
	background-color: #233e99;
	width: 150px;
	height: 150px;
	padding: 20px;
	margin: 40px auto 0px auto;
	border-radius: 20px;
}

#projects.redjuderias .icon.red.azul {
	background-color: transparent;
	width: 150px;
	height: 150px;
	padding: 0px;
	margin: 0px auto 0px auto;
}

#projects.redjuderias section.background {
	position: relative;
	background-color: #ffffff;
	background-image: linear-gradient(#ffffff, #efeee9 21%);
	overflow: hidden;
}

#projects.redjuderias section.background:after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 800px;
	content: " ";
	background: #efeee9 url(../media/projects/redjuderias/redjuderias-11.jpg) no-repeat 100% 100%/cover;
	opacity: 0.2;
}


#projects.redjuderias section.image-single.with-text picture {
	background-size: contain;
}

#projects.redjuderias section.image-single.with-text picture:after {
	background-color: rgba(35, 62, 153, 0.8);
}

#projects.redjuderias .features .image-right img.dreidels,
img.detail {
    max-height: 500px;
    width: auto !important;
    float: right;
    position: relative;
    z-index: 1;
}

#projects.redjuderias .images-block picture.square.top,
#projects.redjuderias .images-block picture.square.bottom {
    width: calc(20vw - 15px);
    height: calc(20vw - 4px);
    margin-bottom: 4px;
    right: 0;
    position: absolute;
}

#projects.redjuderias .images-block picture.square.bottom {
	top: 20vw;
	height: 20vw;
}


/*
 *********************************************************************
 * CASE STUDY: DISCOGRAPHIC FOR DISCOGS
 * 24/02/2019
  ********************************************************************/
 

#projects.discographic #overview a,
#projects.discographic .feature a,
#projects.discographic .press a {
 	color: #b42519;
}

#projects.discographic .press a {
 	font-weight: 700;
}

#projects.discographic #backtotop {
	background-color: #b42519;
    border: 2px solid #b42519;
}

#projects.discographic .inner-hero-image picture {
    background-position: 50% 100% !important;
}
  
#projects.discographic .inner-hero-image:after {
	background-color: rgba(71, 69, 74, 0.7);
}

#projects.discographic .head,
#projects.discographic .strong-quote {
	 color: #b42519
 }
 
#projects.discographic .head::before {
    background-color: #dbdbdb;
}

#projects.discographic #overview a.button:hover {
	background-color: #b42519;
	border-color: #b42519;
	color: #ffffff;
}

#projects.discographic .image {
	text-align: center;
}

#projects.discographic section.image-single picture.full {
    min-height: 500px;
    max-height: 500px;
}

#projects.discographic section.image-single picture.full.plaque {
	height: 37vw !important;
	min-height: 37vw !important;
	max-height: 37vw !important;
	background-position: 50% 100% !important; 
	background-size: contain;
}

#projects.discographic section.background {
	position: relative;
	background-color: #b7a58e;
}

#projects.discographic section.background:after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100%;
	content: " ";
	background: #b7a58e url(../media/projects/discographic/discographic-11.jpg) no-repeat 50% 50%/cover;
	opacity: 0.2;
}

#projects.discographic section.background h2, 
#projects.discographic section.background p,
#projects.discographic section.background p.medium {
		color: #47454a !important;
}

#projects.discographic section.background p.clear,
#projects.discographic section.features.background p {
	color: #ffffff !important;
}

#projects.discographic section.features.background h2 {
	color: #b7a58e !important;
}

#projects.discographic .iphone-carousel .ic-progress-bar {
	background-color: #b42519;
}

#projects.discographic section.image-single picture.full.apps {
    background-position: 50% 100% !important;
    min-height:41vw !important;
    background-size: 70% auto !important;
	background-repeat: no-repeat !important;
}

#projects.discographic section.image-single.with-text.primary,
#projects.discographic section.image-single.with-text.primary picture.full {
	min-height: 660px;
	/*margin-bottom: 70px;*/
	margin-top: -70px;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: 80% 100% !important;
}

#projects.discographic section.image-single.with-text.primary,
#projects.discographic section.stats {
	/*background-image: linear-gradient(to bottom, transparent 15vw, #efefef 15vw, #efefef 100%);	*/
	background: transparent url(../media/ui/bg-grey.png);
	background-position: 0 10vw !important;
	background-size: cover !important;
	padding-bottom: 70px;
	margin-bottom: 0;
}

#projects.discographic section.stats {
	background-position: 0 0;
}

#projects.discographic section.image-single.with-text.primary .text {
    top: calc(20% + 170px);
    left: 10%;
    transform: translate(0%, 0%);
    padding-right: 50vw;
}

#projects.discographic section.image-single.with-text:not(.primary) picture.full.vinyl {
	background-position: 50% 50% !important;
}

#projects.discographic section.image-single picture.full.barcode {
	background-position: 100% 50% !important;
}

#projects.discographic section.image-single.with-text:not(.primary) picture::after {
    background-image: linear-gradient(to right, rgba(71, 69, 74, 0.9) , rgba(71, 69, 74, 0.0));
}

.sleeveface {
	background: url(../media/projects/discographic/discographic-10.jpg) no-repeat 100% 100%;
	background-size: 500px 570px;
	overflow: hidden;
	position: relative;
}

.licorice::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 450px;
	height: 500px;
	content: " ";
	background: transparent url(../media/projects/discographic/discographic-12.jpg) no-repeat 100% 0%;
	background-size: contain;
	opacity: 1;
	z-index: -1;
}

.licorice .padding-top {
	padding-top: 300px;
}

#projects.discographic .banner-img {
	background-position: top left !important;
}

#projects.discographic .stat-block {
    width: 50%;
}

#projects.discographic section img.icons { 
	max-width: 400px;
}


@media (max-width: 1440px) {
	.sleeveface {
		background: none;
	}
	
	#projects.discographic section.image-single.with-text.primary picture.full {
    	background-position: 100% 100% !important;
	}
}

@media (max-width: 1180px) {
	
	#projects.discographic section.image-single.with-text.primary {
	    margin-top: 0px;
	    z-index: 1;
	}
	
	#projects.discographic section.image-single.with-text.primary picture.full {
    	min-height: 460px !important;
		background-position: 110% 0% !important;
	}
	
	#projects.discographic section.image-single.with-text.primary .text {
	    top: calc(5% + 170px);
	}
	
	#projects.discographic .stat-group {
    	width: 100%;
	}
	
	#projects.discographic section.image-single picture.full.apps {
    	min-height: 56vw !important;
    	background-size: 100% auto !important;
	}
}

@media (max-width: 992px) {
	
	#projects.discographic section.image-single.with-text.primary picture.full {
    	margin-top: -170px;
	}
	
	#projects.discographic .stat-block {
    	width: 100%;
	}
	
	#projects.discographic section.background {
		overflow: hidden;
	}
	
	#projects.discographic .carousel {
	    margin-top: 40px;
	}
}


@media (max-width:767px) {
		
	#projects.discographic section.image-single.with-text.primary picture.full {
    	background-position: 145% 0% !important;
	}

	.licorice::after {
    	width: 100%;
		background-position: 0% 0%;
    }
}

@media (max-width:660px) {

	#projects.discographic section.image-single.with-text.primary picture.full {
    	background-position: 220% 0% !important;
    }
}

@media (max-width:600px) {
		
	#projects.discographic section.image-single.with-text.primary picture.full {
    	background-position: 0% 0% !important;
    	margin-top: -100px;
	}

	#projects.discographic section.image-single.with-text.primary .text {
	    padding-right: 10vw;
		top: auto;
		bottom: 100px;
	}
}

/*
 *********************************************************************
 * CASE STUDY: LA SALLE GRACIA
 * 25/03/2019
  ********************************************************************/
 

#projects.salle #overview a,
#projects.salle .feature a,
#projects.salle .press a {
 	color: #004998;
}

#projects.salle .press a {
 	font-weight: 700;
}

#projects.salle #backtotop {
	background-color: #004998;
    border: 2px solid #004998;
}

#projects.salle .inner-hero-image picture {
    background-position: 50% 50% !important;
}
  
#projects.salle .inner-hero-image:after {
	background-color: rgba(0, 73, 152, 0.6);
}

#projects.case-study.salle .hero .section-icon, 
#projects.case-study.salle .hero .section-icon img {
	height: 140px;
	width: 140px;
}

#projects.salle .head,
#projects.salle .strong-quote {
	 color: #233e99;
 }
 
#projects.salle .head::before {
    background-color: #dbdbdb;
}

#projects.salle #overview a.button:hover {
	background-color: #004998;
	border-color: #004998;
	color: #ffffff;
}

#projects.salle .image {
	text-align: center;
}

#projects.salle section.image-single picture.full {
    min-height: 500px;
    max-height: 500px;
    background-position: 50% 50% !important;
}

#projects.salle section.background {
	position: relative;
	background-color: #ffffff;
	background: url(../media/projects/salle/bg-salle-pattern.svg) no-repeat 100% 100%;
	background-size: cover;
	overflow: hidden;
}

#projects.salle section.background h2,
#projects.salle section.background p,
#projects.salle section.background b {
	color: #ffffff !important;
}

#projects.salle section.image-single.with-text picture {
	background-size: contain;
}

#projects.salle section.image-single.with-text picture:after {
	background-color: rgba(0, 73, 152, 0.6);
}

#projects.salle .banner-img {
	background-position: 0 0 !important;
}

#projects.salle .chart {
	float: right;
	padding-top: 50px;
	padding-left: 0vw;
}

/*
 *********************************************************************
 * CASE STUDY: JPO
 * 27/01/2021
  ********************************************************************/
 
 #projects.jpo .inner-hero .hero-content {
    padding: 15vh 20vw 15vw 27.5vw;
}

 #projects.jpo .inner-hero .hero-content .section-icon {
    margin-bottom: 250px;
}


  #projects.jpo #overview a,
  #projects.jpo .feature a,
  #projects.jpo .press a {
	   color: #004998;
  }

  #projects.jpo a.button {
	border: 2px solid #fdc419;
	background: #fdc419;
	width: auto;
	color: black;
}

#projects.jpo .services {
	background: #efefef;
	padding: 25px;
}
  
  #projects.jpo .press a {
	   font-weight: 700;
  }
  
  #projects.jpo #backtotop {
	  background-color: #004998;
	  border: 2px solid #004998;
  }
  
  #projects.jpo .inner-hero-image picture {
	  background-position: 50% 50% !important;
  }
	
  #projects.jpo .inner-hero-image:after {
	  background-color: transparent;
  }
  
  #projects.case-study.jpo .hero .section-icon, 
  #projects.case-study.jpo .hero .section-icon img {
	  height: 140px;
	  width: 140px;
  }
  
  #projects.jpo .head {
	   width: 100%;
   }
  #projects.jpo .head,
  #projects.jpo .strong-quote {
	   color: #233e99;
   }
   
  #projects.jpo .head::before {
	  background-color: #dbdbdb;
  }

  #projects.jpo p.large, #overview p.medium {
    padding-left: 0 !important;
    padding-right: 0 !important;
    top: 10px;
}
  
  #projects.jpo #overview a.button:hover {
	  background-color: #004998;
	  border-color: #004998;
	  color: #ffffff;
  }

  #projects.jpo section.image-single.with-text.primary, 
  #projects.jpo section.features,
  #projects.jpo section.form {
    background-image: linear-gradient(to bottom, transparent 15vw, #efefef 15vw, #efefef 100%);
    background: transparent url(../media/ui/bg-grey.png);
    background-position: 0 10vw !important;
    background-size: cover !important;
    padding-bottom: 70px;
	margin-bottom: 0;
}
#projects.jpo section.form {
	margin-top: -30px;
	padding-top: 100px;
	padding-bottom: 0;
	margin-top: -30px;
	margin-bottom: 4px !important;
}

#projects.jpo section.form fieldset {
	background: transparent;
}

#projects.jpo section.features {
	background: url(../media/projects/jpo/bg-jpo-pattern-02.jpg) no-repeat 100% 100%;
	background-position: 0 0 !important;
	display: table;
	position: relative;
}

#projects.jpo section.features.second {
	background: url(../media/projects/jpo/bg-jpo-pattern-02.jpg) no-repeat 100% 100%;
	margin-top: 0;
	background-size: contain;
}


#projects.jpo section.image-single.with-text.primary .text {
    top: 20%;
    left: 10%;
    transform: translate(0%, 0%);
    padding-right: 50vw;
}
  
#projects.jpo .image {
	text-align: center;
}

#projects.jpo video {
	background: url(../media/projects/jpo/bg-bg-jpo-pattern.svg) no-repeat 100% 100%;
	height: auto;
	width: 100%;
}
  
#projects.jpo section.image-single picture.full {
    min-height: 700px;
    max-height: 700px;
    background-position: 100% 100% !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}
  
  #projects.jpo section.background {
	  position: relative;
	  background-color: #ffffff;
	  background: url(../media/projects/jpo/bg-bg-jpo-pattern-02.jpg) no-repeat 100% 100%;
	  background-size: cover;
	  overflow: hidden;
  }

  #projects.jpo .quote h2 {
    text-align: center !important;
}

#projects.jpo .projects picture {
	width: 300px;
	height: 300px;
	display: block;
	background-size: cover !important;
	border-radius: 50%;
	margin: 0 auto;
}

#projects.jpo .row {
	max-width: 1080px;
}
#projects.jpo .row h3 {
	text-align: center;
}

  #projects.jpo section.background h2,
  #projects.jpo section.background p,
  #projects.jpo section.background b,
  #projects.jpo section.features h2,
  #projects.jpo section.features h3,
  #projects.jpo section.features p,
  #projects.jpo section.features li,
  #projects.jpo section.features b {
	  color: #ffffff !important;
  }
  
  #projects.jpo section.image-single.with-text picture {
	  background-size: contain;
  }
  
  #projects.jpo section.image-single.with-text picture:after {
	  background-color: rgba(0, 73, 152, 0.6);
  }

  #projects.jpo section.image-single.with-text picture.no-color::after {
    background-color:rgba(0, 73, 152, 0.0);
}
  
  #projects.jpo .banner-img {
	  background-position: 0 0 !important;
  }
  
  #projects.jpo .form section {
	  padding-top: 20px;
  }
  
  #projects.jpo .form span.nota {
	  padding-top: 10px;
	  padding-bottom: 20px;
	  display: block;
  }
  
#projects.jpo #top nav {
			    position: relative;
			    width: 100%;
			    height: 80px;
			    z-index: 100;
			}
			
#projects.jpo #top .nav_wrapper h1::before {
			    position: absolute;
			    content: " ";
			    top: 0;
			    left: 0;
			    right: 0;
			    height: 81px;
			    background-color: transparent;
			    transition: all 0.3s ease;
			}
			
#projects.jpo #top .nav_wrapper h1 a {
			    width: 170px;
			    height: 80px;
			    display: block;
			    position: relative;
			    margin-top: -15px;
			    margin-left: 20px;
			}


/*
 *********************************************************************
 * ANIMATIONS & TRANSFORMATIONS
 * 17/01/2019
  ********************************************************************/


.gradient {
	background-image: linear-gradient(#ffffff 80%, #f7f7f7);
}

.trans {
	-webkit-transition: all 700ms cubic-bezier(0.995, 0.010, 0.020, 1.000); 
	   -moz-transition: all 500ms cubic-bezier(0.995, 0.010, 0.020, 1.000); 
		-ms-transition: all 500ms cubic-bezier(0.995, 0.010, 0.020, 1.000); 
		 -o-transition: all 500ms cubic-bezier(0.995, 0.010, 0.020, 1.000); 
			transition: all 500ms cubic-bezier(0.995, 0.010, 0.020, 1.000); /* custom */
	
	-webkit-transition-timing-function: cubic-bezier(0.995, 0.010, 0.020, 1.000); 
	   -moz-transition-timing-function: cubic-bezier(0.995, 0.010, 0.020, 1.000); 
		-ms-transition-timing-function: cubic-bezier(0.995, 0.010, 0.020, 1.000); 
		 -o-transition-timing-function: cubic-bezier(0.995, 0.010, 0.020, 1.000); 
			transition-timing-function: cubic-bezier(0.995, 0.010, 0.020, 1.000); /* custom */

	-moz-transition-duration: 1s /* Firefox 4 */
}

.underline::after {
    background: #ffffff;
    bottom: -.25rem;
    content: '';
    display: block;
    height: .125rem;
    left: 50%;
    position: absolute;
    transition: background 250ms ease-out, width 250ms ease-out 150ms;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 0;
}

.underline:hover::after,
.underline:focus::after {
    transition: width 250ms ease-out;
    width: 90%;
}

@media (max-width:767px) {
	.underline::after {
		display: none;
	}
}

.bounce-up {
    opacity: 0;
    -moz-transition: all 700ms ease-out;
    -webkit-transition: all 700ms ease-out;
    -o-transition: all 700ms ease-out;
    transition: all 700ms ease-out;
    -moz-transform: translate3d(0px, 200px, 0px);
    -webkit-transform: translate3d(0px, 200px, 0px);
    -o-transform: translate(0px, 200px);
    -ms-transform: translate(0px, 200px);
    transform: translate3d(0px, 200, 0px);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

@media (max-width:990px) {
	
	.bounce-up {
		-moz-transform: translate3d(0px, 100px, 0px);
	    -webkit-transform: translate3d(0px, 100px, 0px);
	    -o-transform: translate(0px, 100px);
	    -ms-transform: translate(0px, 100px);
	    transform: translate3d(0px, 100, 0px);
    }
}

.animation-element {
	-moz-transition: all 700ms ease-out;
    -webkit-transition: all 700ms ease-out;
    -o-transition: all 700ms ease-out;
    transition: all 700ms ease-out;
    visibility: hidden;
}

.in-view {
    visibility: visible;
}

.animation-element .slide {
	-moz-transition: opacity 1700ms ease-out;
    -webkit-transition: opacity 1700ms ease-out;
    -o-transition: opacity 1700ms ease-out;
    transition: opacity 1700ms ease-out;
    opacity: 0;
}

.animation-element.in-view .slide {
    opacity: 1;
}

.bounce-up.in-view {
    opacity: 1;
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate3d(0px, 0px, 0px);
}

.scroll-indicator.bounce {
    -webkit-animation-name: scroll-indicator-icon-bounce;
    animation-name: scroll-indicator-icon-bounce;
    -webkit-animation-duration: 8000ms;
    animation-duration: 8000ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    color: #ffffff;
    opacity: .5;
}

.scroll-indicator.bounce:hover,
.scroll-indicator.bounce:focus {
    -webkit-animation-name: scroll-indicator-hover;
    animation-name: scroll-indicator-hover;
    -webkit-animation-duration: 750ms;
    animation-duration: 750ms;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    opacity: 1;
}

@-webkit-keyframes scroll-indicator-icon-bounce {
    0%,
    90%,
    95%,
    97.5%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    93.5% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
    96.5% {
        -webkit-transform: translateY(-7px);
        transform: translateY(-7px);
    }
    99% {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }
}

@keyframes scroll-indicator-icon-bounce {
    0%,
    90%,
    95%,
    97.5%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    93.5% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
    96.5% {
        -webkit-transform: translateY(-7px);
        transform: translateY(-7px);
    }
    99% {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }
}

@-webkit-keyframes scroll-indicator-hover {
    0%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    30% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes scroll-indicator-hover {
    0%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    30% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}