.body-wrapper {
	width: 1280px;
	margin: 0 auto;
}

.sp-highlight {
	font-size: 14rem;
	line-height: 14rem;
	font-weight: 900;
	color: var(--n20);	
}

/* ------------------------------ */
/* AVATAR */
/* ------------------------------ */

	.avatar {
		border-radius: 100%;
		background-color: var(--b84);
		color: var(--n100);	
		
		display: flex;
		justify-content: center;
		align-items: center;		
		overflow: hidden;

		text-transform: lowercase;

		font-family: 'Barlow Semi Condensed', sans-serif;
		font-weight: 800;	
		font-size: 3.6rem;
		line-height: 4.8rem;		

	  	-webkit-transition: 0.1s ease-out;
	  	transition: 0.1s ease-out;


	}

/* ------------------------------ */
/* TOOLTIP */
/* ------------------------------ */
	.tooltip {
		position: relative;
	}

	.tooltip .tooltiptext {

		font-family: 'Barlow', sans-serif;
		font-size: 1.2rem;
		font-weight: 400;
		line-height: 1.6rem;

		visibility: hidden;
		background-color: var(--b84);
		color: var(--n100);
		text-align: center;
		padding: 0.5rem !important;

		white-space: nowrap;

		position: absolute;
		top: 1rem !important;
		z-index: 9999999 !important;
		
	}
	.tooltip:hover .tooltiptext {
		visibility: visible;
		cursor: default;	
	}	


/* ------------------------------ */
/* MODAL */
/* ------------------------------ */

	.modals {
		display: none;
	}

	.modal-wrapper.show {
		background-color: rgba(8,20,51,0.5); 		
	}

	.modal-wrapper {
		position: absolute;
		z-index: 99999999999999;
		width: 100vw;
		height: 100vh;
		background-color: rgba(8,20,51,0.0);

		display: flex;
		justify-content: center;
		align-items: center;

	  	-webkit-transition: var(--a200) ease-in-out;
	  	transition: var(--a200) ease-out; 		
		
	}

	.modal {
		background-color: var(--n100);
		
		max-width: 60vw;
		min-width: 30vw;
		max-height: 80vh;
		/*min-width: 30vw;*/
		/*border: 8px solid var(--n20);*/
		position: relative;
		box-shadow: var(--elevation-big);

		animation-name: showModal;
		animation-duration: 0.5s;
		animation-iteration-count: 1;

		display: none;

		padding: var(--sp400) var(--sp400) var(--sp400) var(--sp400);

	}
	.modal .wrapper{
		display: flex;		
		flex-direction: row;
		column-gap: var(--sp200);
		row-gap: var(--sp100);
		width: 100%;
	}
	.modal .description h2 {
		width: 90%;
	}
	.modal .description {
		width: 100%;
	}	
	.modal .description .content{
		padding-bottom: var(--sp200);
	}


	.modal .icon {
		min-width:  8rem;
		height:  8rem;
	  	background-repeat: no-repeat;
	  	background-size: 7.2rem;
	  	background-position: center;
	}

	.modal .btn-action {
		position: absolute;
		top: 2rem;
		right: 2rem;
	}
	.modal .btn-wrapper{
		display: flex;		
		flex-direction: row;
		column-gap: var(--sp200);
		row-gap: var(--sp100);
		width: 100%;
		justify-content: flex-end;
	}	

	@keyframes showModal {
		0%   {
			transform: scale(0.9);
			opacity: 0;
		}
		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	/* ------------------------------ */
	/* Icons action buttons */
	/* ------------------------------ */

		.modal .icon.ic_flexible-working-time {
			background-image: url("../resources/ic/ic_flexible-working-time.svg");
		}
		.modal .icon.ic_conformity_failed {
			background-image: url("../resources/ic/ic_conformity_failed_n20.svg");
		}
		.modal .icon.ic_conformity_passed {
			background-image: url("../resources/ic/ic_conformity_passed_n20.svg");
		}	


/* ------------------------------ */
/* NO CONTENT */
/* ------------------------------ */

	.no-content {
		display: flex;
		align-items: center;
		flex-direction: column;
		padding:  var(--sp500);	
		text-align: center;	
	}
	.no-content .thumbnail {
		width:  13rem;
		height:  13rem;
	  	background-repeat: no-repeat;
	  	background-size: 8rem;
	  	background-position: center;
	}	

	.no-content .thumbnail.deliverable {
		background-image: url("../resources/thumbnails/deliverables/Type=deliverable, Style=outline.svg");
	}


/* ------------------------------ */
/* PAGE ERROR CODES */
/* ------------------------------ */

	.error .body {			
		height:100vh; 
		display: flex; 
		flex-direction: column; 
		justify-content: space-between; 
		align-content: center; 
		align-items: center;
	}


	.error-code {
		
		height: 100%; 
		display:flex; 
		
		align-items: center; 
					
		text-align: center;
	}

	.error-code .content-header {
		
		padding-top: 0;
		padding-bottom: 4rem;
		display:flex; 
		flex-direction: column;
		justify-content: center;
		align-items: center;

		/*gap: var(--sp100);*/
	}

	.error-code .content-header h1,
	.error-code .content-header p {
		
	}


/* ------------------------------ */
/* HOME TILES */
/* ------------------------------ */
	.home-tiles {
		display: flex;
		flex-direction: row;	
		justify-content: space-between;		
		align-items: stretch;		
		column-gap: 4rem;	
		margin-top: var(--sp500);
	}
	.home-tiles a.tile, .home-tiles .tile {
		position: relative;
		display: flex;
		justify-content: space-between;
		flex-direction: column;	
		row-gap: 4rem;
		align-items: stretch;
		flex-wrap: nowrap;		
		flex: 0 1 calc((50%)/1);
		color: var(--n20);

		text-decoration: none;
	}

	.home-tiles a.tile:hover:after {
		display: none;
	}
	.tile-wrapper h1 {
		display: block;
  		word-wrap: break-word;
  		overflow-wrap: break-word;

		-webkit-hyphens: auto;
   		-moz-hyphens: auto;
        hyphens: auto;
	}
	.home-tiles a.tile .tile-wrapper {
		padding: 6.8rem 8rem 6.8rem 8rem;
		height: 100%;		
	}
	.home-tiles .tile .tile-wrapper:hover {
		cursor: pointer;
		/*outline: var(--l200) solid var(--n20);*/
	}
	.home-tiles a.tile .tile-wrapper:hover:after {		
	  	animation-name: slightMoveIn;
	  	animation-duration: var(--a100);
	  	animation-timing-function: ease;	
	  	animation-fill-mode: forwards;				
	}
	.home-tiles a.tile .tile-wrapper:active {
		opacity: 0.75;
	}	
	.home-tiles a.tile .tile-wrapper:after {
		width: 3.6rem;
		height: 3.6rem;	
		content: "";
		position: absolute;
		right: 1.4rem;
		top: 1.4rem;
		margin: auto 0;
	  	animation-name: slightMoveOut;
	  	animation-duration: var(--a100);
	  	animation-timing-function: ease;	
	  	animation-fill-mode: forwards;
	  	display: block;  	
	  	background-repeat: no-repeat;
	  	background-size: 3.6rem;
	  	background-position: center;		
	  	background-image: url("../resources/ic/ic_arrow_right_n20.svg");
	}	


/* ------------------------------ */
/* CONTACT */
/* ------------------------------ */
	.contact .header .item {
		flex: 0 0 calc((100% - 4rem)/2);
		margin-bottom: var(--sp400);
	}
	.contact .header .item:last-child {
		margin-right: 0;
	}
	.contact .header .item ul, .contact-bar ul {
		list-style: none;
		padding: 0;
	}
	.contact .header .item ul li, .contact-bar ul li {
		margin-bottom: 0.4rem;
	}
	.contact .header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
		flex-wrap: wrap;
	}
	.contact-bar div {
		display: inline-block;
		margin-right: 16rem;
		margin-bottom: var(--sp600);
	}	


/* ------------------------------ */
/* CONTENT */
/* ------------------------------ */

	.content-header {
		width: 100%;
		position: relative;
		padding-top: var(--sp600);
	}

	.content-header .wrapper {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
		flex-wrap: nowrap;
		row-gap:  var(--sp400);		
		column-gap:  var(--sp400);
	}
	.content-header .wrapper .content p {
		max-width: 60rem;
	}	
	.content-header .wrapper .btn-primary-wrapper p {
		white-space: nowrap;
	}		



	.content-header h1 {
		width: 55%;
	}
	.content-header p.subline {
		width: 70%;
	}
	.content-wrapper {
		width: 90%;
		margin: 0 auto;	
	}
	.item.img {
		max-height: 64rem;  		
  		display: flex;
  		justify-content: center;	
  		align-items: center;	

	}
	.item.img img {
		width: 100%;	
	}

	.section-wrapper .img, .content-wrapper-blog-margin .img, .body-wrapper .img {
		max-height: 64rem;  		
  		display: flex;
  		justify-content: center;	
  		align-items: center;	
	}

	.img.auto-height {
		max-height: 100vh !important;
	}


	.section-wrapper .img img, .content-wrapper-blog-margin .img img, .body-wrapper .img img {
		width: 100%;

	  	-webkit-transition: var(--a400) ease-in-out;
	  	transition: var(--a400) ease-out;   
	}
	.section-wrapper .img, .content-wrapper-blog-margin .img, .body-wrapper .img {
		width: 100%;
		overflow: hidden;
		
	}	
	.section-wrapper .section-item {
		width: 50%;
	}	

	.content-wrapper-blog-margin {
		width: 60%;
		margin: 0 auto;
	}

	.content-wrapper-blog {
		width: 90%;
		margin: 0 auto;
	}
	.content-wrapper-blog.header .header .item {
		flex: 0 0 calc((100% - 4rem)/2);
		margin-bottom: var(--sp400);
	}	

	.content-wrapper-blog .header .item {
		flex: 0 0 calc((100% - 4rem)/1);
		margin-bottom: var(--sp400);
	}	

	.content-wrapper-blog h1 {
		width: 100%;
	}
	.content-wrapper-blog p.subline {
		width: 100%;
	}	

	.content-wrapper-blog h2 {
		margin-bottom: var(--sp300);
	}
	.content-wrapper-blog h3 {
		margin-bottom: var(--sp100);
	}	
	.full-width-wrapper {
		margin: 0 auto;
	}
	.full-width-wrapper .img {
		display: flex;
		flex-direction: column;		
		max-height: 64rem;
		overflow: hidden;
		justify-content: center;
	}
	.full-width-wrapper .img img {
		width: 100%;	
	}


	/* Switch TBD */

	.content-wrapper .img.switch {
		background-color: var(--h40);
		width: 100%;
		height: 43rem;
		overflow: hidden;
		position: relative;		
	}	
	.content-wrapper .img.switch .switch-a, .content-wrapper .img.switch .switch-b {
	    position: absolute;
	    right: 0;
	    left: 0;
	    top: 0;
	    bottom: 0;
	    margin: auto auto;	
	}
	.content-wrapper .img.switch .switch-a {
	  	clip-path: inset(0 0 0 40px);
	  	-webkit-clip-path: inset(0 0 0 40px);
	  	-moz-clip-path: inset(0 0 0 40px);
	  	z-index: 2;
	}		
	.content-wrapper .img.switch .switch-b {
	  	clip-path: inset(0 0 0 0);
	  	-webkit-clip-path: inset(0 0 0 0);
	  	-moz-clip-path: inset(0 0 0 0);
	  	z-index: 1;
	}	
	.content-wrapper .img.switch img {
		width: 100%;
	    position: absolute;
	    right: 0;
	    left: 0;
	    top: 0;
	    bottom: 0;
	    margin: auto auto;	
	}



	.author {
		color: var(--n60);
	}
	.author span {
		margin-left: var(--sp50);
		margin-right: var(--sp50);
	}
	.author span:first-child {
		margin-left: 0;
	}


	ul.link {
		padding: 0;
		list-style: none;
	}
	ul.link li {
		margin-bottom: var(--sp50);
	}


	.content-flex .content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
		flex-wrap: wrap;	
	}
	.content-flex .content div {
		flex: 0 0 calc((100% - 8rem)/2);
	}	


/* ------------------------------ */
/* PICTURE GALLERY */
/* ------------------------------ */

	.gallery-wrapper .gallery .img div p {
		position: absolute;
		bottom: 2rem;
		padding: 1.5rem 2rem 1.5rem 2rem;
		background-color: var(--t96);
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		color: var(--n20);
	}
	.gallery-wrapper .gallery .img.hide-description div p {
		display: none;
	}
	.gallery-wrapper .gallery .img div {
		position: relative;
		margin: 0 1px 0 1px;
	}	

	.gallery-wrapper {
		position: relative;
	}	
	.gallery-wrapper.auto-height {
		
	}
	.gallery {
		max-height: 64rem;
		overflow: hidden;
	}
	.gallery-wrapper.auto-height, .gallery-wrapper.auto-height .gallery, .gallery-wrapper.auto-height .img {
		max-height: 100vh !important;
	}
	.gallery-nav {

	}

	.gallery .container {
		
	}

	.gallery .container .img {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: stretch;
		
	}

	.gallery .container .img div {
		width: 100%;
	}

	.gallery .container .img div img {
		height: 100%;
		object-fit: cover;
	}

	.gallery-wrapper .steps {					
		display: flex;
  		justify-content: center;	
  		align-items: center;
  		column-gap: 1.2rem;	
  		padding: 2rem;		
	}
	.gallery-wrapper .steps span {		
		width: 6px;
		height: 6px;
		background-color: var(--n80);
		border-radius: 100%;
	}	
	.gallery-wrapper .steps span.active {
		background-color: var(--n20);
	}	


/* ------------------------------ */
/* ACCORDEON */
/* ------------------------------ */

	.acc-header {
		height: auto;
		position: relative;
		transition: 0.4s;		
		padding-bottom: var(--sp50);
	}
	.acc-header:hover > .divider {
		background-color: var(--n20);
	}	
	.acc-header p {
		width:  75%;
	}	
	.acc-header:hover {
		cursor: pointer;
	}
	.acc-header:active {
		opacity: 0.75;
	  	-webkit-transition: 0ms ease-in-out;
	  	transition: 0ms ease-in-out;		
	}
	.acc-header h2 {
		margin: auto 0 !important;
		padding: 2rem 0;
		line-height: 5rem;
		width: 80%;
  		-webkit-hyphens: auto;
   		-moz-hyphens: auto;
        hyphens: auto;
	}
	.acc-header .ic-wrapper {
		position: absolute;
		top: 3.2rem;
		right: 0;
		height: 3.6rem;
		width: 3.6rem;		
	}
	.acc-header .ic, .acc-header .ic:after {
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		width: 100%;		
		background-repeat: no-repeat;
	  	background-position: center;
	}
	.acc-header .ic {
		background-image: url("../resources/ic/ic_minus_black.svg");
	  	animation-name: rotateIcB;
	  	animation-duration: var(--a200);
	  	animation-timing-function: ease;
	  	animation-fill-mode: forwards;			
		
	}
	.acc-header .ic.active {
	  	animation-name: rotateIc;
	  	animation-duration: var(--a200);
	  	animation-timing-function: ease;
	  	animation-fill-mode: forwards;	 		
	}
	.acc-header .ic.active:after {	
	  	animation-name: rotateIcAfter;
	  	animation-duration: var(--a200);
	  	animation-timing-function: ease;
	  	animation-fill-mode: forwards;	
	}
	.acc-header .ic:after {
		content: "";
		background-image: url("../resources/ic/ic_minus_black.svg");
		transform: rotate(90deg);
	  	animation-name: rotateIcAfterB;
	  	animation-duration: var(--a200);
	  	animation-timing-function: ease;
	  	animation-fill-mode: forwards;			
	}
	.acc {
		position: relative;
		display: block;
		height: auto;
	}
	.panel .panel-content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
		flex-wrap: wrap;	
	}
	.panel .panel-content > div {
		flex: 0 0 calc((100% - 8rem)/2);
	}	
	.panel .panel-content div.blog {
		flex: 0 0 100%;
	}		
	.panel {
		position: relative;
		display: none;
		overflow: hidden;
		width: 100%;	  		  	
	  	animation-name: showAcc;
	  	animation-duration: var(--h200);
	  	animation-timing-function: ease;
	  	animation-fill-mode: forwards;	  			
	}

	.panel-content .img {
		background-color: var(--h40);	
		width: 100%;		
		overflow: hidden;
		position: relative;

	} 
	.panel-content .img img {
		width: 100% !important;
	    position: absolute;
	    right: 0;
	    left: 0;
	    top: 0;
	    bottom: 0;
	    margin: auto auto;	

	  	-webkit-transition: var(--a400) ease-in-out;
	  	transition: var(--a400) ease-in-out;    
	}	

	
	@keyframes showAcc {
	  from {
	  	/*transform: translateY(-2rem);*/
	  	opacity: 0;	  
	  }
	  to {
	  	/*transform: translateY(0rem);*/
	  	opacity: 1;
	  }
	}
	@keyframes rotateIc {
	  from {
	  	transform: rotate(-90deg); 
	  }
	  to {
	  	transform: rotate(0deg);
	  }
	}
	@keyframes rotateIcB {
	  from {
	  	transform: rotate(0deg); 
	  }
	  to {
	  	transform: rotate(-90deg);
	  }
	}	
	@keyframes rotateIcAfter {
	  from {
	  	transform: rotate(-90deg);
	  	opacity: 1;
	  }
	  to {
	  	transform: rotate(0deg);
	  	opacity: 1;
	  }
	}
	@keyframes rotateIcAfterB {
	  from {
	  	transform: rotate(0deg);
	  	opacity: 1;
	  }
	  to {
	  	transform: rotate(-90deg);
	  	opacity: 1;
	  }
	}			


/* ------------------------------ */
/* BLOG */
/* ------------------------------ */

	.blog {
		display: row;
		flex-direction: column;
		justify-content: space-between;
		align-items: stretch;
		flex-wrap: wrap;		
	}
	.blog .divider:first-child {
		opacity: 0;
	}

	.blog-wrapper .article {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		margin-bottom: var(--sp400);
		margin-top: var(--sp400);
		column-gap: 4rem;
	}
	.blog-wrapper .article .article-content {
		flex: 0 0 calc((100% - 4rem)/2);
	}	
	.blog-wrapper .article .article-content h2 {
		margin-top: var(--sp200);
	}
	.blog-wrapper .article .article-content p.date {
		color: var(--n60);
		margin-top: var(--sp200);
	}
	.blog-wrapper .article .article-content p.description {
		margin-top: var(--sp300);
		margin-bottom: var(--sp400);
	}
	.blog-wrapper .article .article-content p.more {
		display: none;
		margin-bottom: var(--sp400);
	}
	.blog-wrapper .article .article-content a {		
		font-family: 'Barlow', sans-serif;
		font-size: 1.8rem;
		font-weight: 400;
		line-height: 3.2rem;
		margin: 0;
		position: relative;		
	}			
	.blog .img {
		background-color: var(--h40);
		height: 46rem;
		overflow: hidden;
		position: relative;		
	}
	.blog .img img {
		height: 100%;			
	    position: absolute;
	    right: 0;
	    left: 0;
	    top: 0;
	    bottom: 0;
	    margin: auto auto;
	    object-fit: cover !important;	
	}
	.blog-quote {
		font-family: 'Barlow Semi Condensed', sans-serif;
		font-size: 2.4rem;
		font-weight: 400;
		line-height: 3.8rem;
		font-style: italic;
		text-align: center;
		padding: 4rem;
		
  		border-style: solid;
  		border-width: var(--l100);		
  		border-left-width: 0;
  		border-right-width: 0;

  		border-image: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 40%, var(--n20) 40%, var(--n20) 60%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 100%) 1;
	}
	.blog-quote:after {
		content: "";
	}

	.blog-quote.left {
		border-image: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 0%, var(--n20) 0%, var(--n20) 20%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 100%) 1;
		text-align: left !important;
		padding-left: 0rem;
		mix-blend-mode: multiply;
	}	

	.blog-quote.left.small {
		font-size: 1.8rem;
		font-weight: 400;
		line-height: 2.4rem;		
	}


/* ------------------------------ */
/* PROJECT */
/* ------------------------------ */
	.projects.blog {
		justify-content: center;
		display: flex;
		flex-direction: row;
		align-items: stretch;
		flex-wrap: wrap;
		column-gap: var(--sp400);	
	}

	.projects,
	.references {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		flex-wrap: wrap;
		row-gap: var(--sp400);
		column-gap: var(--sp400);	
	
	}
	.project-wrapper {		
		flex: 0 0 calc((100% - 8rem)/3);
	}	
	.project-wrapper > a:hover:after {
		opacity: 0;
	}
	.project-wrapper.col2 {
		flex: 0 0 calc((100% - 4rem)/2);
	}
	.project .img, .panel .img {
		background-color: var(--h40);
		width: 100%;
		height: 36rem;
		overflow: hidden;
		position: relative;
	}
	.project .img:after { 
		width: 3.6rem;
		height: 3.6rem;	
		content: "";
		position: absolute;
		right: 1.4rem;
		top: 1.4rem;
		margin: auto 0;
		z-index: 2;
	  	animation-name: slightMoveOut;
	  	animation-duration: var(--a100);
	  	animation-timing-function: ease;	
	  	animation-fill-mode: forwards;
	  	display: block;  	
	  	background-repeat: no-repeat;
	  	background-size: 3.6rem;
	  	background-position: center;		
	  	background-image: url("../resources/ic/ic_arrow_right_white.svg");
	}
	.project.dark .img.active:after  { 	
		background-image: url("../resources/ic/ic_arrow_right_n20.svg");
	}
	.img.dark:after {
		background-image: url("../resources/ic/ic_arrow_right_n20.svg");
	}
	.project .img.active:after  { 		
	  	animation-name: slightMoveIn;
	  	animation-duration: var(--a100);
	  	animation-timing-function: ease;	
	  	animation-fill-mode: forwards;		
	}

	.news .img {

	}
	.news .img img {
    	width:  200% !important;
	    left:  -50% !important;
	  	-webkit-transition: 200ms ease-in-out;
	  	transition: 200ms ease-in-out;
	}

	.project .img img, .panel .img img {	
		width: 110%;
	    position: absolute;
	    right: 0;
	    left: 0;
	    top: 0;
	    bottom: 0;
	    margin: auto auto;	
	  	-webkit-transition: 200ms ease-in-out;
	  	transition: 200ms ease-in-out;   
	} 
	.project .img img {
	  	filter: grayscale(100%);
	  	-webkit-filter: grayscale(100%);		
	}

	.project:hover {
		cursor: pointer;
	}
	.project.dark:hover .content {
		color: var(--n20) !important;
	}
	.content.dark {
		color: var(--n20) !important;
	}
	.project:hover .img img {
		opacity: 0.00;	
	}
	.project:active {
		opacity: 0.75;
	}	


	.project p.description {
		display: none;
		margin-top: var(--sp200);
	}


	.project h2, .project p.title {
		font-weight: 600;
		margin-bottom: 0.4rem;
	}

	.project h2 {		
		-webkit-hyphens: auto;
   		-moz-hyphens: auto;
        hyphens: auto;		
	}

	.projects .project,
	.references .project {
		position: relative;
		overflow: ;

	}
	.projects .project:after,
	.references .project:after {
		content: "";
		position: absolute;
		background-color: var(--n20);		
		width: 100%;
		height: 100%;		
		opacity: 0.65; /*Background darken*/
		z-index: 1;
		left: 0;
		top: 0;
	}
	.projects .project.blog:after,
	.references .project.blog:after {
		opacity: 0;
	}

	.projects .project:hover:after,
	.references .project:hover:after {
		opacity: 0;
	  	-webkit-transition: 200ms ease-in-out;
	  	transition: 200ms ease-in-out; 
	}

	.projects .project .content,
	.references .project .content {
		position: absolute;
		bottom: 0;
		left: 0;
		color: var(--n100);		
		padding: 4rem;
		z-index: 2;
		width: calc(100% - 8rem);
	}

	.projects .project .content p.description,
	.references .project .content p.description {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden; 
	}
	.projects .project .content h2.title,
	.references .project .content h2.title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden; 
	}		

	.projects .project img,
	.references .project img {

		opacity: 1;	
	}	


/* ------------------------------ */
/* FOOTER */
/* ------------------------------ */
	.footer {
		display: inline-block;
		width: 100%;
	}
	.footer .body-wrapper {
		margin-top: 1.8rem;		
	}
	.footer ul {
		padding: 0;
		float: left;
		margin: 0;

	}
	.footer ul li {
		display: inline-block;
		margin-right: 3.2rem;
		height: 3.6rem;
		margin-bottom: 1.6rem;
	}
	.footer p {
		font-family: 'Barlow', sans-serif;
		font-size: 1.8rem;
		float: right;
		height: 3.6rem;
		line-height: 3.6rem;
		font-weight: 400;
		margin-bottom: 1.6rem;
	}
	.footer a.link {
		font-size: 1.8rem;
		font-weight: 400;
		font-family: 'Barlow', sans-serif;
		line-height: 3.2rem;
	}


/* ------------------------------ */
/* NAVIGATION */
/* ------------------------------ */

	/* App Name */

		.top-nav p.app-name	{
			display: flex;
			align-items: center;			
			margin-left: 2rem;
			font-weight: 600;
			position: absolute;
			width: auto;
			top: 1.2rem;
			left: 12rem;
			display: none;
		}

	/* Language select */

		.top-nav ul li.lang-select a, .top-nav ul li.lang-select span {
			font-family: 'Barlow', sans-serif;
			font-size: 1.8rem;
			font-weight: 400 !important;
			line-height: 2.4rem;
		}

		.top-nav ul li.lang-select a:hover { 
			color: var(--n100) !important;
		}
		.top-nav ul li.lang-select:active {
			opacity: 1 !important;
		}	

		.top-nav.light ul li.lang-select a.active {
			color: var(--n100) !important;
			font-weight: 600 !important;
		}

		.top-nav ul li.lang-select a:after { 
			background-color: var(--n100) !important;
			opacity: 0;
		}	
		.top-nav ul li.lang-select span {
			padding-left: var(--sp50);
			padding-right: var(--sp50);
		}
		.top-nav ul li.lang-select {
			margin-left: var(--sp100);
		}


		.top-nav.light ul li.lang-select a, .top-nav.light ul li.lang-select span {
			color: var(--n60) !important;
		}
		.top-nav.dark ul li.lang-select a, .top-nav.light ul li.lang-select span {
			color: var(--n60) !important;
		}
		.top-nav.dark ul li.lang-select a:after { 
			background-color: var(--n20) !important;
		}
		.top-nav.dark ul li.lang-select a:hover { 
			color: var(--n20) !important;
		}
		.top-nav.dark ul li.lang-select a.active {
			color: var(--n20) !important;
			font-weight: 600 !important;
		}		

	/* Show / Hide */

		.animate-show {
		  	animation-name: showNav;
		  	animation-duration: var(--a200);
		  	animation-timing-function: ease;	
		  	animation-fill-mode: forwards;
		  	opacity: 1;
		}
		.animate-hide {
		  	animation-name: hideNav;
		  	animation-duration: var(--a200);
		  	animation-timing-function: ease;
		  	animation-fill-mode: forwards;
		  	opacity: 0;
		}
		@keyframes hideNav {
		  from {
		  	transform: translateY(0rem);
		  	-webkit-transform: translateY(0rem); 
		  	opacity: 1;
		  }
		  to {
		  	transform: translateY(-6.4rem);
		  	-webkit-transform: translateY(-6.4rem); 
		  	opacity: 0;
		  }
		}
		@keyframes showNav {
		  from {
		  	transform: translateY(-6.4rem);
		  	-webkit-transform: translateY(-6.4rem); 
		  	opacity: 0;
		  }
		  to {
		  	transform: translateY(0rem);
		  	-webkit-transform: translateY(0rem);
		  	opacity: 1;
		  }
		}
		@keyframes showBg {
		  from {opacity: 0;}
		  to {opacity: 1;}
		}
		@keyframes hideBg {
		  from {opacity: 1;}
		  to {opacity: 0;}
		}

		#nav-desktop .nav-icon {
			display: none;
		}

	/* Theming */

		.top-nav .bg {
			background-color: var(--n100);
			width: 100%;
			height: 100%;
		}
		.top-nav.light ul li:hover > p:after, .top-nav.light ul li.active > p:after, .top-nav.light ul li:hover > a:after, .top-nav.light ul li.active > a:after {
			background-color: var(--n100);
		}
		.top-nav.dark ul li:hover > p:after, .top-nav.dark ul li.active > p:after, .top-nav.dark ul li:hover > a:after, .top-nav.dark ul li.active > a:after {
			background-color: var(--n20);
		}
		.top-nav.light ul li, .top-nav.light ul li a {
			color: var(--n100) !important;
		}
		.top-nav.light #logo, .top-nav.light #mobile-logo {
			background-image: url("../resources/logo_light.svg");
		}
		.top-nav.light .nav-icon:after {
			background-image: url("../resources/ic/ic_menu_white.svg");	
		}		
		.top-nav.dark ul li, .top-nav.dark ul li a  {
			color: var(--n20) !important;
		}
		.top-nav.dark #logo, .top-nav.dark #mobile-logo {
			background-image: url("../resources/logo_dark.svg");
		}
		.top-nav.dark .nav-icon:after {
			background-image: url("../resources/ic/ic_menu_black.svg");	
		}	

	/* Fix Nav */

		.top-nav {
			width: 100%;
			height: 6.4rem;
			position: absolute;
			z-index: 9999999;
			transform-origin: top;
		}
		.top-nav .body-wrapper {
			position: relative;
		}
		#logo, #mobile-logo  {	
		  	background-repeat: no-repeat;
		  	background-size: 14rem;
		  	background-position: center;	
		  	width: 12.6rem;
		  	height: 100%;
		  	float: left;
		  	position: relative;
		  	white-space: nowrap;
		  	display: inline-block;
		  	top: -0.4rem;
		}
		#logo:active, #mobile-logo:active {
			opacity: 0.75;
		}	
		.top-nav ul {
			padding: 0;
			margin: 0;	
			display: inline-block;
			position: absolute;
			right: 0;		
		}
		.top-nav ul li{
			display: inline-block;
			padding: 1.6rem 2rem 2rem 2rem;	
		}
		.top-nav ul li p, .top-nav ul li a {
			font-family: 'Barlow', sans-serif;
			font-size: 1.8rem;
			font-weight: 400 !important;
			line-height: 2.4rem;		
		}
		.top-nav ul li:hover {
			cursor: pointer;
		}
		.top-nav ul li:active {
			opacity: 0.75;
		}	

		.top-nav ul li p {
			position: relative;
		}
		.top-nav ul li:hover > p:after, .top-nav ul li.lang-select a.active:after  {
			position: absolute;
			content: "";	
			height: var(--l100);
			width: 100%;
			left: 0rem;
			bottom: -0.6rem;

		  	animation-name: moveScale;
		  	animation-duration: var(--a100);
		  	transform-origin: left;	
		  	animation-timing-function: ease;
		}

		.top-nav ul li.active p:after, .top-nav ul li.active a:after {
			position: absolute;
			content: "";	
			height: var(--l100);
			width: 100%;
			left: 0px;
			bottom: -0.6rem;	
		}

		#logo:hover, #mobile-logo:hover {
			cursor: pointer;
		}

	/* Mobile */

		#nav-mobile {
			display: none;
			height: 100%;
			overflow: hidden;
		}
		#nav-mobile #mobile-logo{
			display: none;
		}	

		#nav-mobile .top-nav {
			position: absolute;			
			overflow: hidden;

		}

		#nav-mobile .bg {
			background-color: var(--b84);
			width: 100vw;
			height: 100vh;
			z-index: 99999999999999;
		}
		#nav-items-mobile {
			position: absolute;
			height: calc(100vh - (100vh / 8 * 2));
			top: calc(100vh / 8);		
			left: calc(100vw / 20);			
	  		overflow-x: hidden;
	  		overflow-y: auto;
		}
		#nav-items-mobile li {
			display: block !important;
		}
		#nav-items-mobile li p, #nav-items-mobile li a {
			font-family: 'Barlow Semi Condensed', sans-serif;
			font-size: 3.6rem;
			font-weight:400;
			line-height: 4.6rem;	
			display: inline-block;
		}		

		#nav-items-mobile li.lang-select a {
			font-family: 'Barlow Semi Condensed', sans-serif;
			font-size: 2.4rem;
			font-weight: 400;
			line-height: 3.8rem;	
			display: inline-block;		
		}
		#nav-items-mobile li.lang-select {
			margin-left: 0;
		}
		#nav-items-mobile li .quote {
			/*font-family: 'Barlow', sans-serif;
			font-size: 2.4rem;
			font-weight: 400;
			line-height: 3.8rem;*/
			
			font-family: 'Barlow', sans-serif;
			font-size: 1.8rem;
			font-weight: 400;
			line-height: 3.2rem;		

			margin-top: var(--sp200);
			padding-top: var(--sp400);
			border-top: 1px solid var(--n100);

			opacity: 0.75;
		}
		#nav-items-mobile li:hover .quote {		
			cursor: auto;
		}
		#nav-mobile .logo-wrapper {
			width: 100%;
			display: block;
			float: left;
			margin-bottom: 6.4rem;
		}
		#nav-mobile .nav-icon, #nav-desktop .nav-icon {			
			padding-right: 5.6rem;	
			position: relative;			
		}		
		#nav-mobile .nav-icon:after, #nav-desktop .nav-icon:after{
			content: "";
			position: absolute;
			top: 0.8rem;
			right: 0;
			width: 4rem;
			height: 4rem;
		  	background-repeat: no-repeat;
		  	background-size: 3.6rem;
		  	background-position: center;		  		
		}
		#nav-mobile .nav-icon:after {
			background-image: url("../resources/ic/ic_cross_white.svg");
		}


		.show-mobile-nav, .hide-mobile-nav {
		  	animation-duration: var(--a200);
		  	animation-timing-function: ease;
		  	animation-fill-mode: forwards;
		  	z-index: 999999999;
		  	left: 0;	
		}

		.body {
		  	animation-duration: var(--a200);
		  	animation-timing-function: ease;
		  	animation-fill-mode: forwards;
		  	position: relative;
		  	transform-origin: 0 50%;
		  	-ms-transform-origin: 0 50%;
		}
		.show-mobile-nav {
			animation-name: showMobileNav;
		}
		.hide-mobile-nav {
			animation-name: hideMobileNav;
		}	

		.body.show {
			animation-name: showBody;
		}
		.body.hide {
			animation-name: hideBody;
		}
		@keyframes hideBody {
			from {transform: translateX(0vw);}
			to {transform: translateX(20vw);}
		}
		@keyframes showBody {
			from {transform: translateX(20vw);}
			to {transform: translateX(0vw);}
		}

		@keyframes showMobileNav {
		  from {transform: translateX(-100vw);}
		  to {transform: translateX(0px);}
		}
		@keyframes hideMobileNav {
		  from {transform: translateX(0px);}
		  to {transform: translateX(-100vw);}
		}		


/* ------------------------------ */
/* PRIMARY BUTTON */
/* ------------------------------ */

	/* Button Download */
	.btn-primary-wrapper.download .btn-state-a p:after {
		background-image: url("../resources/ic/ic_download_n20.svg");
	}
	.btn-primary-wrapper.download .btn-state-b p:after {
		background-image: url("../resources/ic/ic_download_white.svg");
	}	

	/* Button Cancel */
	.btn-primary-wrapper.cancel .btn-state-a p:after {
		background-image: url("../resources/ic/ic_cross_n20.svg");
	}	
	.btn-primary-wrapper.cancel .btn-state-b p:after {
		background-image: url("../resources/ic/ic_cross_white.svg");
	}	



	.btn-primary-wrapper .btn-state-a p:after, 
	.btn-primary-wrapper.fixed .btn-state-a:after, 
	.btn-primary-wrapper.gallery-btn .btn-state-a:after {
		background-image: url("../resources/ic/ic_arrow_right_n20.svg");
	}	

	/* Disabled */

		.btn-primary-wrapper.disabled {
			opacity: 0.34;
			pointer-events: none;
		}
		/*
		.btn-primary-wrapper.disabled:hover {
			cursor: auto !important;
		}*/


	/* Invert */

		.btn-primary-wrapper.invert {
			border-color: var(--n100);
		}
		.btn-primary-wrapper.invert .btn-state-a p {
			color: var(--n100);
		}
		.btn-primary-wrapper.invert .btn-state-a p:after {
			background-image: url("../resources/ic/ic_arrow_right_white.svg");
		}
		.btn-primary-wrapper.invert .btn-state-b {
			background-color: var(--n100);
			color: var(--n20);
		}
		.btn-primary-wrapper.invert .btn-state-b p:after {
			background-image: url("../resources/ic/ic_arrow_right_n20.svg");
		}

		.btn-primary-wrapper.invert:active {
			color: var(--n20);
			background-color: var(--n100);
			opacity: 0.75;
		}	

	/* Default */

		.btn-primary-wrapper.fixed.back {
			top: var(--sp400); 
			left: 0vw;
			z-index: 999999;
		}

		.btn-primary-wrapper.gallery-btn {	
			position: absolute;	
	    	top: 45%; 	
	    	transform: translateY(-45%);
	    	overflow: visible;
		}
		.btn-primary-wrapper.gallery-btn {		
			background-color: rgba(255,255,255,1);
			box-shadow: -10px -10px 0 #fff;
			z-index: 1;
		}	

		.btn-primary-wrapper.gallery-btn.gallery-back {
			/*transform: rotate(0deg);*/
			transform: scaleX(-1);
			left: -3.2rem;
		}
		.btn-primary-wrapper.gallery-btn.gallery-right {
			transform: scaleX(1);
			right: -3.2rem;
		}

		.btn-primary-wrapper.fixed {
			position: absolute;
			transform: rotate(180deg);
		}
		.btn-primary-wrapper {
			height: 6.4rem;
			border: var(--l200) solid var(--n20);
			position: relative;
			display: inline-block;	
			overflow: hidden;
		}
		.btn-primary-wrapper:not(.disabled):hover {
			cursor: pointer;
		}

		.btn-primary-wrapper.fixed .btn-state-a, 
		.btn-primary-wrapper.fixed .btn-state-b {
			width: 100%;
			height: 100%;
		}

		.btn-primary-wrapper.gallery-btn .btn-state-a, 
		.btn-primary-wrapper.gallery-btn .btn-state-b {
			width: 100%;
			height: 100%;	
		}

		.btn-primary-wrapper:not(.disabled):hover > .btn-state-b, 
		.btn-primary-wrapper.fixed:not(.disabled):hover > .btn-state-b {
		  	animation-name: clipIn;
		  	animation-duration: var(--a100);
		  	transform-origin: left;	
		  	animation-timing-function: ease;	
		  	display: block;
		}

		.btn-primary-wrapper:not(.disabled):active {
			color: var(--n100);
			background-color: var(--n20);
			opacity: 0.75;
		}

		.btn-primary-wrapper .btn-state-b p:after {
			transform: translateX(0.2rem);
		}	

		.btn-primary-wrapper:not(.disabled):hover > .btn-state-b p:after, 
		.btn-primary-wrapper:not(.disabled):hover > .btn-state-a p:after, 
		.btn-primary-wrapper.fixed:not(.disabled):hover > .btn-state-b:after, 
		.btn-primary-wrapper.fixed:not(.disabled):hover > .btn-state-a:after, 
		.btn-primary-wrapper.gallery-btn:not(.disabled):hover > .btn-state-b:after, 
		.btn-primary-wrapper.gallery-btn:not(.disabled):hover > .btn-state-a:after  {
		  	animation-name: slightMoveIn;
		  	animation-duration: var(--a100);
		  	animation-timing-function: ease;	
		  	animation-fill-mode: forwards;
		  	display: block;  	
		}
		.btn-primary-wrapper.fixed .btn-state-a:after, 
		.btn-primary-wrapper.fixed .btn-state-b:after, 
		.btn-primary-wrapper.gallery-btn .btn-state-a:after, 
		.btn-primary-wrapper.gallery-btn .btn-state-b:after {
			right: 1.4rem;
			width: 3.6rem;
			height: 3.6rem;	
			content: "";
			position: absolute;
			top: 1.4rem;
			margin: auto 0;

		  	animation-name: slightMoveOut;
		  	animation-duration: var(--a100);
		  	animation-timing-function: ease;	
		  	display: block;  	

		  	background-repeat: no-repeat;
		  	background-size: 3.6rem;
		  	background-position: center;		
		}
		.btn-primary-wrapper .btn-state-a p:after, 
		.btn-primary-wrapper .btn-state-b p:after {	
			width: 3.6rem;
			height: 3.6rem;	
			content: "";
			position: absolute;
			right: 0.8rem;
			top: 1.4rem;
			margin: auto 0;

		  	animation-name: slightMoveOut;
		  	animation-duration: var(--a100);
		  	animation-timing-function: ease;	
		  	animation-fill-mode: forwards;
		  	display: block;  	

		  	background-repeat: no-repeat;
		  	background-size: 3.6rem;
		  	background-position: center;
		}
		.btn-primary-wrapper .btn-state-a p {
			color: var(--n20);
		}	
		.btn-primary-wrapper .btn-state-a p:after, 
		.btn-primary-wrapper.fixed .btn-state-a:after, 
		.btn-primary-wrapper.gallery-btn .btn-state-a:after {
			background-image: url("../resources/ic/ic_arrow_right_n20.svg");
		}
		.btn-primary-wrapper .btn-state-b {
			position: absolute;
			top: 0;
			left: 0;
			background-color: var(--n20);
			color: var(--n100);
			overflow: hidden;

			clip-path: inset(-0.1rem 0% -0.1rem -0.1rem);
			-webkit-clip-path: inset(-0.1rem 0% -0.1rem -0.1rem);

			display: none;
		}
		.btn-primary-wrapper .btn-state-b p:after, 
		.btn-primary-wrapper.fixed .btn-state-b:after, 
		.btn-primary-wrapper.gallery-btn .btn-state-b:after {
			transform: translateX(0.2rem);
			background-image: url("../resources/ic/ic_arrow_right_white.svg");
		}
		.btn-primary-wrapper p {
			margin: 0;
			line-height: 6.4rem;
			margin: 0rem 6.4rem 0rem 2.4rem;
		}
		.btn-primary-wrapper.fixed {
			margin: 0;
			width: 6.4rem;
			height: 6.4rem;
		}
		.btn-primary-wrapper.gallery-btn {
			margin: 0;
			width: 6.4rem;
			height: 6.4rem;		
		}

		.btn-primary {
			position: relative;
			height: 6.4rem;
			width: 100%;
		}
		.btn-primary .btn-primary-wrapper {
			position: absolute;
			bottom: 0;
		}

	/* Primary Button Animation */

		@keyframes clipIn {
		  from {
		  	clip-path: inset(-0.1rem 100% -0.1rem -0.1rem);
		  	-webkit-clip-path: inset(-0.1rem 100% -0.1rem -0.1rem);
		  }
		  to {
		  	clip-path: inset(-0.1rem 0% -0.1rem -0.1rem);
		  	-webkit-clip-path: inset(-0.1rem 0% -0.1rem -0.1rem);
		  }
		}
		@keyframes slightMoveIn {
		  from {transform: translateX(0rem);}
		  to {transform: translateX(0.2rem);}
		}
		@keyframes slightMoveOut {
		  from {transform: translateX(0.2rem);}
		  to {transform: translateX(0rem);}
		}


/* ------------------------------ */
/* ACTION BUTTON */
/* ------------------------------ */

	.btn-wrapper {
		display: flex;
		flex-direction: row;
		column-gap: var(--sp200);
		align-items: center;
	}

	.btn-action.disabled {
		opacity: 0.25;
		pointer-events: none;
	}

	.btn-action {		
	  	background-repeat: no-repeat;	  	
	  	background-position: center;		  	
	  	-webkit-transition: 0.15s ease-in-out;
	  	transition: 0.15 ease-out;/**/
	}
	.btn-action:not(.disabled):active {	
		transform: scale(0.95);
	}
	.btn-action[type="border"] {		
		box-shadow: 0px 0px 0 2px var(--n20);
	}
	.btn-action[size="m"]:not(.btn-action[label]) {
		border-radius: 100%;
		width: 4.8rem;
		height: 4.8rem;
		background-size: 3.2rem;
	}
	.btn-action[size="l"]:not(.btn-action[label]) {
		border-radius: 100%;
		width: 6.4rem;
		height: 6.4rem;
		background-size: 3.2rem;
	}	

	.btn-action:not(.disabled) {
		cursor: pointer;
	}
	.btn-action:not(.disabled):not(.active):not(.disabled):hover {		
		/*box-shadow: 0px 0px 0 2px var(--n20);*/
		background-color: rgba(8,20,51,0.1);
	}
	.btn-action.active {
		background-color: var(--n20);
		/*box-shadow: 0px 0px 0 2px var(--n20);*/
	}
	.btn-action[type="border"].active {
		background-color: var(--n20);
		box-shadow: 0px 0px 0 2px var(--n20);
	}	

	/* ------------------------------ */
	/* Action Button label */

	.btn-action[label] {
		display: inline-flex;
		padding: 0 1.8rem 0 1.8rem;
		height: 4.8rem;
		background-size: 3.2rem;
		border-radius: 2.4rem;
	}
	.btn-action[label="right"] {
		background-position: 1rem;
	}
	.btn-action[label="left"] {
		background-position: calc(100% - 1rem) center;
	}	
	.btn-action[label] p {
		line-height: 4.8rem;
	}
	.btn-action[label="right"] p {
		margin-left: 3.2rem;
	}
	.btn-action[label="left"] p {
		margin-right: 3.2rem;
	}		

	/* ------------------------------ */
	/* Icons action buttons */
	/* ------------------------------ */

		.btn-action.ic_sort-az {	
			background-image: url("../resources/ic/ic_sort-az_n20.svg");
		}
		.btn-action.ic_sort-za {
			background-image: url("../resources/ic/ic_sort-za_n20.svg");	
		}			
		.btn-action.ic_mix {	
			background-image: url("../resources/ic/ic_mix_n20.svg");
		}
		.btn-action.ic_cross {	
			background-image: url("../resources/ic/ic_cross_n20.svg");
		}
		.btn-action.ic_check {	
			background-image: url("../resources/ic/ic_check_n20.svg");
		}
		.btn-action.ic_pause {	
			background-image: url("../resources/ic/ic_pause_n20.svg");
		}	
		.btn-action.ic_play {	
			background-image: url("../resources/ic/ic_play_n20.svg");
		}	
		.btn-action.ic_play-next {	
			background-image: url("../resources/ic/ic_play-next_n20.svg");
		}	
		.btn-action.ic_play-previous {	
			background-image: url("../resources/ic/ic_play-previous_n20.svg");
		}
		.btn-action.ic_reload {	
			background-image: url("../resources/ic/ic_reload_n20.svg");
		}
		.btn-action.ic_download {	
			background-image: url("../resources/ic/ic_download_n20.svg");
		}
		.btn-action.ic_more {	
			background-image: url("../resources/ic/ic_more_n20.svg");
		}
		.btn-action.ic_return {	
			background-image: url("../resources/ic/ic_return_n20.svg");
		}
		.btn-action.ic_info_b {	
			background-image: url("../resources/ic/ic_info_b_n20.svg");
		}																

		/* ------------------------------ */
		/* Active state */

		.btn-action.active.ic_sort-az {	
			background-image: url("../resources/ic/ic_sort-az_white.svg");
		}	
		.btn-action.active.ic_sort-za {	
			background-image: url("../resources/ic/ic_sort-za_white.svg");
		}	
		.btn-action.active.ic_mix {	
			background-image: url("../resources/ic/ic_mix_white.svg");
		}
		.btn-action.active.ic_cross {	
			background-image: url("../resources/ic/ic_cross_white.svg");
		}	
		.btn-action.active.ic_check {	
			background-image: url("../resources/ic/ic_check_white.svg");
		}
		.btn-action.active.ic_pause {	
			background-image: url("../resources/ic/ic_pause_white.svg");
		}	
		.btn-action.active.ic_play {	
			background-image: url("../resources/ic/ic_play_white.svg");
		}	
		.btn-action.active.ic_play-next {	
			background-image: url("../resources/ic/ic_play-next_white.svg");
		}	
		.btn-action.active.ic_play-previous {	
			background-image: url("../resources/ic/ic_play-previous_white.svg");
		}
		.btn-action.active.ic_reload {	
			background-image: url("../resources/ic/ic_reload_white.svg");
		}
		.btn-action.active.ic_download {	
			background-image: url("../resources/ic/ic_download_white.svg");
		}
		.btn-action.active.ic_more {	
			background-image: url("../resources/ic/ic_more_white.svg");
		}
		.btn-action.active.ic_return {	
			background-image: url("../resources/ic/ic_return_white.svg");
		}								


/* ------------------------------ */
/* TABLE */
/* ------------------------------ */
	
	.table-wrapper {

	}
	table.copy {
		font-family: 'Barlow', sans-serif;
		font-size: 1.8rem;
		font-weight: 400;
		line-height: 3.2rem;	

		width: 100%;	
	}
	
	table.copy tr th {
		text-align: left;
		font-weight: 600;
		/*max-width: 12rem;*/
	}
	table.copy tr td:last-child {
		
	}		
	table.copy tr td:nth-child(2) {
		/*max-width: 14rem;
		white-space: nowrap;*/
	}

	table.copy tr td {
		
	}		

	table.copy, 
	table.copy th, 
	table.copy td {
	  border-bottom: 0.1rem solid var(--n80);
	  border-collapse: collapse;	
	  padding: 1.25rem 1.75rem;	
	  vertical-align: top;
	}

	table.copy, 
	table.copy tr:last-child th, 
	table.copy tr:last-child td {
	  border-bottom-width: 0rem;
	}	



/* ------------------------------ */
/* DIVIDER */
/* ------------------------------ */
	.divider {
		height: 0.1rem;
		width: 100%;
		background-color: var(--n80);
	}


/* ------------------------------ */
/* SPACING */
/* ------------------------------ */
	.sp50 {margin-top: var(--sp50);}
	.sp100 {margin-top: var(--sp100);}
	.sp200 {margin-top: var(--sp200);}
	.sp300 {margin-top: var(--sp300);}
	.sp400 {margin-top: var(--sp400);}
	.sp450 {margin-top: var(--sp450);}
	.sp500 {margin-top: var(--sp500);}
	.sp600 {margin-top: var(--sp600);}
	.sp700 {margin-top: var(--sp700);}
	.sp1400 {margin-top: var(--sp1400);}


/* ------------------------------ */
/* BACKGROUNDS */
/* ------------------------------ */

	.bg01 {background-color: var(--b96) !important;}
	.bg02 {background-color: var(--t96) !important;}
	.bg03 {background-color: var(--y98) !important;}
	.bg04 {background-color: var(--n60) !important;}
	.bg05 {background-color: var(--n80) !important;}

	.bgBrandLB {background-color: #FFD000 !important;}
	.bgBrandKLE {background-color: #1755a2 !important;}
	.bgBrandSV {background-color: #FF0000 !important;} 
	.bgBrandDEK {background-color: #027D40 !important;}
	.bgBrandHKG {background-color: #023A7D !important;}
	.bgBrandNIC {background-color: #025282 !important;}
	.bgBrandVI {background-color: #CC0233 !important;}
	.bgBrandROW {background-color: #F17708 !important;}
	.bgBrandCA {background-color: #0073D0 !important;}
	.bgBrandKAE {background-color: #FFE500 !important;}
	.bgBrandST {background-color: #00893E !important;} 


/* ------------------------------------------------------------ */
/* ------------------------------ */
/* RESPONSIVE */
/* ------------------------------ */
/* < 640 ------------------------------------------------------------ */
	@media screen and (max-width: 640px) {

		html {
			word-wrap: break-word;
		}

		h1 {
			-webkit-hyphens: auto;
	   		-moz-hyphens: auto;
	        hyphens: auto;		
		}


		/* Body */
		.body-wrapper {
			width: 90%;
		}
		.list ul li {
			padding-left: 0;			
		}


		/* Other */	
		.home-tiles {			
			flex-direction: column;	
			row-gap: var(--sp400);	
		}				

		/* Projects */
		.projects, .projects.blog,
		.references, .projects.blog {
			flex-direction: column;	
		}	


		/* Blog */
		.blog {
			flex-direction: column;	
		}
		.blog-wrapper .article {
			flex-direction: column-reverse;
		}
		.content-wrapper {
			width: 90%;
			margin: 0 auto;	
		}				


		/* Navigation */
		#nav-desktop p.app-name	{
			opacity: 0;
		}
		#nav-desktop ul li.item:not(#nav-desktop.no-menu ul li.item) {
			display:none;
		}

		#nav-desktop ul li.nav-icon {
			display:block
		}	
		#nav-mobile {
			display: none;
		}	
		#nav-desktop {		
			display: block;
		}
		#nav-items-mobile li .quote {
			display: ;
		}		

		/* Content */
		.content-header h1 {
			width: 100%;
		}
		.content-header p.subline {
			width: 100%;
		}	
		.content-header .wrapper {
			flex-direction: column;
			align-items: flex-start;
		}		
		.contact .header {
			flex-direction: column;
		}
		.contact-bar {
			flex-direction: column;
		}		
		.section-wrapper .section-item {
			width: 100%;
		}		
		.content-wrapper-blog-margin {
			width: 100%;
		}
		.content-flex .content {
			flex-direction: column;
		}
		

		/* Accordeon */
		.panel .panel-content {
			flex-direction: row;
		}	
		.panel .panel-content > div {	
			order: 2;
			margin-bottom: var(--sp300);
			flex: 0 0 calc((100%)/1);
		} 			
		.panel .panel-content .img {	
			order: 1;
			margin-bottom: var(--sp300);
		}
		.acc-header p {
			width:  100%;
		}
		.panel-content .img {
			max-height: 20rem;
		}


		/* Gallery */
		.btn-primary-wrapper.gallery-btn.gallery-back{
			left: 3rem;
		}
		.btn-primary-wrapper.gallery-btn.gallery-right{
			right: 3rem;
		}	


		/* Table */	

		table.copy tr {
			display: flex;
			flex-direction: column;
		}
		table.copy, 
		table.copy th, 
		table.copy td {
			border-bottom-width: 0rem;
			padding: 0.25rem 1.75rem;
		}
		table.copy tr:not(tr:first-child) th {
			border-top: 0.1rem solid var(--n80);
			padding-top: 1.25rem
		}		
		table.copy tr td:last-child {
			padding-bottom: 1.25rem
		}		

	}
/* 640 ------------------------------------------------------------ */
	@media (max-width:767px) and (min-width:640px) {
		
		html {
			word-wrap: break-word;
		}
		h1 {
			-webkit-hyphens: auto;
	   		-moz-hyphens: auto;
	        hyphens: auto;		
		}		


		/* Body */		
		.body-wrapper {
			width: 90%;
		}
		.list ul li {
			padding-left: 0;			
		}	


		/* Projects */
		.projects, .projects.blog,
		.references, .projects.blog {
			flex-direction: column;	
		}		


		/* Blog */
		.blog {
			flex-direction: column;	
		}
		.blog-wrapper .article {
			flex-direction: column-reverse;
		}				


		/* Navigation */
		#nav-desktop ul li.item:not(#nav-desktop.no-menu ul li.item) {
			display:none
		}
		#nav-desktop ul li.nav-icon {
			display:block
		}
		#nav-mobile {
			display: none;
		}	
		#nav-desktop {		
			display: block;
		}


		/* Content */
		.content-header h1 {
			width: 100%;
		}
		.content-header p.subline {
			width: 100%;
		}	
		.content-header .wrapper {
			flex-direction: column;
			align-items: flex-start;
		}		
		.contact .header {
			flex-direction: column;
		}
		.section-wrapper .section-item {
			width: 100%;
		}
		.section-wrapper .section-item {
			width: 90%;
		}	
		.content-wrapper-blog-margin {
			width: 100%;
		}	
		.content-flex .content {
			flex-direction: column;
		}							


		/* Accordeon */
		.panel .panel-content {
			flex-direction: row;
		}	
		.panel .panel-content > div {	
			order: 2;
			margin-bottom: var(--sp300);
			flex: 0 0 calc((100%)/1);
		}					
		.panel .panel-content .img {	
			order: 1;
			margin-bottom: var(--sp300);
		}
		.panel-content .img {
			max-height: 20rem;
		}		


		/* Gallery */
		.btn-primary-wrapper.gallery-btn.gallery-back{
			left: 3rem;
		}
		.btn-primary-wrapper.gallery-btn.gallery-right{
			right: 3rem;
		}	


		/* Table */	

		table.copy tr {
			display: flex;
			flex-direction: column;
		}
		table.copy, 
		table.copy th, 
		table.copy td {
			border-bottom-width: 0rem;
			padding: 0.25rem 1.75rem;
		}
		table.copy tr:not(tr:first-child) th {
			border-top: 0.1rem solid var(--n80);
			padding-top: 1.25rem
		}		
		table.copy tr td:last-child {
			padding-bottom: 1.25rem
		}			

	}
/* 768 ------------------------------------------------------------ */
	@media (max-width:1023px) and (min-width:768px) {
		
		/* Body */	
		.body-wrapper {
			width: 90%;
		}
		.top-nav .body-wrapper {
			width: calc(100% - var(--sp500));
		}		


		/* Other */
		.home-tiles {			
			flex-direction: column;	
			row-gap: var(--sp400);	
		}			


		/* Projects */	
		.projects, .projects.blog,
		.references, .projects.blog {
			flex-direction: column;	
		}


		/* Blog */
		.blog {
			flex-direction: column;	
		}
		.blog-wrapper .article {
			flex-direction: column-reverse;
		}					


		/* Navigation */
		#nav-desktop ul li.item:not(#nav-desktop.no-menu ul li.item) {
			display:none
		}
		#nav-desktop ul li.nav-icon {
			display:block
		}	
		#nav-mobile {
			display: none;
		}	
		#nav-desktop {		
			display: block;
		}


		/* Content */
		.content-header h1 {
			width: 80%;
		}
		.content-header p.subline {
			width: 100%;
		}	
		.content-header .wrapper {
			flex-direction: column;
			align-items: flex-start;
		}			
		.contact .header {
			flex-direction: column;
		}
		.section-wrapper .section-item {
			width: 80%;
		}	
		.content-wrapper-blog-margin {
			width: 80%;
		}
		.content-flex .content {
			flex-direction: column;
		}					


		/* Accordeon */
		.panel .panel-content {
			flex-direction: row;
		}	
		.panel .panel-content > div {	
			order: 2;
			margin-bottom: var(--sp300);
			flex: 0 0 calc((100%)/1);
		}  			
		.panel .panel-content .img {	
			order: 1;
			margin-bottom: var(--sp300);
		}
		.panel-content .img {
			max-height: 20rem;
		}			
	

		/* Gallery */
		.btn-primary-wrapper.gallery-btn.gallery-back{
			left: 3rem;
		}
		.btn-primary-wrapper.gallery-btn.gallery-right{
			right: 3rem;
		}	


		/* Table */	

		table.copy tr {
			display: flex;
			flex-direction: column;
		}
		table.copy, 
		table.copy th, 
		table.copy td {
			border-bottom-width: 0rem;
			padding: 0.25rem 1.75rem;
		}
		table.copy tr:not(tr:first-child) th {
			border-top: 0.1rem solid var(--n80);
			padding-top: 1.25rem
		}		
		table.copy tr td:last-child {
			padding-bottom: 1.25rem
		}				

	}
/* 1024 ------------------------------------------------------------ */
	@media (max-width:1279px) and (min-width:1024px) {
		
		/* Body */	
		.body-wrapper {
			width: calc(1024px - var(--sp500));	
		}
		.top-nav .body-wrapper {
			width: calc(100% - var(--sp500));
		}		
		.body {
			
		}
		.body.hide {
			animation-duration: 0;
			animation-name: showBody;
		}		
		

		/* Content */
		.content-flex .content {
			flex-direction: column;
		}
		.content-wrapper {
			width: 100%;
		}
		.content-header .wrapper {
			align-items: flex-start;
		}				


		/* Projects */
		.projects, .projects.blog,
		.references, .projects.blog {
			flex-direction: row;	
		}

		.project-wrapper.col2 {
			flex: 0 0 calc((100%)/1);
		}		
		.project-wrapper {
			flex: 0 0 calc((100% - 4rem)/2);
		}		
		.project .img img, .panel .img img {	
			
		}	
		.project.col2 .project-wrapper .img img{	
			
		}		


		/* Blog */			
		.blog .img {
			width: 46rem;
			height: 46rem;	
		}		


		/* Navigation */
		#nav-mobile {
			display: none !important;
		}	
		#nav-desktop {		
			display: block !important;
		}
		.show-mobile-nav {
			animation-name: hideMobileNav;
		}


		/* Accordeon */
		.panel-content .img {
			max-height: 32rem !important;
		}	
			
	}	
/* 1280 ------------------------------------------------------------ */
	@media (max-width:1919px) and (min-width:1280px) {
		
		/* Body */	
		.body-wrapper {
			width: calc(1280px - var(--sp500));
		}
		.top-nav .body-wrapper {
			width: calc(100% - var(--sp500));
		}		
		.body.hide {
			animation-duration: 0;
			animation-name: showBody;
		}		


		/* Content */
		.content-flex .content {
			flex-direction: column;
		}	


		/* Navigation */
		#nav-mobile {
			display: none !important;
		}			
		#nav-desktop {		
			display: block !important;		
		}

	}
/* 1440 ------------------------------------------------------------ */
	@media (max-width:1919px) and (min-width:1440px) {
		
		/* Body */	
		.body-wrapper {
			width: calc(1440px - var(--sp500));
		}
		.top-nav .body-wrapper {
			width: calc(100% - var(--sp500));
		}
		.body.hide {
			animation-duration: 0;
			animation-name: showBody;
		}		
		

		/* Content */
		.content-flex .content {
			flex-direction: column;
		}		


		/* Navigation */
		#nav-mobile {
			display: none !important;
		}			
		#nav-desktop {		
			display: block !important;		
		}

	}	
/* 1920 ------------------------------------------------------------ */
	@media (max-width:2559px) and (min-width:1920px) {
		
		/* Body */	
		.body-wrapper {
			width: calc(1920px - var(--sp500));	
		}	
		.top-nav .body-wrapper {
			width: calc(100% - var(--sp500));
		}					
		.body.hide {
			animation-duration: 0;
			animation-name: showBody;
		}
		.full-width-wrapper {
			width: 1920px;
		}
		.content-wrapper {
			width: 90%;
		}
		#galleryCompany .gallery {
			height: 64rem !important;
		}	


		/* Navigation */
		#nav-mobile {
			display: none !important;
		}	
		#nav-desktop {		
			display: block !important;
		}		

	}
/* > 2560 ------------------------------------------------------------ */
	@media screen and (min-width: 2560px) {

		/* Body */	
		.body-wrapper {
			width: 2048px;
		}
		.top-nav .body-wrapper {
			width: calc(100% - var(--sp500));
		}			
		.body.hide {
			animation-duration: 0;
			animation-name: showBody;
		}
		.full-width-wrapper {
			width: 2048px;
		}
		.content-wrapper {
			width: 90%;
		}
		#galleryCompany .gallery {
			max-height: 80rem !important;
		}		


		/* Navigation */
		#nav-mobile {
			display: none !important;
		}	
		#nav-desktop {		
			display: block !important;
		}		

	}