/*  base color : #FDFF38      background: rgba(253, 255, 56, 0.5) */




/*@font-face {
	font-family: 'Helvetica Neue Black Extended';
	src: url("../fonts/HelveticaNeueLTStd-BlkEx.otf");
	font-style: normal;
	font-weight: normal
}
@font-face {
	font-family: 'Neue Haas Grotesk';
	src: url("../fonts/NHaasGroteskDSPro-55Rg.otf");
	font-style: normal;
	font-weight: normal
}

*/

@font-face {
	font-family: 'Helvetica Neue Black Extended';
	src: url("../fonts/HelveticaNeueLTStd-BlkEx.otf");
	font-style: normal;
	font-weight: normal
}
@font-face {
	font-family: 'Neue Haas Grotesk';
	src: url("../fonts/NHaasGroteskDSPro-55Rg.otf");
	font-style: normal;
	font-weight: normal
}

@font-face {
	font-family: 'BureauGrotLight';
	src: url("../fonts/BureauGrotLight.otf");
	font-style: normal;
	font-weight: normal
}

@font-face {
	font-family: 'BureauGrotBook';
	src: url("../fonts/BureauGrotBook.otf");
	font-style: normal;
	font-weight: normal
}

@font-face {
	font-family: 'BureauGrotSevenNine';
	src: url("../fonts/BureauGrotSevenNine.otf");
	font-style: normal;
	font-weight: normal
}

@font-face {
	font-family: 'BureauGrotThreeSeven';
	src: url("../fonts/BureauGrotThreeSeven.otf");
	font-style: normal;
	font-weight: normal
}

@font-face {
	font-family: 'BureauGrotOneOne';
	src: url("../fonts/BureauGrotOneOne.otf");
	font-style: normal;
	font-weight: normal
}



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



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


#nprogress {
	pointer-events: none
}
#nprogress .bar {
	background: #000;
	position: fixed;
	z-index: 1031;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px
}
.body-template-index #nprogress .bar, .body-template-about #nprogress .bar {
	background: #fff
}
#nprogress .spinner-icon {
	width: 18px;
	height: 18px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: solid 2px transparent;
	border-top-color: #29d;
	border-left-color: #29d;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-webkit-animation: nprogress-spinner 400ms linear infinite;
	animation: nprogress-spinner 400ms linear infinite;
	display: none
}
.nprogress-custom-parent {
	overflow: hidden;
	position: relative
}
.nprogress-custom-parent #nprogress .spinner, .nprogress-custom-parent #nprogress .bar {
	position: absolute
}
@-webkit-keyframes nprogress-spinner {
0% {
-webkit-transform:rotate(0deg)
}
100% {
-webkit-transform:rotate(360deg)
}
}
@keyframes nprogress-spinner {
0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
100% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}


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


img {
	min-height: 100px;
}




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




html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	padding: 0;
	margin: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	border: 0;
	outline: 0
}
html {
	font-family: "BureauGrotLight", sans-serif;
	/*font:300 11px/1.4 'Arimo', Helvetica, Arial, sans-serif;*/
	
	
	color: #000;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%
}
body {
	font-size: 14px;
	line-height: 18px
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block
}
nav ul {
	list-style: none
}
blockquote, q {
	quotes: none
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none
}
a, a:hover, a:visited {
	padding: 0;
	margin: 0;
	font-size: 100%;
	color: #000;
	text-decoration: none;
	vertical-align: baseline;
	/*background: yellow;
	
	/*--------------------------------*/
	
	background: linear-gradient(transparent 5px, #FDFF38 3px, #FDFF38 11px, transparent 6px);
/*	background: linear-gradient(transparent 7px, #FDFF38 0px, #FDFF38 10px, transparent 0px)  
	background: linear-gradient(transparent 7px, #FDFF38 3px, #FDFF38 11px, transparent 6px);	
	background: linear-gradient(transparent 7px, #FDFF38 3px, #FDFF38 8px, transparent 3px)*/
	/*--------------------------------*/
	
}	
/*
a:focus {
	outline: 0
}*/
a:hover, a:active {
	color: #000;
	text-decoration: none;
	/*background: yellow;*/
	background-image: linear-gradient(transparent 28px, #FDFF38 33px, #FDFF38 35px, transparent 17px);
	background-color: #FDFF38;
	-webkit-transition: all 0.50s ease-in-out;
	-moz-transition: all 0.50s ease-in-out;
	-ms-transition: all 0.50s ease-in-out;
	-o-transition: all 0.50s ease-in-out;
	transition: all 0.50s ease-in-out;

	outline: 1
}


ins {
	color: #000;
	text-decoration: none;
	background-color: #000
}
mark {
	font-style: italic;
	font-weight: bold;
	color: #000;
	background-color: #000
}
del {
	text-decoration: line-through
}
abbr[title], dfn[title] {
	cursor: help;
	border-bottom: 1px dotted
}
table {
	border-collapse: collapse;
	border-spacing: 0
}
hr {
	display: block;
	height: 1px;
	padding: 0;
	margin: 1em 0;
	border: 0;
	border-top: 1px solid #000
}
input, select {
	vertical-align: middle
}
svg:not(:root) {
	overflow: hidden
}
h1, h2, h3, h4, h5 {
	font-weight: normal
}
body {
	font-size: 14px;
	line-height: 18px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility
}

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

.color-updatable {	-webkit-transition: color 300ms ease-in-out;	transition: color 300ms ease-in-out}

#ajax-container {
	opacity: 1;
	-webkit-transition: opacity 300ms ease-in-out 250ms;
	transition: opacity 300ms ease-in-out 250ms
}
.body-page-is-loading #ajax-container, .body-project-is-open #ajax-container, .body-index-category-item-is-open #ajax-container {
	opacity: 0;
	-webkit-transition: opacity 300ms ease-in-out 0ms;
	transition: opacity 300ms ease-in-out 0ms
}
.body-home-is-loading *, .nprogress-busy * {cursor: wait}
.home-fullpage {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 300ms ease-in-out 0ms, visibility 0ms 0ms;
	transition: opacity 300ms ease-in-out 0ms, visibility 0ms 0ms
}
.body-home-is-loading .home-fullpage {
	height: 100%;
	overflow: hidden;
	cursor: wait;
	opacity: 0;
	visibility: hidden
}
.home-background-placeholder {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	visibility: hidden;
	-webkit-transition: visibility 0ms 300ms;
	transition: visibility 0ms 300ms
}
.body-home-is-loading .home-background-placeholder {
	visibility: visible
}
.black-background {
	position: fixed;
	z-index: -2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	visibility: hidden;
	-webkit-transition: visibility 0ms 250ms, opacity 300ms;
	transition: visibility 0ms 250ms, opacity 300ms
}
.body-template-index .black-background, .body-template-about .black-background {
	visibility: visible
}
.body-template-projects .black-background {
	opacity: 0
}



h1 {
	font-family: "BureauGrotSevenNine", sans-serif;
	/*font-family: "Arimo", sans-serif;*/
	font-size: 14px;
	font-weight: 900;
	line-height: 18px;
	text-transform: uppercase;
	
}

/*---------------------- HEADER ---------------------------------*/

.header {
	position: fixed;
	z-index: 300;
	position: fixed;
	top: 0;
	left: 0;
	padding-left: 25px;
	padding-top: 22px;
	padding-bottom: 18px;
	background-color: rgb(253, 255, 56);
	width: 100%
	
}
.header a {	color: inherit}

.header a:hover {
	
	background-color: rgba(255,255,255,0.80)
}

.body-template-home.fp-viewing-0 .header {
	-webkit-transform: translateY(-webkit-calc(25px/2 + 18px));
	transform: translateY(calc(25px/2 + 18px));
	-webkit-transition: opacity 300ms ease-in-out 300ms, -webkit-transform 150ms 550ms;
	transition: opacity 300ms ease-in-out 300ms, -webkit-transform 150ms 550ms;
	transition: opacity 300ms ease-in-out 300ms, transform 150ms 550ms;
	transition: opacity 300ms ease-in-out 300ms, transform 150ms 550ms, -webkit-transform 150ms 550ms
}
.body-template-index .header a {color: #000}
.body-template-about .header a {color: #000}

.body-template-projects .header a, .body-index-category-item-is-open .header a {/*color: #000*/}


@media (max-width: 667px) {
.header {padding: 15px 0px 0px 15px; 	/*background-color: #FDFF38;*/ width:100%; height:95px }
.body-project-is-open .header, .body-index-category-item-is-open .header {
	width: 13ch; 
	height:5px
	}
}



/*---------------------- MENU ---------------------------------*/


.menu {/*color:#6b6b6b*/}
.menu a {/*color:#6b6b6b*/}

.menu__item {
	text-transform: uppercase;
	display: inline-block;
	margin-right: 12.5px;
	opacity: 1;
	-webkit-transition: opacity 300ms ease-in-out 300ms, -webkit-transform 150ms 0ms;
	transition: opacity 300ms ease-in-out 300ms, -webkit-transform 150ms 0ms;
	transition: opacity 300ms ease-in-out 300ms, transform 150ms 0ms;
	transition: opacity 300ms ease-in-out 300ms, transform 150ms 0ms, -webkit-transform 150ms 0ms;
}


	/*---------------------- MENU media queries ---------------------------------*/

@media (max-width: 667px) {
.menu {
	width: 377px;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between
}
.menu__item--index, .menu__item--about, .menu__item--projects{ 	
		
	-webkit-transform: rotateZ(45deg);
    -ms-transform: rotate(45deg);
    transform: rotateZ(45deg);
    -webkit-transform-origin: 100% 0 0;
    -ms-transform-origin: 100% 0 0;
    transform-origin: 40% 100%;
}	
	
	
}



@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:portrait)
{
	.menu{
	font-size: 11px;/*line-height: 11px;*/
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	width: 300px
	}
	
	
.menu__item--index, .menu__item--about, .menu__item--projects{ 	
		
	-webkit-transform: rotateZ(45deg);
    -ms-transform: rotate(45deg);
    transform: rotateZ(45deg);
    -webkit-transform-origin: 100% 0 0;
    -ms-transform-origin: 100% 0 0;
    transform-origin: 40% 100%;
}

}


/*-----------------------------------------*/
.body-project-is-open .menu__item, .body-index-category-item-is-open .menu__item {
	-webkit-transition: opacity 300ms ease-in-out 0ms, -webkit-transform 150ms;
	transition: opacity 300ms ease-in-out 0ms, -webkit-transform 150ms;
	transition: opacity 300ms ease-in-out 0ms, transform 150ms;
	transition: opacity 300ms ease-in-out 0ms, transform 150ms, -webkit-transform 150ms
}

.body-project-is-open .menu__item:not(:first-of-type), .body-index-category-item-is-open .menu__item:not(:first-of-type) {
	opacity: 0
}

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



.sevenNine{	
	
	/*font-family: "BureauGrotSevenNine", sans-serif; */
	font-family: "Arimo", sans-serif;
	font-size: 40px; 	
	
	font-weight: 900}

@media (max-width: 667px) {
	.menu__item {	margin-right: -16px;	width: 11ch;}
	.menu__item:not(.menu__item--home) {  padding:  15px 0px 8px 0px}		
	.menu__item--home{padding-left: 0px; /*opacity:0*/}


}


@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:portrait)
{
 	.menu__item {/*margin-right: 5px*/   margin-right: -16px;    width: 11ch;}
	.menu__item H1 {font-size: 10px;	font-weight:normal; line-height: 11px}
	.menu__item:not(.menu__item--home) { margin-top: 10px;padding:  0px 0px 0px 0px}	
}	

	
.body-project-is-open .menu__item:not(:first-of-type), .body-index-category-item-is-open .menu__item:not(:first-of-type) {
	display: none
}

.section-intro {	-webkit-box-sizing: border-box;	box-sizing: border-box}




/*-------------------------------------------*//*----------------------------------------------------------------------------------*/
/*-------------------------------------------*//*----------------------------------------------------------------------------------*/
/*-------------------------------------------*//*----------------------------------------------------------------------------------*/
/*---------------------- INTRO ---------------------------------*/

@media (max-width: 667px) {
.section-intro {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center
}
}
.intro-inner {
	height: 100vh;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center
}
.tagline-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #fff;
	color: #000;
	text-transform: uppercase;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 7.3529411765px 0;
	padding-top: 7px;
	overflow: hidden;
	width: 100%;
	height: -webkit-calc(25px/2 + 18px);
	height: calc(25px/2 + 18px)
}
.intro__text {
	font-family: "Helvetica Neue Black Extended", sans-serif;
	font-size: 23px;
	line-height: 29px;
	letter-spacing: -0.3px;
	text-align: center;
	max-width: 1000px;
	margin: 0 auto
}
.intro__text p {<strong></strong>
	margin-bottom: 0.5em
}
.intro__text p:last-of-type {
	margin-bottom: 0
}
.intro-down-arrow {
	position: absolute;
	bottom: 22px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%)
}
.section-showcase {
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}
.home-section:not(:last-of-type) {
	cursor: pointer
}
.showcase__item {
	position: relative;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	height: 100vh;
	text-align: center;
	overflow: hidden
}

@media (max-width: 667px) {.showcase__item {display: none}}
.showcase__item__inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	flex-direction: column
}
.showcase__item__media {
width:-webkit-calc(100% - (25px*3 + 18px*2)*2);
width:calc(100% - (25px*3 + 18px*2)*2);
height:-webkit-calc(100% - (25px*3 + 18px*2)*2 + 22px);
height:calc(100% - (25px*3 + 18px*2)*2 + 22px);
	min-height: 300px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	box-sizing: border-box;
	box-sizing: border-box
}
.showcase__item__media img, .showcase__item__media video {
	max-width: 100%;
	max-height: 100%
}
.showcase__item__media video {
	background-color: #ccc
}
.is-format--fullscreen .showcase__item__media {
	width: 100%;
	height: 100%
}
.is-format--fullscreen .showcase__item__media img, .is-format--fullscreen .showcase__item__media video {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover
}
.is-format--normal .showcase__item__media {
	margin-bottom: 12px;
	padding: -webkit-calc(25px + 3px) 0;
	padding: calc(25px + 3px) 0
}
.showcase__item__title {
	font-family: "Helvetica Neue Black Extended", sans-serif;
	font-size: 23px;
	line-height: 29px;
	letter-spacing: -0.3px;
	text-transform: uppercase;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
	z-index: 10
}
.is-format--fullscreen .showcase__item__title, .is-slideshow .showcase__item__title {
	position: absolute;
	top: 24px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%)
}
.is-format--normal .showcase__item__title {
	margin-top: 24px
}

@media (max-width: 667px) {
.is-format--fullscreen .showcase__item__title, .is-slideshow .showcase__item__title {
top:-webkit-calc(25px - 1px + 12px*2);
top:calc(25px - 1px + 12px*2)
}
.is-format--normal .showcase__item__title {
margin-top:-webkit-calc(25px - 1px + 12px*2);
margin-top:calc(25px - 1px + 12px*2)
}
}
.showcase__item__subtitle {
	font-family: "Helvetica Neue Black Extended", sans-serif;
	font-size: 23px;
	line-height: 29px;
	letter-spacing: -0.3px;
	text-transform: uppercase;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
	z-index: 10
}
.is-format--fullscreen .showcase__item__subtitle, .is-slideshow .showcase__item__subtitle {
	position: absolute;
	bottom: 14px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%)
}
.is-format--normal .showcase__item__subtitle {
	margin-bottom: 22px
}

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


.body-project-is-open .section-projects {
	opacity: 0;
	-webkit-transition: opacity 300ms ease-in-out 0ms;
	transition: opacity 300ms ease-in-out 0ms
}


/*-------------------------------------------*projects-grid*----------------------------------------------------------------------------------*/

.projects-grid {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 25px 75px;
	padding-top:-webkit-calc(75px + 25px*1);
	padding-top:calc(75px + 25px*1)
}

@media (max-width: 667px) {
.projects-grid {
	padding-left: 15px;
	padding-right: 15px;
	padding-top:-webkit-calc(100px + 25px*0);
	padding-top:calc(120px + 25px*0)
}
}

/*-------------------------------------------* projects-grid__item *----------------------------------------------------------------------------------*/

.projects-grid__item {
	position: relative;
	margin-bottom: 4em;
	width:-webkit-calc( (100% - 50px*(4 - 1)) / 4);
	/*width:calc( (100% - 75px*(3 - 1)) / 3)*/
	width: calc( (100% - 50px*(4 - 1)) / 4);
}

.projects-grid__item img {
	max-width: 100%
}


@media (min-width: 2200px) {
.projects-grid__item {
width:-webkit-calc( (100% - 75px*(4 - 1)) / 4);
width:calc( (100% - 75px*(4 - 1)) / 4)
}
}

@media (max-width: 1400px) {
.projects-grid__item {
width:-webkit-calc( (100% - 75px*(2 - 1)) / 2);
width:calc( (100% - 75px*(2 - 1)) / 2)
}
}

@media (max-width: 1280px) {
.projects-grid__item {
width:-webkit-calc( (100% - 75px*(2 - 1)) / 2);
width:calc( (100% - 25px*(3 - 1)) / 3)
}
}

@media (max-width: 1200px) {
.projects-grid__item {
width:-webkit-calc( (100% - 75px*(2 - 1)) / 2);
width:calc( (100% - 75px*(2 - 1)) / 2)
}
}


@media (max-width: 900px) {
.projects-grid__item {
	width: 100%;
	margin-bottom: 25px
}
}
/*-------------------------------------------* projects-grid__item__thumbnail *----------------------------------------------------------------------------------*/


.projects-grid__item__thumbnail {
	position: relative;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	overflow: hidden;
	
	line-height: 0
}
.projects-grid__item__thumbnail:before {
	display: block;
	content: "";
	width: 100%;
	padding-top: 69%
}
.projects-grid__item__thumbnail>.content {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0
}

.projects-grid__item__thumbnail a{
	
	background:none
	
	
}

.projects-grid__item__thumbnail img, .projects-grid__item__thumbnail video {
	-o-object-fit: cover;
	object-fit: cover;
	width: 100%;
	height: 100%
}
.projects-grid__item__thumbnail video {
	background-color: #000
}


video {
/*	padding-left: 0px;
	padding-right: 0px;
/*	position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;*/

}


video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
  
  background-size: cover;
  transition: 1s opacity;
}







@media (max-width: 667px) {
	
	video {
	/*padding-left: 16px;
	padding-right: 16px;*/
	top: 0;
    left: 0	;
	position: relative;
	width: 92vw;
	transform: translateX(0%) translateY(0%);
	z-index:auto;}


}



/* media queries ipad  */


@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
	
		video {
	/*padding-left: 16px;
	padding-right: 16px;*/
	top: 0;
    left: 0	;
	position: relative;
	width: 92vw;
	transform: translateX(0%) translateY(0%);
	z-index:auto;}
	
	

.project-gallery__item {
    /* height: 50vh; */
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    /* position: relative; */
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    margin-top: 20px;	
	
	}
	
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}



#myVideo {

	
}





.projects-grid__item__video video {
	width: 100%
}


/*-------------------------------------------* projects-grid__item__text *----------------------------------------------------------------------------------*/

.projects-grid__item__text {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	margin-top: 1em;
	text-transform: uppercase
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:portrait)
{
	.projects-grid__item__text {	
    font-size: 11px;
   
	}
}




.projects-grid__item__text p {
	/*font-weight:bolder*/
}


.projects-grid__item__text__number {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin-right: 37.5px
}
.projects-grid__item__text__information {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-flex: 1;
	-webkit-flex-grow: 1;
	flex-grow: 1
}
.projects-grid__item__text__year {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	/*margin-left: 25px;
	margin-right: 60px;
	width: 5ch*/
	
	color:grey
}

@media (max-width: 667px) {
.projects-grid__item__text__year {
	padding-right: 0;
	margin-right: 0px
}
}


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



#project-container {
	position: fixed;
	z-index: 350;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	visibility: hidden;
	opacity: 0;
	/*background-color: #fff;*/
	-webkit-transition: opacity 300ms ease-in-out, visibility 0ms 300ms;
	transition: opacity 300ms ease-in-out, visibility 0ms 300ms
}
.body-project-is-open {
	height: 100%;
	overflow: hidden
}
.body-project-is-open #project-container {
	visibility: visible;
	opacity: 1;
	-webkit-transition: opacity 300ms ease-in-out 250ms, visibility 0ms 250ms;
	transition: opacity 300ms ease-in-out 250ms, visibility 0ms 250ms
}

/*-----------------------------------------------*//*-------------------------------------------------*/
/*-----------------------------------------------*//*-------------------------------------------------*/
/*-----------------------------------------------*//*-------------------------------------------------*/
.close-button {
	
	font-family: "BureauGrotSevenNine", sans-serif;
	position: fixed;
	z-index: 300;
	top: 23px;
	left: 30px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	/*padding: 10px;	*/
	text-transform: uppercase;
	/*font-weight: 900;*/
	cursor: pointer
}


.close-button:hover {
	color: #000;
	text-decoration: none;
	background-color: #FDFF38;
	-webkit-transition: all 0.50s ease-in-out;
	-moz-transition: all 0.50s ease-in-out;
	-ms-transition: all 0.50s ease-in-out;
	-o-transition: all 0.50s ease-in-out;
	transition: all 0.50s ease-in-out;
	outline: 1
}

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

@media (max-width: 667px) {
.close-button {
/*	right:12px;*/
	top:15px;
	z-index:999;	
}}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:portrait)
{
   .close-button {
	font-size: 10px	;
	font-weight:normal;
	   top: 15px; right:15px;
}}	


/*-----------------------------------------------*//*-------------------------------------------------*/
.close-buttonCross {
	position: absolute;
	z-index: 1;
	top: 0px;
	right: 0px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	/*padding: 10px;
	*/
	text-transform: uppercase;
	cursor: pointer;
	
}


.close-buttonCross:hover {
	color: #000;
	text-decoration: none;
	background-color: #FDFF38;
	-webkit-transition: all 0.50s ease-in-out;
	-moz-transition: all 0.50s ease-in-out;
	-ms-transition: all 0.50s ease-in-out;
	-o-transition: all 0.50s ease-in-out;
	transition: all 0.50s ease-in-out;
	outline: 1
}



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


@media (max-width: 667px) {
.close-buttonCross {
	top: 0px;
	right:0px;
	display:visible;
	z-index: 300;
}
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:portrait)
{
   .close-buttonCross {
	top: 0px; 
	right:0px;
	display:visible;
}
}	


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


.project-header {
	position: absolute;
	z-index: 300;
	top: 18px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	text-align: center;
	width: -webkit-calc(70%);
	width: calc(85%)
}

@media (max-width: 667px) {
.project-header {
	width: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 0px;
	top: -webkit-calc(15px + 0em);
	top: calc(15px + 0em);
	
	/* new */
	
	background-color: #FDFF38;
    top: 0px;
    padding-bottom: 15px;
	height:85px
	
	
}
}

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


.project-title, .client-title {
	font-family: "BureauGrotSevenNine", sans-serif;
	/*font-family: "Arimo", sans-serif;*/
	font-size: 14px;
	line-height: 28px;
	letter-spacing: -0.3px;
	text-align: center;
	text-transform: uppercase;
	
    margin-left: 5%;
    /* text-align: center; */
    justify-content: center;
	
		
		font-weight: 900;
}


.center-image{
	margin-left: auto;
  margin-right: auto;

}


.format-image a{
	color:black;
	background: transparent

	
}

.format-image a:hover{
	
	color: #000;
	text-decoration: none;
	background-color: #FDFF38;
	-webkit-transition: all 0.50s ease-in-out;
	-moz-transition: all 0.50s ease-in-out;
	-ms-transition: all 0.50s ease-in-out;
	-o-transition: all 0.50s ease-in-out;
	transition: all 0.50s ease-in-out;
	outline: 1
	
}



@media (max-width: 1024px) {
.project-title, .client-title {
    font-size: 16px;
    line-height: 20px;
    padding-top: 40px;
    width: 23ch;
    margin-left: 24%;
}
}


@media (max-width: 667px) {
.project-title, .client-title {
	font-size: 14px;
	line-height: 18px;
	padding-top: 45px;
	width: 25ch;
    /*margin-left: 12%;*/
	
	
	
	margin-left: auto;
    margin-right: auto;
}
}




	
@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:portrait)
{
   .project-title, .client-title {
	font-size: 11px;
    font-weight: normal;
    line-height: 13px;
    padding-top: 32px;
    width: 26ch;
    margin-left: 10%;
    text-align: center;
    justify-content: center;
}
}	





.project-count {
	position: absolute;
	left: 25px;
	bottom: 25px
}

@media (max-width: 667px) {
.project-count {
	left: 15px;
	bottom: 15px
}
}
.client-title {
	position: absolute;
	z-index: 300;
	top: 26px;
	left: 25px;
	max-width: 25%
}
.project-title__item {
	display: inline-block;
	/*/font-family: "BureauGrotLight", sans-serif;*/
	font-family: "Arimo", sans-serif;
	font-weight: normal;
	margin-right: 25px;
	cursor: pointer
}
.project-title__item:last-of-type {
	margin-right: 0
}
.project-title__item.is-active {
	opacity: 1
}


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


.project-gallery {
	width: 100%;
	height: 100vh
}
.project-gallery .flickity-slider {
	-webkit-transform: none !important;
	transform: none !important
}
.project-gallery .project-gallery__item {
	left: 0 !important;
	opacity: 0;
	-webkit-transition: opacity 250ms ease-in-out 0ms;
	transition: opacity 250ms ease-in-out 0ms;
	z-index: -1
}
.project-gallery .project-gallery__item.is-selected {
	opacity: 1;
	z-index: 0;
	-webkit-transition: opacity 250ms ease-in-out 250ms;
	transition: opacity 250ms ease-in-out 250ms
}




/* flickity on by default */
.project-gallery:after {
  content: 'flickity';
  display: none;
}




@media screen and ( max-width: 768px ) {
  /* disable Flickity for large devices */
/*  .project-gallery:after {
    content: 'flickity';
  }*/
}


@media screen and ( max-width: 768px ) {
  /* disable Flickity for large devices */
  .project-gallery:after {
	  content: '';}
	
.project-gallery {
	  overflow:auto;}
	
	  
 .project-gallery .project-gallery__item {   
	  left: 0 !important;
	  opacity: 1;
	/* overflow:auto;*/
}
	

}


@media (max-width:667px){

.project-gallery {
    width: 100%;
    height: 100vh;
    padding-top: 85px;
}
}



.project-gallery__item {
/*	position: relative;*/	
	width: 100%;
	height: 100vh;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	
}

@media (max-width:667px){
	
	.project-gallery__item {
/*	position: relative;*/	
	width: 100%;
	height: auto;
	margin-bottom : 20px;
		margin-top:20px;

	
}
	
	
}


@media (min-width:768px){

/*.project-gallery__item {
  width: 66%;
  height: 100VH;
  margin-right: 10px;
  margin-bottom: 10px;
  
  border-radius: 5px;
  counter-increment: project-gallery__item;
}*/


/* no margin bottom when Flickity enabled */
.flickity-enabled .project-gallery__item {
  margin-bottom: 0;
}


}



@media (max-width:667px){
.project-gallery__item {

/*	height:50vh;*/
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center

	}

}



.project-gallery__item:only-child .project-gallery__item__prev, .project-gallery__item:only-child .project-gallery__item__next {
	display: none
}
.project-gallery__item__media, .project-gallery__item__text {
	width:-webkit-calc(100% - (25px*3 + 18px*2)*2);
	width:calc(100% - (25px*3 + 18px*2)*2);
	height:-webkit-calc(100% - (25px*3 + 18px*2)*2 + 22px);
	height:calc(100% - (25px*3 + 18px*2)*2 + 22px);
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}
.is-format--fullscreen .project-gallery__item__media, .is-format--fullscreen .project-gallery__item__text {
	width: 100%;
	height: 100%
}
.is-format--fullscreen .project-gallery__item__media img, .is-format--fullscreen .project-gallery__item__media video, .is-format--fullscreen .project-gallery__item__text img, .is-format--fullscreen .project-gallery__item__text video {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover
}



@media (max-width: 667px) {
.project-gallery__item__media, .project-gallery__item__text {
width:-webkit-calc(100% - 15px*2);
width:calc(100% - 10x*2);
height:-webkit-calc(100% - (15px)*2);
height:calc(100% - (15px)*2)
}
}


.project-gallery__item__media {
	min-height: 300px;
	position: relative
}

@media (max-width: 667px) {
.project-gallery__item__media {
	min-height: 100%;
	
	}
}


.project-gallery__item__media img, .project-gallery__item__media video {
	max-width: 100%;
	max-height: 100%
}
.project-gallery__item__media.video-js-is-played .video-js {
	z-index: 10
}
.project-gallery__item__media.video-js-is-played .project-gallery__item__media__play-button {
	display: none
}
/*.project-gallery__item__media .video-js {
	position: relative
}
.project-gallery__item__media .video-js .vjs-big-play-button {
	display: none
}*/

@media (max-width: 667px) {
/*.project-gallery__item__media {
	

	min-height: 0;}*/

	
.project-gallery__item__media img, .project-gallery__item__media video {
    max-width: 100%;
    max-height: 100%;
}
}


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


.iframe-container {
/*width:-webkit-calc(100% - (25px*3 + 18px*2)*2);
width:calc(100% - (25px*3 + 18px*2)*2);
height:-webkit-calc(100% - (25px*3 + 18px*2)*2 + 22px);
height:calc(100% - (25px*3 + 18px*2)*2 + 22px);*/
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
/*	border: 2px solid green
*/}
.iframe-container .video-js {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 2px solid red;
	width: 100%
}
.iframe-container iframe {
	position: relative;
	z-index: 10
}



@media (max-width: 667px) {
	
	
	.overlayVimeo {
	padding-bottom: 200px;
    padding-top: 10px;
    position: fixed;
    /*top: 10%;*/
    left: 15px;
    /* width: 47%; */
    transform: translate(0%, 0%);
    background: rgba(253, 255, 56, 0);
	
	
}
	
	.iframe-container {
/*width:-webkit-calc(100% - (25px*3 + 18px*2)*2);
width:calc(100% - (25px*3 + 18px*2)*2);
height:-webkit-calc(100% - (25px*3 + 18px*2)*2 + 22px);
height:calc(100% - (25px*3 + 18px*2)*2 + 22px);*/

	width: 380px;
    height: 30vh;
		
		
}
}




.html5-video-player a {
    color: inherit;
    text-decoration: none;
    -moz-transition: color .1s cubic-bezier(0.0,0.0,0.2,1);
    -webkit-transition: color .1s cubic-bezier(0.0,0.0,0.2,1);
    transition: color .1s cubic-bezier(0.0,0.0,0.2,1);
    outline: 0;
    font-size: 8px;
}




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

@media (max-width: 667px) {
.vjs-youtube-mobile .vjs-big-play-button {
	display: -webkit-box !important;
	display: -webkit-flex !important;
	display: flex !important
}
.vjs-youtube-mobile.vjs-has-started .vjs-big-play-button {
	display: none !important
}
}

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


.project-gallery__item__text {
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}
.project-gallery__item__text__inner {
/*	font-family: "Times", serif;	
	
	
	/*font-family: "BureauGrotLight", sans-serif;*/
	font-family: "Arimo", sans-serif;
	color:#505050;
	
	font-size: 16px;
	line-height: 18px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	text-align: justify
}

@media (max-width: 667px){
.project-gallery__item__text__inner {/*
    /*font-family: "BureauGrotLight", sans-serif;*/
	font-family: "Arimo", sans-serif;
	font-size: 12px;
    line-height: 14px;
    letter-spacing: -0.005em;
    word-spacing: -0.02em;
	text-align: justify
}
}


@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:portrait){
.project-gallery__item__text__inner {
    /*font-family: "BureauGrotLight", sans-serif;*/
	font-family: "Arimo", sans-serif;
	
	font-size: 12px;
    line-height: 12px;
    letter-spacing: -0.005em;
    word-spacing: -0.02em;
	text-align: justify;
	overflow: auto
}
}




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

.project-gallery__item__text__inner p {
	
	max-width: 85ch;
	margin-bottom: 0px;
	
}
.project-gallery__item__text__inner p:last-of-type {
	margin-bottom: 0
}

.project-gallery__item__text__inner a {
	color:black;
	background: transparent;
}

.project-gallery__item__text__inner a:hover {
	
	color: #000;
	text-decoration: none;
	background-color: #FDFF38;
	-webkit-transition: all 0.50s ease-in-out;
	-moz-transition: all 0.50s ease-in-out;
	-ms-transition: all 0.50s ease-in-out;
	-o-transition: all 0.50s ease-in-out;
	transition: all 0.50s ease-in-out;
	outline: 1
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:portrait)
{
   .project-gallery__item__text__inner p {
    max-width: 85ch;
    margin-bottom: 0px;
    
}

}

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

.project-gallery__item__prev {
	left: 0;
	cursor: w-resize
}
.project-gallery__item__next {
	right: 0;
	cursor: e-resize
}

.project-gallery__item__prev, .project-gallery__item__next {
	position: absolute;
	top: 60px;
	width: 8%;
	height: 80%;
	opacity: 0
}


@media (max-width: 667px){

.project-gallery__item__prev, .project-gallery__item__next {
	position: absolute;
	top: 0;
	width: 1%;
	height: 1%;
	opacity: 0
}

}
/*----------------------------------------------------------------------------------*//*----------------------------------------------------------------------------------*/

.project-gallery__item__credits {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	bottom: 25px;
	width:-webkit-calc(100% - 25px*2 - 10ch*2);
	width:calc(100% - 25px*2 - 10ch*2)
}

.project-gallery__item__credits p {
	
	max-width: 60ch;
	margin: 0 auto;
	text-align: center
}
.project-gallery__item__end-credits {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	bottom: 25px;
	display: none
}
.project-gallery__item__end-credits p {
	max-width: 60ch;
	margin: 0 auto;
	text-transform: uppercase;
	text-align: center
}

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


.main--index {
	font-size: 23px;
	line-height: 29px;
	letter-spacing: -0.4px;
	background-color: #000;
	color: #fff;
	min-height: 100vh;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 25px;
	padding-top:-webkit-calc(22px + 25px*4);
	padding-top:calc(22px + 25px*4);
	text-transform: uppercase;
	
	
}
.main--index a {
	color: #fff
}
.main--index a:hover {
	color: #bbb
}

@media (max-width: 667px) {
.main--index {
	font-size: 14px;
	line-height: 18px;
	padding: 0 15px;
	padding-top:-webkit-calc(22px + 25px*3);
	padding-top:calc(22px + 25px*3)
}
}

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

.index-list-wrapper {
	width: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between
}

@media (max-width: 667px) {
.index-list-wrapper {
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap
}
}
.index__list {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width:-webkit-calc( (100% - 25px*2) / 3);
	width:calc( (100% - 25px*2) / 3);
	opacity: 1;
	-webkit-transition: opacity 300ms ease-in-out 300ms;
	transition: opacity 300ms ease-in-out 300ms
}
.body-project-is-open .index__list {
	opacity: 0;
	-webkit-transition: opacity 300ms ease-in-out 0ms;
	transition: opacity 300ms ease-in-out 0ms
}




@media (max-width: 667px) {
.index__list {
	width: 50%;
	margin-bottom: 3em;
	
}}


/* IPHONE only media query */

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) 
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71)
{
  .index__list {
	width: 100%;
	margin-bottom: 3em;
	}}



.index__list__title {
	margin-bottom: 1em
}

.index__list__item a {
	
	background: linear-gradient(transparent 3px, #FDFF38 49px, #FDFF38 10px, transparent 0px)
}

@media (max-width: 667px) {
.index__list__item a {
    background: linear-gradient(transparent 0px, #FDFF38 24px, #FDFF38 21px, transparent 0px);
}
}


@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:portrait){

.index__list__item a {
	
	background: linear-gradient(transparent 7px, #FDFF38 17px, #FDFF38 17px, transparent 33px)
}


}



.index__list__item a:hover {
	
	color: #000;
	text-decoration: none;
	background-color: #FDFF38;
	-webkit-transition: all 0.50s ease-in-out;
	-moz-transition: all 0.50s ease-in-out;
	-ms-transition: all 0.50s ease-in-out;
	-o-transition: all 0.50s ease-in-out;
	transition: all 0.50s ease-in-out;
	outline: 1
}



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




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

/*.main--projects {background-image:-webkit-linear-gradient(240deg, black 0%,#e0e0e0 12%,#616161 22%,#bbbbbb 40%,#e4e4e4 21%, black 38%, #e0e0e0 42%,#616161 48%,#bbbbbb 84%,#e4e4e4 22%, black 105%);}*/

.main--about {
	font-size: 23px;
	line-height: 29px;
	font-family: Arimo;
	letter-spacing: -0.4px;
/*	background-color: #000;
*/	color: #333;
	min-height: 100vh;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 25px;
	padding-top:-webkit-calc(22px + 15px*4);
	padding-top:calc(22px + 15px*4);

	background-image: -webkit-linear-gradient(240deg, black 0%,#e0e0e0 12%,#616161 22%,#bbbbbb 40%,#e4e4e4 47%, white 64%, #e0e0e0 72%,white 75%,#656565 87%,#e4e4e4 100%);
	
	
	
	
}

@media (max-width: 667px) {

.main--about {
	background-image:-webkit-linear-gradient(240deg, white 7%,#e0e0e0 9%,#616161 22%,#bbbbbb 40%,#e4e4e4 47%, white 64%, #e0e0e0 72%,white 75%,#656565 87%,#e4e4e4 100%)
	}	
}




	
@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:portrait)
{
.main--about {
	background-image:-webkit-linear-gradient(240deg, white 7%,#e0e0e0 9%,#616161 22%,#bbbbbb 40%,#e4e4e4 47%, white 64%, #e0e0e0 72%,white 75%,#656565 87%,#e4e4e4 100%);
	font-size: 18px;
	line-height: 24px;		
}
}









@-webkit-keyframes AnimationName {
    0%{background-position:0% 19%}
    50%{background-position:100% 82%}
    100%{background-position:0% 19%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 19%}
    50%{background-position:100% 82%}
    100%{background-position:0% 19%}
}
@keyframes AnimationName { 
    0%{background-position:0% 19%}
    50%{background-position:100% 82%}
    100%{background-position:0% 19%}
}









.main--about a {
	color: #fff
}
.main--about a:hover {
	color: #000;
/*	-webkit-text-fill-color: transparent;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #fff*/
}

@media (max-width: 667px) {
.main--about {
	padding: 0 15px;
	padding-top:-webkit-calc(22px + 25px*2);
	padding-top:calc(22px + 25px*2)
}
}

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

.about-content {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex
}
.about-content p {
	max-width: 65ch;
	/*margin-bottom: 10px*/
}
.about-content h1, .about-content h2, .about-content h3, .about-content h4, .about-content h5, .about-content h6 {
	text-transform: uppercase;
	/*margin-bottom: 29px*/
}

.about-content a {
	
	color:black;
	background: transparent;}

.about-content a:hover {
	
	color: #000;
	text-decoration: none;
	background-color: #FDFF38;
	-webkit-transition: all 0.50s ease-in-out;
	-moz-transition: all 0.50s ease-in-out;
	-ms-transition: all 0.50s ease-in-out;
	-o-transition: all 0.50s ease-in-out;
	transition: all 0.50s ease-in-out;
	outline: 1
}

@media (max-width: 667px) {
.about-content {
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	font-size: 83%;
    line-height: 24px;
}
}


@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:portrait)
{
	.about-content {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    font-size: 80%;
    line-height: 18px
	
   }	
}

.about-content__left {
	width: 50%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding-right: 100px
}
@media (max-width: 667px) {
.about-content__left {width: 100%;	padding-right: 0}
.about-content__left a{}
.about-content__left p{font-size: 100%;}		
.about-content__left p:first-of-type{font-size: 100%;}	
.about-content__left p:nth-child(12){max-width: 38ch;}		
}



.about-content__right {
	width: 50%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 25px 30px 0px 0px;
}

@media (max-width: 667px) {
.about-content__right {	width: 100%; padding: 10px 0px 0px 0px; margin-left: 20px}	
}

/*-------------------------------------------*/
.impressum { margin-top: 25px; padding-bottom: 30px; font-size: 80%; width:10ch }	
.impressum a {background:none; color: #000; cursor:pointer}
.impressum a:hover {
	background: linear-gradient(transparent 0px, #FDFF38 23px, #FDFF38 6px, transparent 1px);
	background-color: #FDFF38;
	-webkit-transition: all 0.50s ease-in-out;
	-moz-transition: all 0.50s ease-in-out;
	-ms-transition: all 0.50s ease-in-out;
	-o-transition: all 0.50s ease-in-out;
	transition: all 0.50s ease-in-out;
		
}

@media (max-width: 667px) {
.impressum{ margin: 30px 0px 2px 0px; padding-bottom: 30px;}	
}

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

#interLink {margin-bottom:20px; }
#interLink a {color: black; background: none;}
#interLink a:hover { cursor: pointer; pointer-events: fill; background-color: #FDFF38;
	-webkit-transition: all 0.50s ease-in-out;
	-moz-transition: all 0.50s ease-in-out;
	-ms-transition: all 0.50s ease-in-out;
	-o-transition: all 0.50s ease-in-out;
	transition: all 0.50s ease-in-out;
	outline: 1
}

@media (max-width: 667px){ 
#interLink { font-size: 90%;  margin: 50px 0px 5px 0px;}
}

/*---------------------------------------*/
#internship {
	position: fixed;
    opacity: 1;
    padding: 20px 30px;
    background-color: #fdff38;
    z-index: 20;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 5em auto;
    width: 88vh;
    height: 83vh;
    overflow:auto;
    display: none;
    border-radius: 3px;
}	

#internship h1 {padding-bottom: 10px}
#internship h2 {font-weight: bolder; padding-top: 10px;	padding-bottom: 3px}
#internship ul {padding-left: 50px;}
#internship a {font-weight:bolder;}
#internship a:hover {background:white}

.itemInter { background-color: none;  width: 80vh; height: 78vh; }

@media (min-width: 1440px) {

#internship {
    padding: 47px;
    top: 40px;
    right: 0;
    margin: 5em auto;
    width: 60vh;
    height: 70vh;
    padding-top: 38px;
}

.itemInter {width: 50vh; height: 54vh;}	
}

@media (max-width: 667px) {

#internship {
    padding: 15px 17px 17px 17px;
    top: 50px;
    right: 0;
    margin: 5em auto;
    width: 50vh;
    height: 68vh;
}
#internship h1{text-align: center; }
.itemInter {width: 45vh; height: 64vh;}	
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:portrait)
{
#internship {
    font-size: 83%;
    padding: 28px 17px 17px 17px;
    top: 10px;
    width: 50vh;
    height: 72vh;
	line-height: 15px;
	}
#internship h1{font-size: 90%;text-align: center; line-height: 12px;}
	}

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

#disclaimer{
	
	position: fixed;
    opacity: 1;
    /* border: 1px solid #eaeaea; */
    padding: 30px;
    background-color: #fdff38;
    z-index: 20;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 5em auto;
    width: 70vh;
    height: 60vh;
    overflow: hidden;
    display: none;
    border-radius: 3px;
}	

#disclaimer h2{font-weight: bolder}

.container
{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.item {  background-color: none;  width: 61vh;  height: 63vh;}

@media (min-width: 1440px) {

#disclaimer {
    padding: 47px;
    top: 40px;
    right: 0;
    margin: 5em auto;
    width: 60vh;
    height: 70vh;
    padding-top: 38px;
}

.item {width: 50vh; height: 54vh;}		
}



@media (max-width: 667px){
	
#disclaimer {
    padding: 20px;
    top: 0;
    bottom: 0;
    margin: 10em auto;
    width: 50vh; 
    height: 50vh;
}
	

.container{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.item { background-color: none;  width: 44vh; height: 60vh; }	
	
	
	
}

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



.about-content__additionnal-text {
	/*margin-top: 30px*/
}

.about-content__additionnal-text p {
	font-size: 80%;
    line-height: 18px;
}

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


::-moz-selection {
color:#FDFF38;
text-shadow:none;
background:transparent
}
 .body-template-index ::-moz-selection, .body-template-about ::-moz-selection {
 color:#FDFF38;
background:transparent
}
::-moz-selection {
 color:#FDFF38;
text-shadow:none;
background:transparent
}
::selection {
	color: #FDFF38;
	text-shadow: none;
	background: transparent
}
.body-template-index ::-moz-selection, .body-template-about ::-moz-selection {
color:#FDFF38;
background:transparent
}
.body-template-index ::selection, .body-template-about ::selection {
	color: #FDFF38;
	background: transparent
}





/*CV --------------------------------------------------*/



#CVHeading {
	font-weight: 700;
	font-size: 40px;
	/*width:700px;*/width: 700px;
	letter-spacing: -1px;
	line-height: 1.1;
	padding: 0px 0px 4px 0px;
	margin: 0px 0px 0px 0px;
}
.CVLeft {
	display: block;
	float: left;
	font-size: 11px;
	line-height: 14px;
	width: 100px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}
.CVRight {
	display: block;
	float: left;
	font-size: 11px;
	line-height: 14px;
	width: 600px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}





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


.more, .more a {
	font-weight: 700;
	font-size: 11px;
	padding: 15px 0px 6px 0px;
	z-index: 500;
	width:100%;
	cursor: pointer;
	
}
.hidden {
	display: none;	
	padding: 17px 10px 10px 23px;
    font-size: 16px;
    line-height: 18px;
    text-align: left;
    max-width: 100ch;
	width: 100%;
    height: 280px;
    overflow: auto;	
	
}





/*.hidden p:before {
  content: "♥";
	content: ". ";
}*/


.hidden em{
	
	
	/*font-weight: bolder*/
}


@media (max-width: 667px){
.hidden {
	padding: 10px 0px 10px 16px;
    font-size: 12px;
    line-height: 12px;
    text-align: left;
    max-width: 58ch;
	height: auto;
}
}


@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:portrait){
.hidden {
    padding: 17px 0px 10px 5px;
    font-size: 11px;
    line-height: 11px;
    text-align: left;
    max-width: 70ch;
    /* word-spacing: -0.08em; */
    letter-spacing: -0.02em;

}
}



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


.show {	display: block;}
.less {	display: none;	font-weight: 700;	font-size: 11px;	padding: 0px 0px 6px 0px;}


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

.lozad {
   opacity: 0;
   transition: opacity 1000ms ease 100ms;
}

.lozad[data-loaded] {
   opacity: 1;
}


.testVertical{
	position: absolute;
    top: 0px;
    right: 100%;
    display: block;
    margin-bottom: 0;
    margin-right: 20px;
    text-align: right;
    -webkit-transform: rotateZ(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotateZ(-90deg);
    -webkit-transform-origin: 100% 0 0;
    -ms-transform-origin: 100% 0 0;
    transform-origin: 100% 0 0;
}



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

.fade {
  animation-name: fade;
  animation-duration: 2s;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*img[data-src] {
	opacity: 0;
}*/

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

.projects-grid2 {
/*    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /*padding: -1px 15px;*/
    padding-top: 0px;
    padding-top: 0px;
}




.accordion-container {
		position: relative;
		width: 100%;
		outline: 0;
		cursor: pointer
}

.accordion-container .article-title {
		display: block;
		position: relative;
		margin: 0;
		/*padding: 0.625em 0.625em 0.625em 2em;
		font-size: 1.25em;*/
		
		font-weight: normal;
		
		cursor: pointer;
}


.article-title {
font-family: BureauGrotLight;
	font-size:24px;

}

@media (max-width: 667px) {

.article-title {

	font-size:20px;

}
}


.accordion-container .article-title:hover,
.accordion-container .article-title:active,
.accordion-container .content-entry.open .article-title {
	/*color: #000;
	text-decoration: none;
	background-color: #FDFF38;
	-webkit-transition: all 0.50s ease-in-out;
	-moz-transition: all 0.50s ease-in-out;
	-ms-transition: all 0.50s ease-in-out;
	-o-transition: all 0.50s ease-in-out;
	transition: all 0.50s ease-in-out;
	outline: 1*/
}

.accordion-container .article-title:hover i:before,
.accordion-container .article-title:hover i:active,
.accordion-container .content-entry.open i {
		/*color: white;*/
}

.accordion-container .content-entry i {
		position: absolute;
		top: 3px;
		left: 12px;
		font-style: normal;
		font-size: 1.625em;
		color: #0079c1;
}

.accordion-container .content-entry i:before {
		content: "+ ";
}

.accordion-container .content-entry.open i:before {
		content: "- ";
}

.accordion-content {
		display: none;
		padding-left: 1em;
}

@media (max-width: 667px) {
.accordion-content {
    display: none;
    padding-left: 0.5em;
	}}


#content {
		width: 100%;
}

.accordion-container,
#description {
	/*	width: 90%;
		margin: 1.875em auto;*/
}

#description p {
		line-height: 1.5;
}

#description h2 {
		text-align: center;
}

@media all and (min-width: 860px) {
		#content {
				width: 70%;
				margin: 0 auto;
		}
}




/* width */
::-webkit-scrollbar {
  width: 2px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}









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

/* Texte défilant */

.defileParent {
	display: block;
	margin: 3em auto;
	overflow: hidden;
	position: relative;
	table-layout: fixed;
	width: 700px;
}
.defile {
	display:block;
	-webkit-animation:linear marqueelike 20s infinite ;
	-moz-animation:linear marqueelike 20s infinite ;
	-o-animation:linear marqueelike 20s infinite ;
	-ms-animation:linear marqueelike 20s infinite ;
	animation:linear marqueelike 20s infinite ;
	margin-left:-100%;
	padding:0 5px;
	text-align:left;
	height:25px;
}


.defile:after {
	content:attr(data-text);
	position:absolute;
	white-space:nowrap;
	padding-left:10px;
}

@-webkit-keyframes marqueelike {
	0%, 100% {margin-left:0;}
	99.99% {margin-left:-100%;}
 }
@-moz-keyframes marqueelike {
	0%, 100% {margin-left:0;}
	99.99% {margin-left:-100%;}
 }
@-o-keyframes marqueelike {
	0%, 100% {margin-left:0;}
	99.99% {margin-left:-100%;}
 }
@-ms-keyframes marqueelike {
	0%, 100% {margin-left:0;}
	99.99% {margin-left:-100%;}
 }
@keyframes marqueelike {
	0%, 100% {margin-left:0;}
	99.99% {margin-left:-100%;}
 }

@media only screen and (max-width: 860px) {
.defileParent {
	display: block;
	margin: 3em auto;
	overflow: hidden;
	position: relative;
	table-layout: fixed;
	width: 100%;
}

.defile {
	display:block;
	-webkit-animation:linear marqueelike 15s infinite ;
	-moz-animation:linear marqueelike 15s infinite ;
	-o-animation:linear marqueelike 15s infinite ;
	-ms-animation:linear marqueelike 15s infinite ;
	animation:linear marqueelike 15s infinite ;
	margin-left:-100%;
	padding:0 5px;
	text-align:left;
	height:25px;
}
}


c:before {
  content: "CURRENT";
	
	background-color: #EAEAEA;
	opacity: 0.8;
	
}


c:after {
	
	content: '\00a0';
}


/*---------------------------------------- SPLASH ----------------------------------------------------------*/


	 #Splash{
	height: 100vh; 
  background-size: cover;
  background-position: center;
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
		 text-align: center;
	 z-index:1
	 
	 
	}
	
	#Splash2{
	display: flex;
	flex-direction: column;
 	align-items: center;
	justify-content: center;
		
	
	margin-top: 15%;
    height: 40vh;
	padding: 100px;
	-webkit-font-smoothing: antialiased;
	background-blend-mode: multiply;
	background-size: cover;
	background-position: center;
	/*position: absolute ;margin-left: 40%;*/
	z-index:10000;
	background-color: whitesmoke;
	background: rgba(253, 255, 56); /* Fallback for older browsers without RGBA-support */
    background: rgba(253, 255, 56, 0.95);
	
	}
	 
	 #SplashContent {
		 display: flex;
	flex-direction: column;
/*	align-items: center;
*/	justify-content: center;
	height: 100vh;
	-webkit-font-smoothing: antialiased;
		opacity:1; 
	 }
	 
	 #SplashContent h1{
	font-size: 58px;
    font-weight: 500;
    letter-spacing: -1px;
    float: left;
    line-height: 1.1;
    position: relative;
	 }
	 
	 
	 #SplashContent h2{
	font-size: 72px;
    font-weight: 700;
    letter-spacing: -1px;
    float: left;
    line-height: 1.1;
    position: relative;
	background-image: linear-gradient(transparent 28px,#FDFF38 33px,#FDFF38 55px,transparent 17px);
	 }
	
	
	.fixedElement {
    background-color: #c0c0c0;
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
}
	


.bold {font-weight: bolder}





* {box-sizing: border-box;}


/*------------------------------TICKER-----------------------------------*/


@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.ticker-wrap {
  position: fixed;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  height: 2rem;
  background-color: #fdff38;
  padding-left: 100%;
  box-sizing: content-box;
	text-transform: uppercase;
	/*display:none;*/
}
.ticker-wrap .ticker {
  display: inline-block;
  height: 4rem;
  line-height: 2rem;
  white-space: nowrap;
  padding-right: 100%;
	font-size: large;
  box-sizing: content-box;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 30s;

   animation-duration: 30s;
  font-family: BureauGrotBook;
			/* font-family: Arimo;
			font-weight: 800;*/
	
}


}
.ticker-wrap .ticker__item {display: inline-block; /*color: white;*/}

@media (max-width: 667px) {
.ticker-wrap .ticker {
	
	font-size: small;
	animation-duration: 50s;
	
	}}




/*---------------------- overlay ---------------------------------*/



.overlay-front-page-backdrop {
    background: #fdff38;
}
.overlay-front-page-backdrop {
    max-width: inherit;
    /*background: transparent;*/
    opacity: 0.85;
}
.overlay-front-page {
    position: fixed;
}
.overlay-front-page {
    cursor: pointer;
}

.overlay-front-page-header {
    font-weight: bold;
}
.overlay-front-page-header {
	
	
    margin:  2.5em 36px 58px 88px;
/*	font-size: 76px;
*/    font-size: 3.4em;
    line-height: 1em;
    letter-spacing: 2px;
}


.overlay-title{margin-top:60px; font-style: italic}

.overlay-date{margin-top:20px}

.overlay-gall{margin-top:15px}



.overlay {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    display: block;
    z-index: 1050;
}

 
@media (max-width: 667px)  {
	
.overlay-front-page-header {
	
	margin: 4em 36px 36px 36px;
    font-size: 30px;
    /*line-height: 0.5em;*/
    letter-spacing: 2px;
	
	}
.overlay-title{margin-top:60px;}

.overlay-date{margin-top:25px}

.overlay-gall{margin-top:20px}
	
}



@media (max-width: 667px)  {
	
.overlay-front-page-header {
	
	margin: 4em 36px 36px 36px;
    font-size: 30px;
    /*line-height: 0.5em;*/
    letter-spacing: 2px;
	
	}
.overlay-title{margin-top:60px;}

.overlay-date{margin-top:25px}

.overlay-gall{margin-top:20px}
	
}





/*@media only screen and (min-width: 667px) and (orientation: landscape) { 


  .overlay-front-page-header {
	
	margin: 2.2em 36px 36px 95px;
    font-size: 26px;
 
    letter-spacing: 2px;
	
	}
.overlay-title{margin-top:60px;}

.overlay-date{margin-top:25px}

.overlay-gall{margin-top:20px}

}


*/




@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:portrait){
.overlay-front-page-header {
	
    margin: 3.8em 31px 5px 30px;
    font-size: 30px;
    /* line-height: 0.5em; */
    letter-spacing: 1px;
	
	
	
	
	
	
	
	
}	
}



	
.topPage{
	
	z-index: 999
	
	
}	
	
	
audio {
    filter: sepia(0%) saturate(3%) grayscale(100%) contrast(150%) invert(0%);
    width: 300px;
    height: 30px;
	margin-left: -22px;
}	

audio::-webkit-media-controls-enclosure {
    overflow:hidden;
}

audio::-webkit-media-controls-panel {
    width: calc(100% + 30px); 
}



.audioPlayer{
  display: block;
  border-radius: 2px;
  
}

.overlayVimeo{
	

	
    position: fixed;
    top: 50%;
    left: 50%;
    /* width: 47%; */
    transform: translate(-50%, -50%);
    background: rgba(253, 255, 56, 0);
	display: none;
	
	
}



@media (min-width: 667px) {
	.overlayVimeo{
	padding:100px;
	
	
	
	
}

}