@font-face {
	font-family: 'fontello';
	src: url('../fonts/simvols/fontello.eot?85134601');
	src: url('../fonts/simvols/fontello.eot?85134601#iefix') format('embedded-opentype'),
			 url('../fonts/simvols/fontello.woff?85134601') format('woff'),
			 url('../fonts/simvols/fontello.ttf?85134601') format('truetype'),
			 url('../fonts/simvols/fontello.svg?85134601#fontello') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'proxima';
	src: url("../fonts/Proxima Nova OpenType/ProximaNova-Light.otf");
	font-weight: 300;
}

@font-face {
	font-family: 'proxima';
	src: url("../fonts/Proxima Nova OpenType/ProximaNova-Reg.otf");
	font-weight: 500;
}

@font-face {
	font-family: 'proxima';
	src: url("../fonts/Proxima Nova OpenType/ProximaNova-Bold.otf");
	font-weight: 700;
}

@font-face {
	font-family: 'proxima';
	src: url("../fonts/Proxima Nova OpenType/ProximaNova-Xbold.otf");
	font-weight: 800;
}

@font-face {
	font-family: 'proxima';
	src: url("../fonts/Proxima Nova OpenType/ProximaNova-Black.otf");
	font-weight: 900;
}

body,
html {
	height: 100%;
	min-height: 100%;
	font-size: 100%;
	overflow: hidden;
}

body {
	background-color: rgba(26,28,32,1);
}

#container {
	height: 100%;
	min-height: 100%;
	position: relative;
	font-family: "proxima", sans-serif;
}

#moveable {
	transition-property: top, right, bottom, left;
	transition-duration: 1.5s;
	transition-timing-function: cubic-bezier(0.770, -0.450, 0.220, 1.215);
	
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#moveable > section {
	position: absolute;
	width: 100%;
	height: 100%;
}

/* triangle */
	.triangle {
		left: 0;
		top: 0;
		position: absolute;
		width: 100%;
		height: 86.6%;
		overflow: hidden;	
		transform: translate(-25%) skew(30deg);
	}

	.triangle > div {
		position: absolute;
		left: 50%;
		width: 100%;
		height: 100%;
		overflow: hidden;
		transform: skew(-49deg);
	}

/* logo */
	#logo {
		position: fixed;
		top: 2em;
		right: 3em;
		width: 2em;
		height: 1.7em;
		z-index: 1000000;
	}

	#logo > a {
		position: absolute;
		top: 0;
		border: 0 solid transparent;
		border-width: 0em 1em 1.7em 1em;
		border-bottom-color: rgba(10,204,107,1);
		box-shadow: 0 1px  rgba(0,194,97,1);
	}

	#logo > a:before {
		content: '';
		position: absolute;
		border: 0 solid transparent;
		border-width: 0em 1em 1.7em 0em;
		border-bottom-color: rgba(31,238,149,1);
	}

/* links */
	a {
		outline: none;
	}

	#container > a {
		color: rgba(255,255,255,1);
		font-size: 1.7em;
		position: fixed;
		font-weight: 700;
		padding: .7em;
		transform: translateX(-50%) rotate(-30deg);
		z-index: 10000;
	}

	#container > a.contacts {
		bottom: 2%;
		left: 50%;
	}

	#container > a.aboutus {
		left: 50%;
		top: 2%;
	}

	#container > a.portfolio {
		top: 50%;
		right: -.5em;
		transform: translateY(-50%) rotate(60deg);
	}

	#container > a.whatwedo {
		top: 50%;
		left: -1em;
		transform: translateY(-50%) rotate(60deg);
	}

	#container > a > span {
		position: absolute;
		width: 100%;
		height: 1000px;
		left: 0;
		z-index: -1;

		transition: cubic-bezier(0.410, 0.695, 0.000, 1.375);
		transition-duration: .5s;
		transition-property: top, bottom, right;
	}

	#container > a.portfolio > span,
	#container > a.aboutus > span {
		bottom: 500px;
	}

	#container > a.contacts > span {
		top: 500px;
	}

	#container > a.whatwedo > span {
		height: 100%;
		width: 1000px;
		left: auto;
		right: 500px;
		top: 0;
	}

/* hover and active link */
	#container > a.portfolio:hover > span,
	#container > a.aboutus:hover > span,
	#container > a.active.portfolio > span,
	#container > a.active.aboutus > span {
		bottom: 0;
	}

	#container > a.contacts:hover > span,
	#container > a.active.contacts > span {
		top: 0;
	}

	#container > a.whatwedo:hover > span,
	#container > a.active.whatwedo > span {
		right: 0;
	}

/* styles lines */
	hr {
		position: absolute;
		border: none;
		margin: 0;
	}

	.circle {
		position: absolute;
		border-radius: 50%;
	}

	hr.long {
		height: 180%;
	}

	hr.big {
		height: 50%;
	}

	hr.short {
		height: 20%;
	}
	
	hr.narrow {
		width: .2em;
	}

	hr.thin {
		width: .7em;
	}

	hr.medium {
		width: 1.5em;
	}
	
	hr.wide {
		width: 3em;
	}

/* colors */
	.red {
		background-color: rgba(255,81,81,1);
	}

	.blue {
	background-color: rgba(0,51,255,1);
	}

	.lightBlue {
	background-color: rgba(41,137,204,1);
	}

	.yellow {
		background-color: rgba(232,183,0,1);
	}

	.green {
		background-color: rgba(41,224,43,1);
	}

	.white {
		background-color: rgba(255,255,255,1);
	}

/* HOME */
	#home {
		left: 0;
		top: 0
	}

	/* showreel */
		/* container */
			#showreel {
				width: 26em;
				height: 26em;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			#showreel .triangle img {
				position: absolute;
				height: 120%;
				width: 120%;
				top: 45%;
				left: 25%;
				transform: translate(-50%, -50%) skew(30deg);
			}

			/* triagle shadow */
			#showreel .triangle:nth-of-type(2) {
				top: 1em;
				left: 1.8em;
				border-right: .2em solid rgba(0,51,255,1);
				z-index: -1;
			}

			#showreel .triangle:nth-of-type(2) > div {
				border: .2em solid rgba(0,51,255,1);
			}

		/* circle */
			#showreel > span {
				position: absolute;
				top: 40%;
				left: 15%;
				width: 1.5em;
				height: 1.5em;
				border-radius: 50%;
				border: .05em solid rgba(0,51,255,1);
				font-size: 3.4em;
				color: rgba(0,51,255,1);
				cursor: pointer;
				font-weight: 300;
				transition: border-color .3s ease;
			}

		/* text */
			#showreel > span:before,
			#showreel > span:after {
				content: "sh";
				position: absolute;
				right: 100%;
				top: 0;
				padding: .1em;
			}

			#showreel > span:after {
				content: "wreel";
				right: auto;
				left: 100%;
			}

		/* triagle */
			#showreel > span > em {
				position: absolute;
				top: 50%;
				left: 50%;
				border-style: solid;
				border-width: .3em .5em;
				border-color: transparent;
				border-left-color: rgba(0,51,255,1);

				transition: border-color .3s ease;
				transform: translate(-20%, -50%);
			}

			#showreel > span:hover {
				border-color: rgba(232,283,0,1);
			}

			#showreel > span:hover em {
				border-left-color: rgba(255,81,81,1);
			}

	/* counterclockwise block */
		.clockwise,
		.counterclockwise {
			position: absolute;
			width: 50em;
			height: 50em;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) rotate(-30deg);

			1border: 1px solid red;
		}
		/* static lines */
			#home .counterclockwise > hr.line_1 {
				top: 30%;
				left: 38.2%;
			}

			#home .counterclockwise > hr.line_2 {
				bottom: 65%;
				left: 35%;
			}

			#home .counterclockwise > hr.line_3 {
				left: 26%;
				bottom: 77%;
			}

			#home .counterclockwise > hr.line_4 {
				left: 42%;
				top: 78%;
			}

			#home .counterclockwise > hr.line_5 {
				left: 25%;
				bottom: 13%;
			}

			#home .counterclockwise > hr.line_6 {
				left: 50%;
				bottom: -8%;
			}

	/* clockwise block */
		.clockwise {
			transform: translate(-50%, -50%) rotate(60deg);
		}
		/* static lines */
			#home .clockwise > hr.line_1 {
				top: 84%;
				left: 58.5%;
			}

			#home .clockwise > hr.line_2 {
				top: 104%;
				left: 61%;
			}

			#home .clockwise > hr.line_3 {
				top: 116%;
				left: 49%;
			}

			#home .clockwise > hr.line_4 {
				top: 90%;
				left: 55%;
			}

			#home .clockwise > hr.line_5 {
				top: 94%;
				left: 10%;
			}

			#home .clockwise > hr.line_6 {
				bottom: 65%;
				left: 58.5%;
			}

			#home .clockwise > hr.line_7 {
				bottom: 89%;
				left: 50%;
			}

			#home .clockwise > hr.line_8 {
				bottom: 109%;
				left: 64%;
			}

			#home .clockwise > hr.line_9 {
				bottom: 71%;
				left: 52.5%;
			}

			#home .clockwise > hr.line_10 {
				bottom: 21%;
				left: 143%;
			}

	/* RU */
		#RU {
				position: absolute;
				color: rgba(0,51,255,1);
				font-size: 2em;
				font-weight: 700;
				text-decoration: underline;
				left: -10%;
				bottom: 0;
			}

/* ABOUT US */
	#about {
		bottom: 140%;
		left: 0;
	}

	#bigText {
		position: absolute;
		left: 40%;
		top: 40%;
		transform: translate(-50%, -50%);
		
	}

	#bigText:after,
	#bigText:before {
		content: '\e800';
		position: absolute;
		color: rgba(0,51,255,1);;
		font-size: 2.6em;
		font-family: 'fontello';
		bottom: 17%;
		right: 0;
	}

	#bigText:before {
		bottom: auto;
		right: auto;
		left: -5%;
		top: 1%;
		transform: rotate(180deg);
	}

	/* paragraph */
		#bigText > p:first-of-type {
			line-height: 1.2em;
			font-size: .8em;
			width: 25%;
			padding: 1.5em 0 1em 2.5em;
			color: rgba(255,81,81,1);
			text-shadow: 0 0 1px rgba(255,81,81,1);
		}

		#bigText > p:last-of-type {
			position: absolute;
			bottom: 2em;
			right: 4em;
			line-height: 1.3em;
			font-size: .95em;
			width: 55%;
			color: rgba(255,255,255,.2);
			text-shadow: 0 0 2px rgba(255,255,255,.2);
			transform: translateY(100%);
		}

	/* big text */
		#bigText > div {
			font-size: 6em;
			text-transform: uppercase;
		}

		#bigText div > span {
			font-weight: 900;
			position: relative;
			float: left;
			margin-right: .6em;
			margin-bottom: .6em;
			height: 1em;
			width: 1em;
			text-align: center;
		}

		#bigText > div > span.reverse {
			direction: rtl;
		}

		#bigText span > em {
			position: relative;
			display: inline-block;
			left: 0;
			top: 0;
		}

		#bigText span > em > b {
			position: absolute;
			overflow: hidden;
		}
		/* all */
			#bigText > .all {
				float: left;
				color: rgba(23,237,144,1);
			}

			#bigText > .all b {
				color: rgba(0,188,91,1);
			}

		/* is */
			#bigText > .is {
				color: rgba(255,212,44,1);
				float: left;
			}

			#bigText > .is b {
				color: rgba(222,173,0,1);
			}

		/* full */
			#bigText > .full {
				color: rgba(66,177,254,1);
				float: left;
				clear: left;
			}

			#bigText > .full b {
				color: rgba(31,127,194,1);
			}

		/* of */
			#bigText > .of {
				color: rgba(255,110,165,1);
				float: left;
				clear: left;
			}

			#bigText > .of b {
				color: rgba(221,82,131,1);
			}

		/* love */
		#bigText > .love {
			color: rgba(255,81,81,1);
			float: left;
		}

		#bigText > .love b {
			color: rgba(221,53,53,1);
		}


	/* triangles People and Projects */
		#about .people {
			top: 14%;
			left: -.5%;
			width: 14em;
			height: 14em;
			position: absolute;
		}

		#about .people > p,
		#about .projects > p {
			position: absolute;
			top: 55%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			font-size: 1.3em;
			font-weight: 700;
			color: rgba(255,255,255,.2);
		}

		#about .people > p > span,
		#about .projects > p > span {
			display: block;
			color: rgba(255,81,81,1);
			font-size: 3.5em;
		}

		#about .projects {
			bottom: 5%;
			right: -1%;
			width: 14em;
			height: 14em;
			position: absolute;
		}
		
		#about .projects > p {
			top: 30%;
		}

		#about .projects > p > span {
			color: rgba(232,183,0,1);
		}

		#about .projects > .triangle {
			transform: translate(-25%)  scaleY(-1) skew(30deg);
		}

		#about .triangle {
			border-right: .15em solid rgba(255,255,255,.1);
		}

		#about .triangle > div {
			border: .15em solid rgba(255,255,255,.1);
		}

	/* static lines and rounds */
		#about .clockwise > hr.line_1 {
			top: 15%;
			left: 56%;
		}

		#about .clockwise > hr.line_2 {
			bottom: 93%;
			left: 60%;
		}

		#about .clockwise > div.circle.c1 {
			width: 15em;
			height: 15em;
			top: -30%;
			left: 40%;
		}

		#about .clockwise > hr.line_3 {
			left: 62.5%;
			top: -16%;
		}

		#about .clockwise > hr.line_4 {
			top: 52%;
			left: 87%;
		}

		#about .clockwise > hr.line_5 {
			top: 77%;
			left: 83%;
		}

		#about .clockwise > div.circle.c2 {
			width: 7em;
			height: 7em;
			top: 136%;
			left: 36%;
		}

		#about .clockwise > hr.line_6 {
			top: 135%;
			left: 43%;
		}

		#about .clockwise > hr.line_7 {
			top: 131%;
			left: 41%;
			height: 5em;
			width: .4em;
		}

		#about .clockwise > hr.line_8 {
			top: 93%;
			left: 48%;
			height: 1.4em;
			width: 50%;
		}

/* CONTACTS */
#contact {
	left: 0;
	top: 140%;
	font-weight: 700;
}

	/* counterclockwise */
		#contact div.street {
			position: absolute;
			padding: 2.2em 0;
			text-align: center;
			color: rgba(0,51,255,1);
			font-size: 1.1em;
		}

		#contact .counterclockwise > div span {
			background-color: transparent;
			position: absolute;
			bottom: -68%;
			left: 36%;
			line-height: 1.2em;
			padding: .5em 3em;
			background-image: url('../img/subway.png');
			background-repeat: no-repeat;
			background-position: 100% center;
			background-size: 2.3em;
		}

		#contact .counterclockwise > div:nth-of-type(2) span {
			background-position: 0 center;
			bottom: 105%;
			left: 12%;
		}

		#contact .counterclockwise > div.street.part1 {
			top: 20%;
			width: 100%;
			left: -40%;
		}

		#contact .counterclockwise > div.street.part2 {
			top: 20%;
			width: 50%;
			left: 60%;
		}

		#contact .counterclockwise > div.street.part3 {
			color: rgba(41,137,204,1);
			width: 35%;
			top: 6%;
			left: 40%;
			transform: rotate(90deg);
		}

		#contact .counterclockwise > div.street.part4 {
			color: rgba(41,137,204,1);
			width: 95%;
			top: 42%;
			right: 33.2%;
			transform: rotate(-30deg);
		}
			#contact .counterclockwise > div.street.part4 .building {
				position: absolute;
				left: 8em;
				top: -7em;
				width: 2.4em;
				height: 1.2em;
			}

			#contact .counterclockwise > div.street.part4 > .building > img {
				position: absolute;
				transform: rotate(60deg);
				top: -3em;
				left: -7em;
				width: 13em;
			}

			#contact .counterclockwise > div.street.part4 > .building > hr {
				right: 0;
				bottom: 100%;
				width: .2em;
				height: 25em;
				transform-origin: 0 100%;
				transform: rotate(30deg);
				
			}

		#contact .counterclockwise > div.street.part5 {
			color: rgba(232,183,0,1);
			padding: 1.3em 0;
			width: 70%;
			top: 60.5%;
			left: 32.5%;
			transform: rotate(90deg);
		}

		#contact .counterclockwise > div.street.part6 {
			color:  rgba(255,81,81,1);
			padding: .6em 0;
			width: 28%;
			top: 38%;
			left: 40%;
		}

		#contact .counterclockwise > hr.line_1 {
			left: 67%;
			top: 50%;
		}

		#contact .counterclockwise > hr.line_2 {
			left: 57%;
			top: -38%;
		}
		/* circle */
			#contact > div.c1 {
				width: 17em;
				height: 17em;
				top: 30%;
				right: 12%;
			}

			/* fb link */
			#contact > div.c1 > a {
				position: absolute;
				color: rgba(255,255,255,1);
				font-family: 'fontello';
				z-index: 100;
				padding: .2em;
				transition: color .5s ease;
			}

			#contact > div.c1 > a.facebook {
				font-size: 6em;
				left: 20%;
				top: 20%;
			}

			#contact > div.c1 > a.facebook:hover {
				color: rgba(255,81,81,1);
			}
			
			#contact > div.c1 > a.facebook:before {
				content: '\e802';
			}
			
			#contact > div.c1 > a.twitter {
				font-size: 2.7em;
				right: 22%;
				top: -16%;
			}

			#contact > div.c1 > a.twitter:hover {
				color: rgba(232,183,0,1);
			}

			#contact > div.c1 > a.twitter:before {
				content: '\e803'
			}

			#contact > div.c1 > .triangle {
				top: -17%;
				left: 0%;
				border-right: .5em solid rgba(41,224,43,1);
				transform: translate(-25%) scale(.55) skew(30deg);
			}

			#contact > div.c1 > .triangle > div {
				border: .5em solid rgba(41,224,43,1);
			}

			#contact > div.c1 > .triangle:nth-of-type(2) {
				top: -32%;
				left: 48%;
				transform: translate(-25%) scale(-.4) skew(30deg);
			}

	/* clockwise */
		#contact .clockwise > hr.line_1 {
			left: 26%;
			bottom: 50%;
			height: 300%;
		}

		#contact .clockwise > hr.line_2 {
			left: 26%;
			top: 50%;
		}

	/* border triangle */
	#contact .borderTriangle {
		position: absolute;
		top: 30%;
		right: 10%;
		width: 43em;
		height: 43em;
	}

	#contact .borderTriangle > .triangle {
		border-right: .15em solid rgba(255,255,255,.05);
	}

	#contact .borderTriangle > .triangle > div {
		border: .15em solid rgba(255,255,255,.05);
	}

	/* adres */
	#contact p {
		position: absolute;
		top: 18%;
		left: 13%;
		color: rgba(0,51,255,1);
		font-size: 1.3em;
		padding-left: 1em;
		line-height: 1.3em;
	}

	#contact p > a {
		color: rgba(255,255,255,1);
		margin-left: -.5em;
	}

/* WHAT WE DO */
	#wedo {
		left: -140%;
		top: 0;
		font-weight: 700;
	}

	#wedo .clockwise > div.c1 {
		width: 9em;
		height: 9em;
		top: 110%;
		left: 0;

	}

	#wedo .clockwise > div.c2 {
		width: 18em;
		height: 18em;
		top: 0;
		left: 87%;
	}

	#wedo .clockwise > hr.line_1 {
		top: 100%;
		left: 9%;
	}

	#wedo .clockwise > hr.line_2 {
		left: 103%;
		top: 20%;
		height: 40%;
		width: 1em;
	}

	#wedo .clockwise > hr.line_3 {
		left: 108%;
		top: -25%;
		width: .3em;
		height: 80%;
	}

	#wedo .clockwise > hr.line_top,
	#wedo .clockwise > hr.line_bottom {
		transition-property: left, top, background-color, width, height;
		transition-duration: .3s;
		transition-delay: .2s;
	}
	#wedo .clockwise > hr.line_top {
		left: 6%;
		top: 96%;
		transition-timing-function: ease-in;
		
	}

	#wedo .clockwise > hr.line_bottom {
		left: 14%;
		top: 111%;
		transition-timing-function: ease-out;
	}

	/* background text */
		#wedo .counterclockwise > ul > div {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: rgba(0,51,255,1);
			font-size: 30em;
			transition: color .5s;
			z-index: -100;
		}

		#wedo .counterclockwise > ul > li:hover ~ div {
			color: rgba(255,255,255,.1);
		}

	/* LIST */
		#wedo .counterclockwise > ul > li {
			margin: .27em 0;
			font-size: 5em;
			cursor: default;
			position: relative;
			transition: padding cubic-bezier(1.000, -0.600, 0.640, 0.800) .5s;
		}

		#wedo .counterclockwise > ul > li > p {
			position: relative;
			display: inline-block;
			font-size: inherit;
			color: rgba(41,224,43,1);
			transition: color .5s;
			1pointer-events: none;
			z-index: -1;
			pointer-events: none;
		}

		#wedo .counterclockwise > ul > li:hover > p {
			pointer-events: auto;
			color: rgba(255,255,255,1);
		}
		
		#wedo .counterclockwise > ul > li > p > span {
			position: absolute;
			width: auto;
			white-space: nowrap;
			top: 50%;
			margin: 0 2.5em;
			transform: translateY(50%);
			color: rgba(255,255,255,1);
			font-size: .33em;
			opacity: 0;
			transition: opacity .2s, transform .3s;
		}

		#wedo .counterclockwise > ul > li:hover > p > span {
			opacity: 1;
			transition-delay: .4s;
			transform: translateY(-50%)
		}

		/* strategy */
			#wedo .counterclockwise > ul > li.strategy {
				padding-left: 2em;
			}

			#wedo .counterclockwise > ul > li.strategy:hover {
				padding-left: 1em;
			}

			#wedo .counterclockwise > ul > li.strategy > p > span {
				left: 100%;
			}

			#wedo .clockwise.strategy > hr.line_top {
				background-color: rgba(255,81,81,1);
				width: .2em;
				height: 28%;
				top: 10%;
			}

			#wedo .clockwise.strategy > hr.line_bottom {
				background-color: rgba(232,183,0,1);
				width: .2em;
				height: 100%;
				top: 0;
			}

		/* creative */
			#wedo .counterclockwise > ul > li.creative {
				padding-left: 3.7em;
			}

			#wedo .counterclockwise > ul > li.creative:hover {
				padding-left: 6.5em;
			}

			#wedo .counterclockwise > ul > li.creative > p > span {
				right: 100%;
			}

			#wedo .clockwise.creative > hr.line_top {
				background-color: rgba(232,183,0,1);
				width: .2em;
				height: 43%;
				top: 39%;
			}

			#wedo .clockwise.creative > hr.line_bottom {
				background-color: rgba(0,51,255,1);
				width: .2em;
				height: 110%;
				top: -15%;
			}

		/* mobile */
			#wedo .counterclockwise > ul > li.mobile {
				padding-left: 1.3em;
			}

			#wedo .counterclockwise > ul > li.mobile:hover {
				padding-left: .5em;
			}

			#wedo .counterclockwise > ul > li.mobile > p > span {
				left: 100%;
			}

			#wedo .clockwise.mobile > hr.line_top {
				background-color: rgba(41,224,43,1);
				width: .2em;
				height: 39%;
				top: 10%;
			}

			#wedo .clockwise.mobile > hr.line_bottom {
				background-color: rgba(255,81,81,1);
				width: .2em;
				height: 95%;
				top: -5%;
			}

		/* production */
			#wedo .counterclockwise > ul > li.production {
				padding-left: 4.3em;
			}

			#wedo .counterclockwise > ul > li.production:hover {
				padding-left: 6.23em;
			}

			#wedo .counterclockwise > ul > li.production > p > span {
				right: 100%;
			}

			#wedo .clockwise.production > hr.line_top {
				background-color: rgba(255,81,81,1);
				width: .2em;
				height: 36%;
				top: 35%;
			}

			#wedo .clockwise.production > hr.line_bottom {
				background-color: rgba(0,51,255,1);
				width: .2em;
				height: 104%;
				top: -19%;
			}

		/* integration */
			#wedo .counterclockwise > ul > li.integration {
				padding-left: .8em;
			}

			#wedo .counterclockwise > ul > li.integration:hover {
				padding-left: 6.23em;
			}

			#wedo .counterclockwise > ul > li.integration > p > span {
				right: 100%;
			}

			#wedo .clockwise.integration > hr.line_top {
				background-color: rgba(255,81,81,1);
				width: .2em;
				height: 106%;
				top: -12%;
			}

			#wedo .clockwise.integration > hr.line_bottom {
				background-color: rgba(0,51,255,1);
				width: .2em;
				height: 85%;
				top: 40%;
			}

		/* smm */
			#wedo .counterclockwise > ul > li.smm {
				padding-left: 2em;
			}

			#wedo .counterclockwise > ul > li.smm:hover {
				padding-left: 7.5em;
			}

			#wedo .counterclockwise > ul > li.smm > p > span {
				right: 100%;
			}

			#wedo .clockwise.smm > hr.line_top {
				background-color: rgba(0,51,255,1);
				width: .2em;
				height: 38%;
				top: -12%;
			}

			#wedo .clockwise.smm > hr.line_bottom {
				background-color: rgba(232,183,0,1);
				width: .2em;
				height: 85%;
				top: -4%;
			}

		/* seo */
			#wedo .counterclockwise > ul > li.seo {
				padding-left: 4.5em;
			}

			#wedo .counterclockwise > ul > li.seo:hover {
				padding-left: 2em;
			}

			#wedo .counterclockwise > ul > li.seo > p > span {
				left: 100%;
			}

			#wedo .clockwise.seo > hr.line_top {
				background-color: rgba(0,51,255,1);
				width: .2em;
				height: 67%;
				top: 10%;
			}

			#wedo .clockwise.seo > hr.line_bottom {
				background-color: rgba(255,81,81,1);
				width: .2em;
				height: 28%;
				top: 45%;
			}

	/* triagles */
		#wedo .triangle {
				border-right: .15em solid rgba(255,255,255,.05);
				width: 6em;
				height: 5.196em;
				top: 12%;
				left: 7%;
			}

			#wedo .triangle > div {
				border: .15em solid rgba(255,255,255,.05);
			}

		#wedo .triangle:nth-of-type(1) {
			transform: translate(-25%)  scaleY(-1) skew(30deg);
		}

		#wedo .triangle:nth-of-type(2) {
			left: auto;
			right: 15%;
			top: 45%;
			transform: translate(-25%)  scale(1.4) skew(30deg);
		}

/* PORTFOLIO */
	#portf {
		left: 140%;
		top: 0;
	}

	/* list */
		#portf > .counterclockwise > .listcontainer {
			white-space: nowrap;
			position: absolute;
			left: -20%;
			top: 55%;
			transform: translateY(-50%);
			transition: margin-left .2s ease-out;
		}

		#portf > .counterclockwise > .listcontainer > ul {
			font-weight: 700;
			display: inline-block;
			vertical-align: top;
			position: relative;
			width: 37em;
		}

		#portf > .counterclockwise > .listcontainer > ul > li.year {
			position: absolute;
			color: rgba(0,51,255,1);
			font-size: 6.2em;
			z-index: -1;
			top: -.1em;
			left: 0;
			transition: color .4s;
			transform: translateX(-85%);
		}

		#portf > .counterclockwise > .listcontainer > ul > li > a {
			display: inline-block;
			color: rgba(232,183,0,1);
			font-size: 3.4em;
			padding: .2em;
			transition: color .5s;
		}

		#portf > .counterclockwise > .listcontainer > ul > li > a:hover {
			color: rgba(255,255,255,1);
		}
	
	/* lines */
		#portf > .clockwise > div.c1 {
			width: 23em;
			height: 23em;
			left: -38%;
			top: 80%;
			color: rgba(255,81,81,1);
		}

			#portf > .clockwise > div.c1 > p {
				font-weight: 700;
				position: absolute;
				text-align: center;
				top: 50%;
				left: 50%;
				font-size: 6.5em;
				transform: translate(-50%, -50%) rotate(-60deg);
			}

			#portf > .clockwise > div.c1 > p > span {
				display: block;
				font-size: .27em;
			}

		#portf > .clockwise > hr.line_1 {
			top: 36%;
			left: -5%;
			height: 100%;
		}
		
		#portf > .clockwise > hr.line_2 {
			left: -12%;
			top: 58%;
			height: 30%;
			width: 1em;
		}

		#portf > .clockwise > hr.line_3 {
			top: -115%;
			left: 135%;
		}

		#portf > .clockwise > hr.line_4 {
			height: 25%;
			width: 1em;
			left: 130%;
			top: -10%;
		}

		#portf > .clockwise > hr.line_5 {
			height: 13%;
			width: 2em;
			left: 140%;
			top: -2%;

		}

		#portf > .clockwise > hr.line_6 {
			top: -70%;
			left: 109%;
		}

		#portf > .counterclockwise hr.line_under {
			top: -27%;
			left: -3%;
			width: 30%;
			height: .2em;
			transition-property: top, left, background-color, width;
			transition-duration: .2s;
			transition-delay: .2s;
			transition-timing-function: ease-in;
			
		}

	/* triagles */
		#portf .triangle {
			border-right: .15em solid rgba(255,255,255,.05);
			width: 15em;
			height: 13em;
		}

		#portf .triangle > div {
			border: .15em solid rgba(255,255,255,.05);
		}

	#portf .triangle:nth-of-type(1) {
		transform: translate(-25%)  scale(-.7) skew(30deg);
		left: auto;
		top: 4%;
		right: 22%;
	}

	#portf .triangle:nth-of-type(2) {
		left: 13%;
		top: 75%;
		transform: translate(-25%)  scale(1.2) skew(30deg);
	}

	/* scrollbar */
		#portf .scrollbar {
			position: absolute;
			width: 70%;
			height: 4em;
			top: 105%;
			left: 46%;
		}

		#portf .scrollbar:before,
		#portf .scrollbar:after {
			position: absolute;
			left: -6%;
			bottom: -.2em;
			content: "";
			width: 16%;
			height: .4em;
			background-color: rgba(0,51,255,1);
		}

		#portf .scrollbar:after {
			left: auto;
			bottom: auto;
			right: -6%;
			top: -.2em;
		}

		#portf .scrollbar > span {
			position: absolute;
			height: 60%;
			top: 20%;
			width: 30%;
			background-color: rgba(232,183,0,1);
			transition: margin-left .2s ease-out;
			cursor: -webkit-grab;
			cursor: -moz-grab;
		}

		#portf .scrollbar > span:before {
			width: .4em;
			height: 100%;
			content: "";
			background-color: rgba(255,81,81,1);
			position: absolute;
			top: -30%;
			left: 50%;
			margin-left: -.2em;
			box-shadow:  1.2em 0 0 0 rgba(255,81,81,1),
									-1.2em 0 0 0 rgba(255,81,81,1);
		}