@font-face{ font-family: "CircularStd-Book"; src: url("asset/CircularStd-Book.woff") format("woff"); }
body,
html {
	box-sizing:border-box;
    width: 100%;
    height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
    overflow: hidden
}
body {
  font-family: "CircularStd-Book", sans-serif;
  font-size: 31px;
  margin:0;
}
a {
	color: white;
	text-decoration: underline;
	pointer-events: auto !important;
	z-index: 10;
}
p {
	color: white;
	font-size:calc(100vh * 30 / 1080);
	line-height: 1.35em;
	margin-bottom: 2.5rem;
}
p:last-child { margin-bottom: 0; }
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
p span { margin-right: 0.2rem; }
header {
    display: flex; display: -webkit-flex;
    align-items: center;
    z-index: 9999;
}
.logo {
	position: relative;
    margin: auto;
	fill: white;
	width: calc((100vh * 0.26)*4.756);
	height: calc(100vh * 0.26);
    z-index: 1;
	transition: none;
}
#logoN {
	fill: white;
    position: absolute;
	top: calc(50vh - (50vh * 0.26));
	left: calc((100% - (100vh * 1.236))/2);
	width: calc((100vh * 0.26)*1.229);
	height: calc(100vh * 0.26);
	z-index: 4;
}
#logoHor { display: none; }
.logo.hide { fill: none; }
#logoN.show { fill: white; }
.more-info {
    display: flex; display: -webkit-flex;
    position: fixed;
    bottom: 0;
    right: 0;
    /*left: 0;
    margin: 0 auto;
    max-width: 100%;*/
	max-width: 5%;
    padding: 4.85rem;
	padding-top: 0;
    z-index: 100;
    justify-content: flex-end;
}
.toggle {
	background: transparent;
    border: none;
    outline: none;
    position: relative;
	width: 31px;
    height: 31px;
	transform: initial;
	transition: transform 300ms;
}
.toggle:hover .toggle-line { background: silver; }
.toggle.is-clicked .toggle-line { transform: rotate(45deg); }
.toggle-line {
    display: block;
    width: 31px;
    height: 2px;
    background: white;
    position: absolute;
    right: 1px;
	top: calc(50% - 1px);
    transition: background 300ms;
	transition: transform 300ms;
}
.toggle-line:first-child { transform: rotate(90deg); }
.toggle.is-clicked .toggle-line:first-child { transform: rotate(135deg); }
#manifesto {
	padding: 2rem;
	padding-left: 0;
	margin: auto;
	margin-left:50%;
	z-index: 2;
}
#logo-section {
	display: flex; display: -webkit-flex;
	width: 100%;
    height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
    position: absolute;
	top:0;
    overflow: hidden;
}
#about-section {
	display: flex; display: -webkit-flex;
	width: 100%;
    height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
    position: absolute;
	top:0;
    overflow: hidden;
	opacity:1;
	filter: alpha(opacity=100);
	transition: all 500ms ease-out;
}
#about-section.hide {
	opacity:0;
	filter: alpha(opacity=0);
}
.info {
	display: flex; display: -webkit-flex;
	width: 100vw;
    height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
    position: absolute;
	top:0;
    overflow: hidden;
	opacity:0;
	filter: alpha(opacity=0);
    background: rgba(0,0,0,0.8);
	transition: all 500ms ease-out;
	visibility: hidden;
	z-index: 2;
}
.info.show {
	visibility: visible;
	opacity:1;
	filter: alpha(opacity=100);
	z-index:4;
}
p.contacts span { 
	color:silver;
	display:inline;
}
#portfolio-team { 
	display: flex; display: -webkit-flex;
	flex-direction: row;
	align-items: flex-start;
}
#portfolio p, #team p {
	font-size:calc(100vh * 20 / 1080);
	margin-right: 4rem;
	padding-top: 2rem;
}
#team p:first-child { margin-bottom: 0; }
#portfolio p span, #team p span {
	color: silver;
	display:block;
}
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}
.video-container {
    width: 100vw;
    height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
    position: relative;
    overflow: hidden;
    background: black;
	display: flex; display: -webkit-flex;
}
#video-bg {
    background: black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	width: 100vw;
    height: calc(100vw / 16 * 9);
}
@media (max-aspect-ratio: 16 / 9) {
    #video-bg {
        width: calc(100vh / 9 * 16);
        height: 100vh;
		height: calc(var(--vh, 1vh) * 100);
    }
}
@media screen and (min-width: 1600px){
	.more-info { padding: 4.85rem; padding-top: 0; }
}
@media screen and (min-width: 1166px) and (min-aspect-ratio: 20/9) {
	.logo { position: initial; top: initial; }
	#logo-section { display: none; }
	#logoMobile {	
		display: block!important;
		height: auto!important;
		padding-bottom: 3.15rem!important;
		padding-top: 16px;
		width: 50vw!important;
	}
	#about-section { display: flex;  z-index: 3;  }
	#about {
		width: calc(100%*1346/1920);
		padding: 2rem!important;
		margin: auto!important;
	}
	#about p { margin-left: 50%; }
}

@media screen and (min-width: 1166px) and (max-aspect-ratio: 12/9) {
	.logo { width: calc(100% * 0.7010); }
	#logoN { left: calc((100% - (100% * 0.7010)) / 2); width: calc(100% * 348/1920); }
}
@media screen and (min-width: 1166px){
	#about { padding-top: 34.5%; }
}
@media screen and (max-width: 1165px){
	.logo {
		width: calc(100%*1346/1920);
		height: calc(100vh*282/1080);
	}
	#logoN { display: none;}
	.more-info { padding: 1.5rem; padding-top: 0; }
	#portfolio-team { display: block; margin-left: 2rem; }
	#portfolio p, #team p {
		font-size:calc(100vh * 18 / 1080);
		margin-right: 0;
		padding-top: 1rem;
	}
	#team { display: flex; display: -webkit-flex; }
	#team p:first-child { margin-right: 1.5rem; }
}
@media screen and (min-width: 1140px){
	p span { display: block; }
}
/* ----------- iPad Pro 10.5" Portrait ----------- */
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 834px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
	#manifesto { margin-left: 30%; }
}
/* ----------- iPad Pro 12.9" Portrait ----------- */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
	#manifesto { margin-left: 30%; }
}
@media screen and (min-width: 815px){
	#about {
		padding: 0 2rem 0 0;
		margin: auto;
		/*padding-top: 46%;*/
		padding-top: 60vh;
		margin-left: 50%;
	}
	#logoMobile { display: none; }
}
@media screen and (max-width: 814px) and (orientation : portrait){
	p { font-size:calc(100vh * 25 / 1080); margin-bottom: 1rem; }
	#about-section p { font-size:calc(100vh * 30 / 1080); }
	.logo { position: initial; top: initial; }
	#logo-section { display: none; }
	#logoMobile {	
		height: auto!important;
		padding-bottom: 2rem!important;
		padding-top: 6px;
		width: calc(100vw*1346/1920)!important;
	}
	#about-section { display: flex;  z-index: 3;  }
	#about {
		width: calc(100%*1346/1920);
		padding: 2rem;
		margin: auto!important;
	}
	.more-info { display: none; }
	#manifesto {
		width: calc(100%*1346/1920);
		padding:2rem;
		margin: auto!important;
	}
	.video-container { width: 100%;height: 100%; }
}
@media only screen and (min-device-width : 300px) and (max-width : 897px) and (orientation : landscape) {
	#about-section, #more-info-section { 
		visibility: hidden!important; 
		opacity = 0; 
		filter: alpha(opacity=100);
		transition: none;
		-webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
	}
	.more-info, .video-container { display: none; }
	body {
		background: black;
		animation: colorchange .2s infinite;
		-webkit-animation: colorchange .2s infinite; /* Chrome and Safari */
	}
		#hor-background {
		display: flex;
		width: 100%;
		height: 100vh;
		height: calc(var(--vh, 1vh) * 100);
		position: absolute;
		top: 0;
		left:0;
		overflow: hidden;
		background: black;
		z-index: 5;
		animation: colorchange .2s infinite;
		-webkit-animation: colorchange .2s infinite; /* Chrome and Safari */
	}
	#logo { display: none; }
	#logoHor { display: block; padding: initial; position: relative; top: initial; left: initial; }
	@keyframes colorchange
    {
      0%   {background: white;}
	  24.9%   {background: white;}
      25%  {background: black;}
	  49.9%  {background: black;}
	  50%   {background: white;}
	  74.9%   {background: white;}
      75%  {background: black;}
	  99.9%  {background: black;}
    }
    @-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
    {
      0%   {background: white;}
	  24.9%   {background: white;}
      25%  {background: black;}
	  49.9%  {background: black;}
	  50%   {background: white;}
	  74.9%   {background: white;}
      75%  {background: black;}
	  99.9%  {background: black;}
    }
}
/* Prevents Mobile Safari from bumping up font sizes in landscape */
@media only screen and (max-device-width: 480px) {
	body {
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}
}
/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
    .more-info { display: none; }
}