#blue,
#planeOverflow {
	width: 100vw;
	height: 100vh
}

#planeRotate,
#planeZ {
	text-align: center;
	pointer-events: none
}

#planeDepth,
#planeOverflow,
#planeRotate,
#planeZ {
	pointer-events: none
}

#blue,
footer {
	z-index: -1000
}

.indexTitleM,
.invisible {
	display: none
}

#postCredits,
#postCredits li,
#postDescription,
.postRole {
	vertical-align: top
}

#backButton a,
.postNextProjectButton a,
header a {
	text-decoration: none
}

#postCredits ul,
.clientsList ul,
.connectList ul {
	list-style: none
}

body,
html {
	width: 100vw;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	font-size: 18px;
	line-height: 1.75em;
	font-family: Comic Sans MS;
	color: #000
}

body {
	background-color: #eee
}

#blue {

	position: fixed;
	-webkit-transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
	-moz-transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
	-o-transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
	transition: background-color .3s cubic-bezier(.645, .045, .355, 1)
}

.blue {
	font-family: Brush Script MT;
	background-color: #518dcc
}

a:hover {
	color: #518dcc
}

@font-face {
	font-family: MyFont;
	 url("8b9a6615e5548f889ddd9de161c44b24.ttf") format("truetype")
}

@font-face {
	font-family: MyFontBold;
	src: url(ac0acf95d91c403105bcfd7a6eb44820.woff) format('woff')
}

#planeOverflow {
	max-width: 100vw;
	max-height: 100vh;
	position: relative;
	overflow: hidden
}

#planeDepth {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -40vw;
	margin-top: -35vh;
	-webkit-perspective: 1800px;
	-moz-perspective: 1800px;
	perspective: 1800px
}

#planeRotate {
	width: 80vw;
	height: 70vh;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	position: relative;
	z-index: -100
}

#planeZ,
.tile {
	position: absolute
}

#planeZ {
	width: 200%;
	height: 200%;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: -webkit-transform .3s ease-out;
	-moz-transition: -moz-transform .3s ease-out;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	transform-origin: 0 0;
	-ms-transform: scale(.5, .5);
	-webkit-transform: scale(.5, .5);
	transform: scale(.5, .5);
	transition: opacity .5s
}

.whiteHeader,
header a {
	transition: color .5s ease
}

@media screen and (max-width:768px) {
	body,
	html {
		font-size: 16px;
		background-image: none;
		width: auto;
		height: auto
	}
	#planeOverflow {
		overflow-y: scroll;
		pointer-events: auto;
		-webkit-overflow-scrolling: touch
	}
	#planeDepth {
		margin-left: -44vw
	}
	#planeRotate {
		width: 94vw
	}
	#planeZ {
		width: 100%;
		height: 100%;
		-webkit-transform-style: flat;
		-moz-transform-style: flat;
		transform-style: flat;
		-ms-transform: scale(1, 1);
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1)
	}
}

#postTitleContainer,
#titleContainer {
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	left: 5vw;
	top: 50%
}

.tile {
	float: left;
	pointer-events: auto;
	background-size: 100%;
	background-position: center top;
	background-repeat: no-repeat
}

.tile img {
	width: 32vmin
}

@media screen and (max-width:768px) {
	.tile {
		position: relative;
		margin-left: -.2em;
		margin-bottom: 1em
	}
	.tile img {
		width: 90vw
	}
}

#backToProjects,
#fadingContainer,
#footerIdent,
#footerUrl,
#preloader,
#sayHelloButton a {
	position: absolute
}

footer,
header {
	width: 95vw;
	left: 2.5vw;
	position: fixed;
	text-align: center
}

.tile a:hover {
	animation: none
}

header {
	top: 1.5em;
	z-index: 1000
}

header a {
	position: relative;
	color: #000;
	color:#00d8ff66;
	padding-bottom: .2em
}

.whiteHeader {
	color: #fff
}

@media screen and (max-width:768px) {
	header {
		top: 0;
		padding-top: .8em;
		background-color: background-color:
		height: 3.2em;
		left: 0;
		width: 100vw
	}
	.whiteHeader {
		color: #000;
		transition: color .5s ease
	}
}

.activeSection {
	border-bottom: 1pt solid #000
}

#projectsInfoToggle {
	position: absolute;
	left: 0;
	padding-top: .5em
}

#sayHelloButton a {
	right: 0;
	box-sizing: border-box;
	padding: .3em 0 .2em;
	width: 7em;
	transition: all .5s ease
}

.whiteHello {
	color: #fff;
	border: 2pt solid #fff
}

.blackHello {
		font-family: Comic Sans MS;
		/* font-family: Brush Script MT; */
		font-size:1em;
	border: 0pt solid #000
}

.blackHello:hover,
.whiteHello:hover {
	/* border: 1pt solid #518dcc; */
	border: 1pt solid #00d8ff66;;
border-radius: 5px;	
color: #fff;
	/* background-color: #518dcc; */
	background-color: #00d8ff66;
}

@media screen and (max-width:768px) {
	#projectsInfoToggle {
		left: 5vw
	}
	#sayHelloButton a {
		right: 5vw
	}
	.whiteHello {
		color: #000;
		border: 2pt solid #000
	}
}

#postTitle,
.indexTitle {
	font-size: 10em;
	font-family: MyFont;
	color: #fff
}

#backToProjects {
	left: 0;
	margin-top: .5em
}

.backToProjectsLabel,
.backToProjectsStatic {
	margin: 0;
	padding: 0;
	float: left
}

.backToProjectsLabel {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	transition: max-width .6s cubic-bezier(.77, 0, .175, 1)
}

footer {
	bottom: 1em
}

#footerIdent {
	left: 0
}

#footerUrl {
	/* right: 0 */
	left: 0
}

#fadingContainer {
	opacity: 0
}

#preloader {
	left: 0;
	top: 0;
	height: 100vh;
	width: 100vw;
	background-color: red;
	z-index: 9000;
	pointer-events: none;
	transition: opacity .2s ease
}

#titleContainer {
	position: fixed;
	transform: translateY(-50%);
	width: 90vw
}

.indexTitle {
	position: relative;
	width: 90vw;
	line-height: 1.1em;
	text-align: center
}

@media screen and (max-width:768px) {
	#backToProjects {
		left: 5vw
	}
	#backToProjectsLabel {
		max-width: 10em
	}
	.indexTitle,
	footer {
		display: none
	}
	.indexTitleM {
		display: block;
		text-align: left;
		line-height: 1.2em;
		width: 90vw;
		padding-bottom: 1em
	}
	#workContainer {
		padding-top: 4em;
		height: 100vh;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch
	}
}

#infoIntro,
#postTitle {
	position: relative;
	line-height: 1.1em
}

#workContainer {
	position: absolute;
	width: 100vw;
	top: 0;
	left: 0;
	display: none;
	background-color: #518dcc; 
	z-index: 500
}

#postCredits,
#postDescription,
.nextProjectSpace,
.postRole,
.postSubhead,
b {
	display: inline-block
}

.postHero {
	width: 100vw;
	height: 100vh;
	position: relative;
	overflow: hidden;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed
}

#postTitleContainer {
	position: absolute;
	transform: translateY(-50%)
}

#postTitle {
	width: 90vw;
	text-align: center;
	z-index: 2000
}

.postCreditsLabel,
.postSubhead,
b,
strong {
	font-family: MyFontBold;
	text-transform: uppercase;
	letter-spacing: .1em
}

@media screen and (max-width:768px) {
	.postHero {
		height: 50vh;
		background-size: cover;
		background-attachment: scroll
	}
	#postTitleContainer {
		left: 0
	}
	#postTitle {
		margin-top: 1em;
		font-size: 3em;
		margin-left: 5vw;
		width: 90vw;
		padding-bottom: 1em
	}
	#postContent {
		padding-left: 5vw;
		padding-right: 5vw;
		width: 90vw;
		padding-top: 5vh
	}
}

.postCreditsLabel,
.postSubhead,
b,
figcaption,
strong {
	font-size: .8em;
	color: #ddd;
}

#postContent {
	position: absolute;
	background-color: #518dcc
}

.postDiv {
	margin-left: 15vw
}

.postIntro {
	margin: 12em 0 8em 15vw
}

.postFooter {
	margin-top: 8em
}

.postBody {
	margin-left: 15vw
}

.postBody p {
	margin: 8em 0;
	width: 70vw
}

@media screen and (max-width:768px) {
	.postDiv {
		margin-left: 0;
		padding-top: 5vh;
		width: auto
	}
	.postIntro {
		margin: 2em 0
	}
	.postBody {
		margin-left: 0
	}
	.postFooter {
		margin-top: 0
	}
}

.postSubhead,
b {
	width: 20vw;
	padding-bottom: 1em
}

@media screen and (max-width:768px) {
	.postSubhead {
		width: auto
	}
}

figcaption {
	margin: -.8rem 0 2rem;
	width: 70vw;
	line-height: 1.75em
}

#postDescription {
	width: 50vw;
	padding: 0;
	margin: 0
}

#postDescription p {
	margin-bottom: 1.5em
}

@media screen and (max-width:768px) {
	figcaption {
		width: 90vw;
		margin: 0 0 2em
	}
	#postDescription {
		width: 100%;
		padding-bottom: 1em
	}
}

.postRole {
	width: 30vw;
	padding: 0;
	margin: 0 0 20vh
}

.flush img,
figure,
p {
	-webkit-margin-before: 0
}

@media screen and (max-width:768px) {
	.postRole {
		width: auto;
		margin-bottom: 0
	}
}

#postCredits {
	padding-left: 5vw;
	margin-bottom: 20vh;
	width: 30vw
}

#infoIntro,
.large {
	font-family: MyFont
}

#infoIntro,
.postNextProject {
	text-align: center;
	color: #fff
}

#postCredits ul {
	margin: 0;
	padding: 0
}

#postCredits li {
	float: left;
	width: 15vw;
	margin-right: -4px;
	margin-bottom: 1.5em
}

#postCredits li>ul>li {
	margin-bottom: 0
}

@media screen and (max-width:768px) {
	#postCredits {
		padding-top: 2em;
		padding-left: 0;
		width: 100%;
		padding-bottom: 1em
	}
	#postCredits li {
		width: 45vw
	}
	.postNextProject {
		width: 100vw;
		margin-left: -5vw
	}
}

.postNextProject {
	width: 100vw;
	padding: 3em 0;
	background-color: #000;
	font-size: 2em;
	z-index: 1000;
	transition: all .5s ease
}

.postNextProject:hover {
	background-color: #518dcc
}

.nextProjectSpace {
	width: 0;
	transition: all .5s ease
}

#infoContainer,
#infoContent {
	position: absolute;
	width: 100vw
}

#infoContainer {
	top: 0;
	left: 0;
	display: none
}

#infoIntroContainer {
	position: absolute;
	left: 5vw;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%)
}

#infoIntro {
	width: 90vw;
	font-size: 10em;
	letter-spacing: -.02em;
	z-index: 2000
}

.large,
.small {
	line-height: 1.75em
}

.infoText a,
.small a {
	text-decoration: none;
	color: #000;
	border-bottom: 1pt solid #000
}

#infoContent {
	padding-top: 10vh;
	background-color: #518dcc
}

@media screen and (max-width:768px) {
	#infoContainer {
		padding-top: 4em
	}
	#infoIntro {
		left: 0;
		margin-top: 1em;
		font-size: 3em;
		padding-bottom: 1em
	}
	#infoContent {
		padding-left: 5vw;
		width: 100vw
	}
}

.infoText,
.large {
	padding: 0 0 10vh;
	display: inline-block;
	vertical-align: top
}

.infoText {
	width: 50vw;
	margin: 0
}

.experience p {
	margin-bottom: 1em
}

@media screen and (max-width:768px) {
	.infoText {
		width: 90vw
	}
}

.large {
	width: 45vw;
	margin: 0;
	font-size: 2em
}

.clientsList li,
.clientsList ul,
.connectList ul,
.small {
	padding: 0;
	margin: 0
}

@media screen and (max-width:768px) {
	.large {
		width: 85vw;
		margin-left: -.4em;
		font-size: 1.5em
	}
}

.small {
	display: inline-block;
	width: 45vw;
	vertical-align: top;
	font-size: .8em
}

@media screen and (max-width:768px) {
	.small {
		width: 90vw
	}
}

.clientsList li {
	width: 15vw;
	float: left
}

@media screen and (max-width:768px) {
	.clientsList li {
		width: 45vw
	}
}

.connectList ul {
	width: 15vw;
	float: left
}

@media screen and (max-width:768px) {
	.connectList ul {
		width: 45vw
	}
}

.video1080 {
	position: relative;
	padding-bottom: 47%;
	height: 0;
	overflow: hidden;
	margin-bottom: 2em
}

figure,
p {
	padding: 0
}

.video1080 embed,
.video1080 iframe,
.video1080 object {
	position: absolute;
	top: 0;
	left: 0;
	width: 70vw;
	height: 100%
}

.video1080flush {
	position: relative;
	padding-bottom: 46.2%;
	height: 0;
	overflow: hidden;
	margin-bottom: 0
}

figure,
p {
	padding: 0
}

.video1080flush embed,
.video1080flush iframe,
.video1080flush object {
	position: absolute;
	top: 0;
	left: 0;
	width: 70vw;
	height: 100%
}

.videoLarge {
	position: relative;
	padding-bottom: 59%;
	height: 0;
	overflow: hidden;
	margin-bottom: 2em
}

figure,
p {
	padding: 0
}

.videoLarge embed,
.videoLarge iframe,
.videoLarge object {
	position: absolute;
	top: 0;
	left: 0;
	width: 70vw;
	height: 100%
}

figure {
	border: 0;
	width: 100%;
	margin-left: 0;
	-webkit-margin-after: 0
}

figure img {
	padding: 0;
	border: 0;
	width: 70vw;
	margin: 0 0 1em
}

.flush img {
	margin: 0;
	line-height: 0;
	-webkit-margin-after: -.62em
}

@media screen and (max-width:768px) {
	.video1080,
	.video1080flush {
		padding-bottom: 55%
	}
	.videoLarge {
		padding-bottom: 72%;
	}
	.video1080 embed,
	.video1080 iframe,
	.video1080 object,
	.video1080flush embed,
	.video1080flush iframe,
	.video1080flush object,
	.videoLarge embed,
	.videoLarge iframe,
	.videoLarge object {
		width: 90vw;
	}
	figure img {
		padding: 0;
		border: 0;
		width: 90vw;
		margin: 0 0 1em
	}
}

p {
	margin: 0;
	-webkit-margin-after: 0
}

.infoText p {
	margin-bottom: 1em
}

strong {
	font-weight: 400;
	font-family: MyFontBold
}

iframe {
	/* frameborder:0; */
	border: 0;
	}
	#section1, #section1 {
		text-align:center; 
		background-image: url(https://kesju4.fun/kaunasnt.webp);
		background-size: cover;
	}


	/* .tile[data-headercolor="true"] {
		color: yellow;
	  } */
	  p.indexTitle{
		/* color:#999; */
		color:#00d8ff33;
	}
	.eparts{display:inline;color:#00d8ff66;}
	@media screen and (max-width:414px) {.eparts{display: none;}}