@font-face {

	font-family: GoodPro;

	src: url(fonts/GoodPro-News.otf);

}



* {

	/*	font-family: monospace;*/

	letter-spacing: 1px;

	color: #a3a3a3;

	font-family: GoodPro, monospace;

}

/* ::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	background-color: #F5F5F5;
}

::-webkit-scrollbar {
	width: 5px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
	background-color: #323232;
} */


body {

/*	overflow: hidden;*/

	/*

	height: 100vh;

	width: 100vw;

*/

		overflow-x: hidden;

	max-width: 100vw;

}





/*

body{

	height:300vh;

}

body::-webkit-scrollbar {

    display: none;

}

*/







svg * {

	transition: all 500ms ease;

}



.panelContainer {

	position: fixed;

	overflow: hidden;

	height: 100vh;

	width: 100vw;

}



a:visited,

a:link,

a:active,

a {

	text-decoration: none;

	color: #838383;

}



a:hover {

	text-decoration: none;

	/*		color: #FCB813;*/

	/*color: #F7A800;*/
	color: #96C121;

}



.navCross {

	fill: none;

}

.navCross.filled {

	/*fill: #F7A800;*/
	fill: #96C121;

}



.nav {

	position: absolute;

	bottom: 10px;

	left: 0;

	font-size: 16px;

	width: 100%;

}



.nav li {

	display: inline-block;

	padding-right: 30px;

}



.nav li a {

	text-decoration: none;

	font-size: 16px;

}



.linkdetails {

	color: #DADADA;

	line-height: 1;

	/*position: absolute;*/

	padding-top: 20px;

	/*display: none;*/

	/*bottom: 0;*/

}



.slideIcons:hover .linkdetails span{

	/*color: #F7A800;*/
	color: #96C121;

}

 .linkdetails span {

	padding: 5px;

	overflow: hidden;

}

/*.linkdetails span:after {

	content: "";

	width: 0;

	height: 1px;

	position: absolute;

	bottom: 0px;

	left: 0;

	transition: all 500ms ease;

	background-color: #F7A800;

}

.linkdetails:hover span:after {

	width: 100%;

}*/



.socialIcons{

	text-align: right;

}

.socialIcons ul li a svg{

	width: 25px;

}

.socialIcons svg path{

	fill: #7d7d7d;

	transition: all 800ms ease;

	stroke: none;

}

.socialIcons svg:hover path{

	/*fill: #fcb813;*/
	fill: #96C121;



}

.scrollbar.noShow{

	right: -100px;



}

.scrollbar {

	margin-left: 22px;

	float: left;

	height: 400px;

	width: 4px;

	background: #d1d1d1;

	margin-bottom: 25px;

	position: absolute;

	right: 50px;

	top: calc(40% - 200px);

	-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);

	box-shadow: inset 0 0 1px rgba(0,0,0,0.3);

	border-radius: 3px;

	transition: all 800ms ease;

}



.scrollControlUp {

	position: absolute;

	top: -25px;

	    left: -2px;

}



.scrollControlDown {

	position: absolute;

	bottom: -25px;

	    left: -2px;

}



.dragCross {

	position: absolute;

    left: -5px;

    width: 15px;

    height: 15px;

	transition: all 1000ms ease;

	cursor: pointer;

}



.dragCross svg.animated {

	animation-name: rotatetion;

}



.dragCross svg {

	/*fill: #F7A800;*/
	fill: #96C121;

}



.dragCross .clientNode {

	/*fill: #F7A800;*/
	fill: #96C121;

	position: absolute;

	right: 30px;

	top: 0;

	line-height: 1.6;

	font-size: 11px;

}



.marks {

	font-size: 12px;

	position: absolute;

	right: 20px;

	width: 200px;

	transform-origin: right;

	transform: rotate(-90deg);

	top: calc(40% - 130px);

	letter-spacing: 1px;

	animation-name: upAndDown;

	animation-duration: 1500ms;

}

.upAndDownMoving{

	animation: upAndDownMoving 1500ms ease infinite;

}



@keyframes upAndDownMoving {

	0% {

		transform: translateY(0);

	}

	50% {

		transform: translateY(20px);

	}

	100% {

		transform: translateY(0);

	}

}



@keyframes upAndDown {

	0% {

		transform: translateY(0) rotate(-90deg);

		letter-spacing: 1px;

	}

	50% {

		transform: translateY(20px) rotate(-90deg);

		letter-spacing: 3px;

	}

	100% {

		transform: translateY(0) rotate(-90deg);

		letter-spacing: 1px;

	}

}



.nav a svg {

	width: 14px;

	margin-right: 5px;

	transition: all 300ms ease;

	fill: none;

	stroke-width: 1px;

	stroke: #797979;

}



.nav .mainNav a:hover svg {



	/*stroke: #FCB813;*/
	stroke: #96C121;

	transform-origin: center;

	transform: rotate(135deg);

}

.nav a:hover svg .navCross{

	/*fill: #FCB813;*/
	fill: #96C121;

}



.slideIcons {

	width: 250px;

	margin: auto;

	height: auto;

	height: 250px;

	position: absolute;

	top: calc(50% - 155px);

	left: 0;

	right: 0;



	/*bottom: 0;*/

}

.slideIcons a{

	font-size: 18px;

	/*position: absolute;*/



}



.slideIcons .slideLayer {

	position: relative;

	width: 100%;

	height: 100%;

	text-align: center;

	display: flex;

	justify-content: center;

	align-content: center;

}



.slideIcons .slideLayer img {

	margin: auto;

	max-width: 100%;

	max-height: 100%;

	/*position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;*/

}



.slideIcons .slideLayer .grey {

	display: block;

}

.slideIcons .slideLayer .color {

	display: none;

}

.slideIcons .slideLayer:hover .grey {

	display: none;

}

.slideIcons .slideLayer:hover .color {

	display: block;

}



.plusZoomOut.animated {

	animation-name: plusZoomOut;

}



@keyframes plusZoomOut {

	0% {

		transform: scale(1);

		opacity: 1;

	}

	70% {

		transform: scale(2.5);

		opacity: 0;

	}

	100% {

		transform: scale(3);

		opacity: 0;

	}

}



.plusZoomIn.animated {

	animation-name: plusZoomIn;

}



@keyframes plusZoomIn {

	0% {

		transform: scale(3);

		opacity: 0;

	}

	100% {

		transform: scale(1);

		opacity: 1;

	}

}



#cre8-plus {

    width: 4100px;

    position: absolute;

    transform-origin: center;

    /* transform: translate(-80vw, -100vh); */

    margin-left: -1790px;

    left: 50%;

    margin-top: -1056px;

    top: 50%;

	transition: all 800ms ease;

}

#cre8-plus.shift {

	transform-origin: center;

	transform: translateX(-600px);



}



#cre8-left.animated {

	animation-name: moveLeft;

	animation-duration: 750ms;

	/*

		animation-duration: 2000ms;

		animation-iteration-count: infinite;

		animation-timing-function: linear;

*/

}



#cre8-right.animated {

	animation-name: moveRight;

	animation-duration: 750ms;

	/*

		animation-duration: 2000ms;

		animation-iteration-count: infinite;

		animation-timing-function: linear;

*/

}

#cre8-8{
	transform-origin: 44% 43%;
}

#cre8-8.animated {
	
	animation-name: rotatetion;

	animation-duration: 750ms;

	/*

		animation-duration: 2000ms;

		animation-iteration-count: infinite;

		animation-timing-function: linear;

*/

}



@keyframes rotatetion {

	0% {

		transform: rotate(0);

		

	}

	100% {

		transform: rotate(360deg);


	}

}



@keyframes moveLeft {

	0% {

		transform: translateX(0);

	}

	70% {

		transform: translateX(-150px);

	}

	100% {

		transform: translateX(0);

	}

}



@keyframes moveRight {

	0% {

		transform: translateX(0);

	}

	70% {

		transform: translateX(150px);

	}

	100% {

		transform: translateX(0);

	}

}



@media (min-width:767px) {

	.clientListView {

		padding-left: 70px;

	}

}



.clientListView {

	position: absolute;

	width: 90%;

	height: 550px;

	max-width: 1200px;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	margin: auto;

}



.clientListView h3 {

	font-size: 30px;

}



.clientListView ul {

	list-style: none;

	padding: 0;

	margin: 0;

	display: inline-block;

	width: 32%;

}



.flex {

	display: flex;

	flex-direction: row;

}

.clientListView .flex {

	display: flex;

	flex-direction: row;

}



.clientListView .flex ul:nth-of-type(1) {

	padding-top: 30px;

}



.clientListView .flex ul:nth-of-type(2) {

	padding-top: 80px;

}



.clientListView .flex ul:nth-of-type(3) {

	padding-top: 0px;

}



.clientListView .worksitem {

	position: relative;

	padding: 8px 5px;

}



.clientListView .worksitem a {

	font-size: 17px;letter-spacing: 1.5px;

}



.clientListView .worksitem a svg {

	z-index: 1000;

	position: absolute;

	top: 12px;

	left: 0;

	width: 13px;

	margin-right: 8px;

	transition: all 300ms ease;

	fill: none;

	stroke-width: 1px;

	stroke: #797979;

}



.clientListView .worksitem a:hover svg {

	/*fill: #F7A800;*/
	fill: #96C121;

	/*stroke: #F7A800;*/
	stroke: #96C121;

	transform-origin: center;

	transform: rotate(135deg);

}



.arrowPair {
    
    font-size: 2rem;

	position: fixed;

	top: 30px;

	left: 30px;

	z-index: 999;

	transition: all 800ms ease;

}

.arrowPair.active {

	top:-40px;

	opacity: 0;

}



.arrowPair svg {

	width: 2rem;

}



.arrowPair .cls-1 {

	fill: #a3a3a3;

}



.arrowPair .cls-2 {

	fill: #a3a3a3

}



.arrowPair:hover .cls-1 {

	fill: #850038;

}



.arrowPair:hover .cls-2 {

	/*fill: #F7A800*/
	fill: #96C121

}



.notation {

	padding-left: 13px;

	position: relative;

	margin-bottom: 10px;

}



.notation svg{

	max-height: 115px;

}



.notation * {

	transition: all 200ms ease;

}



.notation.active .toggle-grey {



	fill: #B9B9B9;

	stroke: #B9B9B9;

}



.notation.active .toggle-yellow {

	/*fill: #F7A800;*/
	fill: #96C121;

	/*stroke: #F7A800;*/
	stroke: #96C121;

}



.toggle-grey {

	/*fill: #F7A800;*/
	fill: #96C121;

	/*stroke: #F7A800;*/
	stroke: #96C121;

}



.toggle-yellow {



	fill: #B9B9B9;

	stroke: #B9B9B9;

}



.active #bottomArrow * {

	/*fill: #fcb813;*/
	fill: #96C121;

}



#bottomArrow {

	width: 50px;

	position: absolute;

	top: 350px;

	left: -130px;

}



.active #topArrow * {

	fill: #850038;

}



#topArrow {

	width: 50px;

	position: absolute;

	top: -150px;

	left: 480px;

}





.logoBg {

	position: absolute;

  right: 0;

  top: 0;

}





.logoWorks {

    width: 300px;

    position: absolute;

    top: 150px;

    right: 350px;

}



.logoBg.mode-square img{

	transform: translateX(30%) translateY(-50%);

}

.logoBg.mode-ver img{

    transform: translateX(40%) translateY(-10%);

}

.logoBg.mode-hori img{

	transform: translateX(15%) translateY(-10%);

}



#worksSection {

	margin-top: 450px;

}



.description {



}



.worksDescription {

	width: 100%;

	max-width: 650px;

}

.worksDescription h3{

	font-size: 21px;

	margin-bottom: 40px;

}

.worksDescription p{

	padding-left: 110px;

	position: relative;

}

.worksDescription p:nth-of-type(1)::before{

	content: "";

	background-color: rgba(150, 193, 33, 0.2);
	/* background-color: rgba(252, 184, 19, 0.2); */

	position: absolute;

	top: 7px;

	left: -200px;

	width: 450px;

	height: 6px;

}

.worksDescription p:last-of-type::after{

	content: "";

	background-color: rgba(150, 193, 33, 0.2);
	/* background-color: rgba(252, 184, 19, 0.2); */

	position: absolute;

	bottom: 7px;

	left: 150px;

	width: 450px;

	height: 6px;

}



.sepArrow {

	margin-top: -50px;

	text-align: center;

}



.worksContainer {

	overflow-x: hidden;

	overflow-y: hidden;

	background-attachment: fixed;

}



.element {

	margin-bottom: 100px;

}



.crossDesc p{



}



.crossDesc {

	text-align: justify;

	align-self:flex-end;

	margin-bottom: 10px;

	padding-right: 30px;

	position: relative;

}

/*

.crossDesc:before {

	content: "";

	position: absolute;

	border-top: 1px solid #7d7d7d;

}

*/



.leftCross {

	position: absolute;

	width: 15px;

	top: -40px;

	right: 0;

}

.leftCross:before {

    content: "";

    position: absolute;

    top: 11px;

    right: 30px;

    width: 700px;

    height: 1px;

/*	border-top:1px dashed red;*/

    background-color: #7d7d7d;

}

.halfDesc{

	position: relative;

}

.rightCross {

	position: absolute;

	width: 15px;

top: -40px;

/*    left: 50px;*/

}

.rightCross:before {

    content: "";

    position: absolute;

    top: 11px;

    left: 30px;

    width: 1000px;

    height: 1px;

/*	border-top:1px dashed red;*/

    background-color: #7d7d7d;

}



.rightDesc {

	text-align: justify;

	width: 650px;

	position: relative;

}

.centerDesc {

	width: 560px;

	max-width: 100%;

	text-align: justify;

	position: relative;

	margin: auto;

}

.centerDesc p{



	text-align: justify;

	position: relative;

	margin: auto;

}



.topCross{

    content: "";

    position: absolute;

    top: -30px;

    left: -30px;

}

.centerCross{

    content: "";

    position: absolute;

    top: -30px;

    left: calc(50% - 15px);

}

.centerCross:before,

.topCross:before{

    content: "";

    position: absolute;

    bottom: 30px;

    left: 11px;

    width: 1px;

    height: 20px;

    background-color: #7d7d7d;

}



.centerImg {

	width: 560px;

	max-width: 100%;

	margin: 0 auto 30px;

}

.fullImg {

	/*width: 100%;*/

	margin-bottom: 60px;

}

.fullImg img{

	/*width: 100%;*/

	display: block;

	margin: auto;

}



.halfDesc {

	padding-left: 30px;

	display: flex;

}



.halfImg {

	flex: 6;

}

.halfImg img{

	max-width: 100%;

}



.rightImg {

	margin-right: 0;

	width: 80%;

display: inline-block;

}

.rightImg img{

	width: 100%;

}





.centerImg img{

	max-width: 100%;

}



.Sig {

	color:#323232;

}









.horizontal {

	display: flex;

	flex-direction: row;

}

.horizontal > *{

	flex: 1;

	align-self: center;

}

.mobileMenu {

	display: none;

}





/*#worksSection  .flex > *:first-child{

	margin-bottom: 60px;

}*/

.worksDescription p{

	padding-left: 0;

}

.Sig{

	text-align: center;

}



/*social icon	*/

.socialIcons{

	display: none;

}







	/*.mainNav{

	transition: all 500ms ease;

	opacity: 0;

	top: 0;

	right: 0;

	width: 0;

	height: 0;

	border-radius: 50%;

	opacity: 1;



	border-radius: 0;

	top: 0;

	left: 0;

	padding: 30px 90px !important;



	flex-direction: column;

	align-content: center;

	justify-content: center;

	overflow: hidden;

		z-index: 1000;

		display: none;

}*/







/*

.mainNav:before{

	content: '';

	transition: all 800ms ease;

	width: 100vh;

	height: 100vh;

	border-radius: 50%;

	background: #d8bf15;

	position: absolute;

}

*/

.mainNav li{

	margin-bottom: 15px;

}





.showCaseImage {

position: relative;

overflow: hidden

}

.showCaseImage:after {

content: '';

position: absolute;

width: 100%;

height: 100%;

background-color: #fff;

top: 0;

left: 0;

transition: all 800ms ease;

}

.showCaseImage:hover:after {

left: 100%;

}





.active .menu-line {

background-color: #ffffff;

}

.menu-line {

background-color: #B9B9B9;

height: 2px;

width: 100%;

border-radius: 2px;

position: absolute;

left: 0;

transition: all 350ms ease-in-out;

}

.menu-line-2 {

top: 0;

bottom: 0;

margin: auto;

}

.menu-line-3 {

bottom: 0;

}

.active .menu-line-1 {

transform: translateY(7px) translateY(-50%) rotate(-90deg);

}

.active .menu-line-2 {

opacity: 0;

transform: translateX(100px);

}

.active .menu-line-3 {

transform: translateY(-3px) translateY(50%);

}





@media (max-width:767px) {



.mainNav{

	display: none;

}

	.mobileMenu{

		display: block;

		position: fixed;

		right: 30px;

		top: 30px;

		z-index: 9999;

				width: 15px;

		height: 10px;

	}

	.mobileMenu .bgenlarge{

		opacity: 0;

		/*background-color: #f8b424;*/
		background-color: #96C121;

		position: absolute;

		width: 50px;

		height: 50px;

		top: 0;

		right: 0;

		z-index: 1;

		border-radius: 50%;

		transition: all 500ms ease;

		transform-origin: center;

				z-index: -1;

	}



	.mobileMenu.active .bgenlarge{

		opacity: 1;

		transform: scale(30);

	}



	.mobileMenu.active ~ .mainNav{

		display: flex;

    position: fixed;

    width: 70vw;

    height: 40vh;

    top: calc(50% - 20vh);

    bottom: 0;

    left: 0;

    right: 0;

    margin: auto;

    z-index: 99999;

    flex-direction: column;

	}

	.mobileMenu.active ~ .mainNav *{

		color: #fff;

		stroke:#fff;

		z-index: 9;

		animation-name: fadeInDown;

		animation-duration: 1000ms;



	}









	.inverse > *:first-child{

		order: -1;

	}



	#cre8-plus {

	    width: 3500px;

	    margin-left: -1530px;

	    margin-top: -910px;

	}



	.nav #turn {

	    /*margin-left: 0px !important;

			max-height: 150px;*/

	}



	section *{

		max-width: 100%;

	}

	.scrollbar{

		transition: all 400ms ease;

		transform: translateX(500px);

		right: 15px;

		height: 300px;

    top: calc(40% - 100px);

	}

	.nav {

		bottom: 25px;

	}

	.nav ul{

		padding-left: 10px;

	}

	.nav ul li{

		padding-right: 20px;

	}

	.nav #turn{

/*		padding-left: 10px;*/

		margin-left: -30px;

	}



	.horizontal {

		padding-bottom: 30px;

		flex-direction: column;

}



	.notation svg {

    max-height: 70px;

}

	.nav #turn {

    margin-left: -50px;

}

	.arrowPair svg {

    width: 30px;

}

	.arrowPair {

    top: 5px;

    left: 5px;

}



	.clientListView {

    overflow-y: auto;

    width: 100%;
    padding: 0 15%;

}

	.clientListView ul li a {

    font-size: 12px;

    letter-spacing: 1px;

}

	.clientListView .flex.worksMenu {

		flex-direction: column;



	}

	.clientListView .flex.worksMenu ul {

		padding-top: 0;

		width: 100%;

	}

/*	Works -------------*/



	.logoBg.mode-fixedTopRight img{

		max-width: 70%;

		float: right;

	}



	.logoBg.mode-square img{

    transform: translateX(70%) translateY(-50%);

	}



	.logoBg.mode-ver img{

    transform: translateX(65%) translateY(-30%);

	}



	.logoBg.mode-hori img{

    transform: translateX(65%) translateY(-30%);

	}

	.logoWorks {

		top: 100px;

		left: 33%;

		max-width: 60%;

	}

	.logoWorks img{

		max-width: 100%;

	}

	#worksSection {

    margin-top: 280px;

	}



}




@media (max-width:768px) {
	.arrowPair {
		margin-top: 15px;
		margin-left: 15px;
	}
}