@charset "UTF-8";
/* CSS Document */

		body{
			margin: 0 40px;
		}
		a{
			text-decoration: none;
			
		}
		.linker{
			text-decoration:underline;
			color:darkblue;
		}
		h1{
			font-family: 'Playfair Display', serif;
			font-size: 94px;
			color: #000;
			font-weight: 100;
			line-height: 87px;
		}
		h2{
			font-family: 'Playfair Display', serif;
			font-size: 37px;
			letter-spacing: 2px;
			color: #000;
			font-weight: 100;
		}
		h3{
			color: #000;
			font-family: 'Playfair Display', serif;
			font-size: 29px;
			font-weight: 100;
		}
		h4{
			color: #fff;
			font-family: 'Montserrat', sans-serif;
			font-weight:700;
			font-size: 21px;
		}
		.header{
			display: flex;
			align-items: flex-start;
			align-content: space-between;
			justify-content: space-between;
			flex-direction: column;
			flex-wrap: wrap;
			height: 65px;
			width: 1360px;
    		margin: 0 auto 24px auto;
		}
		.page_box{
			width: 1360px;
    		margin: 0 auto 60px auto;
			display: flex;
			border: solid 1px #231f20;
			height:750px;
		}
		
		.dark_box{
			background: #231f20;
			width: 50%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.light_box{
			background:#fff;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			width: 50%;
		}
		.light_top{
			height: 85%;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
		}

		.light_bottom{
			height: 36%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-end;
			padding: 24px;
		}
		.note_contain{
			height:33%;
			width:100%;
			display: flex;
    		flex-direction: column;
    		justify-content: center;
		}
		.note_top{
			font-family: "Montserrat", sans-serif;
			font-size: 12px;
			color: #151515;
			border-left: solid 1px #151515;
			padding: 40px 0px 16px 24px;
			margin-left: 40px;
			
		}
		.logo_outter{
			width:152px;
			height:65px;
			font-family: 'Montserrat';
			font-size: 32px;
			display: flex;
			flex-direction: row;
		}
		.logo_black{
			background:#131313;
			color:#fff;
			display: flex;
			flex-direction: row;
			height:65px;
		}
		.logo_white{
			color:#131313;
			height:65px;
			display: flex;
			flex-direction: row;
		}
		.logo_black div, .logo_white div{
			align-self: flex-end;
			height: 31px;
		}

		.nb{
			border:none;
			border: none;
			padding: 0px;
			margin-left: 16px;
		}
		
		.circle_contain{
			margin-left: -52px;
		}
		.circle_contain_2{
			margin-left: -71px;
		}
		.circle_contain_3{
			margin-left: -40px;
		}
		.circle_contain_4 {
			margin-left: -24px;
		}
		.inner_c_contain{

		}
		.LI{
			margin-left: 55px;
    		margin-top: 16px;
		}
		.home_columns{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 1360px;
    		margin: 0 auto;
		}
		.col_1, .col_2, .col_3{
			display: flex;
    		flex-direction: column;
		}
		.mid_col{
			width:400px;
		}
		.black{
			color:#000;
		}
		.Exp_circle{
			background: #019DE0;
			border-radius: 100%;
			width:142px;
			height: 142px;
			display: flex;
    		align-items: center;
    		line-height: 0px;
			margin-top: 105px;
			cursor:pointer;
		}
		.fck{
			left: 85px;
			top: 10px;
			position: relative;
		}
		.me_sqr{
			/*margin-right: -79px;*/
			height: 250px;
			width: 160px;
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;
			align-self: flex-end;
			
		}
		.Me_circle{
			background: #000;
			border-radius: 100%;
			width:48px;
			height: 48px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			line-height: 0px;
			align-items: center;
			margin-right: 34px;
    		margin-top: -87px;
			cursor:pointer;
		}
		.circle_contain_4 .Me_circle{
			margin-top: 0px;
		}
		.margin_24{
			margin-top: -24px!important;
			margin-right: 0px;
		}
		.projects_circle{
			background: #E3007B;
			border-radius: 100%;
			width:103px;
			height: 103px;
			display: flex;
    		flex-direction: column;
    		justify-content: center;
			align-self: center;
			margin-top: 16px;
			cursor:pointer;
		}
		.projects_circle:hover{
			transform: rotateZ(30deg);
			transition: 15s ease; 
		}
		.ext_circle{
			background: #FEED00;
			border-radius: 100%;
			width:80px;
			height: 80px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			line-height: 0px;
			align-items: center;
			margin-right: -40px;
    		margin-bottom: 40px;
			margin-top: 63px;
			cursor:pointer;
			z-index: 3;
		}
		.pro_font{
			letter-spacing: 19px;
			margin-left: 8px;
		}
		.exp_font{
			letter-spacing: 7px;
    		margin-left: 55px;
		}
		.left_tunnel{
			width: 500px;
			height: 765px;
		}
		.left_image{
			background-image: url('img/Home_Spider.jpg');
			display: flex;
			flex-direction: column-reverse;
			width: 500px;
			height: 765px;
			background-repeat: no-repeat;
			align-items: flex-end;
			position: absolute;
		}
		.right_tunnel{
			width: 500px;
			height: 620px;
		}
		.right_image{
			/*background-image: url(img/home_bali.jpg);*/
			display: flex;
			flex-direction: column-reverse;
			width: 455px;
			height: 620px;
			background-repeat: no-repeat;
			align-items: flex-end;
			background-position-x: center;
			background-position-y: bottom;
		}
		#canvas {
		  position: absolute;
		  cursor: pointer;
		  width: 409px;
		  height:545px;
			
		}
		#texture {
			position: absolute;
			visibility: hidden;
		}
		.nudge_out_name{
			margin-right: -90px;
			margin-bottom: 54px;
		}
		.nav{
			display: flex;
			flex-direction: row;
			align-items: baseline;
			margin-top: 39px;
			
		}
		
		.tri{
			background-image: url("img/Tris.png");
			width: 45px;
			height: 25px;
			background-repeat: no-repeat;
			background-size: contain;
			margin-right: 13px;
			
		}
		.c, .m, .y, .k{
			width: 93px;
			height: 8px;
			margin-right: 13px;
			
		}
		.c:hover, .m:hover, .y:hover, .k:hover{
			cursor:pointer;
		}
		.c div, .m div, .y div, .k div{
		    top: 0px;
			position: relative;
			text-align: center;
			opacity:0;
			font-family: "Montserrat", sans-serif;
			text-transform: capitalize;
			color:#151515;
		}
		.c:hover div, .m:hover div, .y:hover div, .k:hover div{
			opacity:1;
			transition: 350ms;
			top: -20px;
			
		}
		
		.c{
			border-bottom:#019DE0 solid 8px;
		}
		.m{
			border-bottom: #E3007B solid 8px;
		}
		.y{ 
			border-bottom: #FEED00 solid 8px;
		}
		.k{
			border-bottom: #000000 solid 8px;
			margin-right: 5px;
		}
		
		
			
		
		#home{
			display: flex;
			flex-direction: row;
			justify-content: center;
			
		}
		.smol_btn_btm{
			display: flex;
			flex-direction: row;
			justify-content: center;

		}
		.smol_btn_btm article{
			
			display: flex;
			justify-content: flex-end;
		}

		.canvaz{
			height:400px;
			width:100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			cursor:pointer;
		}
		.canvaz canvas{
			position: absolute;
			z-index: -1;
			opacity: 0;
			transition: 350ms ease-in-out;
		}
		

		#CS{
			display: flex;
			flex-direction: row;
			justify-content: center;
			padding-right: 45px;
			transform-style: preserve-3d;
			transition: 150ms linear;
			position: relative;
			top:-100vh;
			display:none;
			
		}
		
		
		.white{
			color:#fff;
		}
		.main_white{
			background:#fff;
			border: solid 1px #000;
			width:982px;
			height:600px;
			margin: 130px 24px 24px 0px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
		.tri_marg{
			height: 90px;
			margin: 40px 0px 40px -24px;
		}
		.border_remove{
			border:none;
			margin: 0px 24px 24px 0px;
			height: auto;
		}
		.border_remove_cs_p{
			border:none;
			margin: 0px 24px 24px 0px;
			height: 400px;
		}
		
		.smol_right_align{
				justify-content: flex-end;
		}
		.col_1{
			width: 66%;
    		height: 100%;
		}
		/*.col_2{
			display:flex;
			flex-direction: column-reverse;
			align-items: flex-end;
			align-content: flex-end;
    		height: 100%;
    		width: 34%;
		}
		.col_2_oa{
			display: flex;
			flex-direction: column-reverse;
			align-items: center;
			justify-content: flex-start;
			height: 100%;
			width: 17%;
			margin-right: 8px;
		}*/
		.acc_group{
			display:flex;
			flex-direction: column;
			width:8px;
			margin: 0px 0px 0px 56px;
		}
		.acc_wrap{
			width:300px;
			cursor:pointer;
		}
		.accent{
			width: 8px;
			height: 72px;
			margin-bottom: 16px;
			transition:350ms ease-in-out;
			
			display: flex;
			align-items: flex-end;
			justify-content: flex-end;
		}
		.a_c{
			background: #019DE0;
		}
		.a_m{
			background: #E3007B;
		}
		.a_y{
			background: #FEED00;
			
		}
		.a_k{
			background: #000000;
		}
		.acc_txt{
			color:#fff;
			opacity:0;
			transition: 350ms linear;
			white-space: nowrap;
			font-size: 14px;

		}
		.y_t{
			color:#fff;
			transition: 150ms;
			transition-delay: 100ms;
		}
		.acc_group .acc_wrap:hover .a_c{
			width:300px;
		}
		.acc_group .acc_wrap:hover .a_m{
			width:300px;
		}
		.acc_group .acc_wrap:hover .a_y{
			width:300px;
		}
		.acc_group .acc_wrap:hover .a_k{
			width:300px;
		}
		.acc_group .acc_wrap:hover .acc_txt{
			opacity:1;
			
		}
		.acc_group .acc_wrap:hover .y_t{
			color:#000;
		}
	
		#BH{
			height: 0px;
			display: flex;
			flex-direction: row;
			justify-content: center;
		}
		#BHH{
			height: 0px;
			display: flex;
			flex-direction: row;
			justify-content: center;
			
		}
		.trbg{
			background:transparent;
		}
		#back_home{
			display:block;
			border:none;
		}
		
		#back_home p{
			font-family: "Montserrat", sans-serif;
			color:#0C1638;
			font-size: 13px;
			letter-spacing: 2px;
			position: relative;
			display: flex;
			align-items: center;
			transform: translateX(-30px);
			opacity:0;
			cursor: pointer;
			top: -124px;
    		left: 6px;
		}
		
		#BH:hover p{
			opacity:1;
			transition-delay: .4s;
			transition: .2s cubic-bezier(.4,.66,.42,1.54);
			transform: translateX(0px);
		}
		
		#BH:hover .tribox{
			transform: rotate(-90deg);
			transition: .6s cubic-bezier(.4,.66,.42,1.54);
		}
		
		.me{
			
			width: 145px;
			height: 145px;
			background-repeat: no-repeat;		
   			background-size: contain;
    		align-self: flex-end;
    		margin: 0px 24px 24px 24px;
			order: 2;
		}
		.ovr_me{
			width: 145px;
			margin: 24px;
			display: flex;
			flex-direction: row-reverse;
			order:3;
			margin: 24px 24px 16px 24px;
		}
		.port1{
			font-family: "Montserrat", sans-serif;
			font-size:11px;
			color:#000;
			width:8px;
			line-height: 25px;
		}
		.port2{
			font-family: "Montserrat", sans-serif;
			font-size:11px;
			color:#000;
			width: 145px;
			margin: 24px;
			letter-spacing: 10.5px;
			order:1;
			margin: -16px 24px 16px 24px;
		}
		.large_black_text_shadow{
			font-family: "Montserrat", sans-serif;
			font-size: 100px;
			color: #000;
			font-weight: 700;
			letter-spacing: 69px;
			margin:24px;
		}
		.rot_contain{
			width: 250px;
			height: 228px;
			padding: 24px 0px;
		}
		.rot_2{
			width: 250px;
			height: 228px;
			padding: 38px 0px;
			margin: 24px;
		}
		.rot_contain_me{
			width: 250px;
			height: 228px;
			padding: 24px 0px;
			margin:40px;
		}
		.col_2_oa{
			display: flex;
			flex-direction: column;
			width: 65px;
		}

		.port2cs{    
			font-family: "Montserrat", sans-serif;
			font-size: 11px;
			color: #fff;
			margin: 24px;
			letter-spacing: 16px;
			order: 1;
			text-align: left;
			line-height: 32px;
			transform: rotateZ(-90deg);
		}
		.w_720{
			width:720px;
    		margin: 0px 24px 24px 0px;
		}
		.arrow{
			background-image:url("img/Arrow.png");
			width: 36px;
			height: 36px;
			background-repeat: no-repeat;		
   			background-size: contain;
		}
		.smol_btn_flex{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}
		.ext_wrapper{
			display: flex;
			flex-direction: row-reverse;
			align-items: center;
			height: 80px;
		}
		.a_right{
			position: relative;
			left: -38px;
    		top: -334px;
		}
		.smol_a_right{
			position: relative;
			left: -50px;
			top: -62px;
		}
		.a_left{
			transform: rotate(180deg);
			position: relative;
    		left: 8px;
		}
		.a_bottom{    
			transform: rotate(-90deg);
			top: -13px;
			left: -5px;
			position: relative;
		}
		.a_down{
			transform: rotate(90deg);
			top: -42px;
			left: -381px;
			position: relative;
		}
		.a_right_text{
			margin-left: 5px;
			position: relative;
			top:-8px;
		}
		.a_right_top{
			margin-left: 5px;
			position: relative;
			transform: rotate(-90deg);
			top: -20px;
			white-space: nowrap;
		}
		.cs_a_left_text{
			left: -7px;
			top: -12px;
			transform: rotate(180deg);
		}
		.ext_bottom_text{
			left: -3px;
			top: 34px;
			transform: rotate(90deg);
		}
		.smol_bottom_text{
			left: -112px;
			top: 7px;
			transform: rotate(0deg);
		}
		.smol_bottom_text_cs{
			left: -166px;
			top: 7px;
			transform: rotate(0deg);
		}
		.cmyk_links{
			display: flex;
			flex-direction: column;
			margin-top: 130px;
		}
		.button_brdr_white{

		}
		.right_sizer{
			width:375px;
		}
		.CS_wrapper{
			display: flex;
			flex-direction: row;
		}
		#OA_Exp, #OA_Exp2{
			border: solid 1px #000000;
			background: #019DE0;
			width:375px;
			height: 144px;
			margin-bottom: 24px;
			display: flex;
			flex-direction: column-reverse;
			cursor:pointer;
		}
		#CS_Dt, #CS_Dt2{
			border: solid 1px #000000;
			width:375px;
			height: 430px;
			margin-bottom: 24px;
			/*display: flex;
			flex-direction: column-reverse;*/
			cursor:pointer;
			overflow: hidden;
		}
		#CS_Dt:hover #CS_target{
			  animation-name: glitch;
			  animation-duration: .5s;
			  animation-timing-function: linear;
			  animation-delay: 0s;
			  animation-iteration-count: infinite;
			  animation-direction: alternate;
		}
		#CS_Dt:hover .glitcher_magenta{
			  animation-name: glitch_mag;
			  animation-duration: 1s;
			  animation-timing-function: linear;
			  animation-delay: 1.5s;
			  animation-iteration-count: infinite;
			  animation-direction: alternate;
		}
		#CS_Dt:hover .glitcher_black{
			  animation-name: glitch_b;
			  animation-duration: 2s;
			  animation-timing-function: linear;
			  animation-delay: 3.5s;
			  animation-iteration-count: infinite;
			  animation-direction: alternate;
		}
		#CS_Dt:hover .image_glitch_mag{
			  animation-name: glitch_img;
			  animation-duration: 1s;
			  animation-timing-function: linear;
			  animation-delay: 2s;
			  animation-iteration-count: infinite;
			  animation-direction: alternate;
		}
		#CS_target, #CS_target2{
			width:375px;
			height: 430px;
			background: #E3007B;
			display: flex;
			flex-direction: column-reverse;
			cursor:pointer;
			position: relative;
    		top: -430px;
		}
			.CS_target{
				width:375px;
				height: 430px;
				background: #E3007B;
				display: flex;
				flex-direction: column-reverse;
				cursor:pointer;
			}
			.OA_target{
				width:375px;
				height: 430px;
				background: #019DE0;
				display: flex;
				flex-direction: column-reverse;
				cursor:pointer;
			}
			.image_glitch_mag{
				position: relative;
				opacity: 0;
    			top: -860px;
				width:375px;
				height: 430px;
				background-image: url("img/glitch_magenta.jpg");
				
			}
			.glitcher_magenta{
				opacity:0;
				width:28px;
				height: 430px;
				background:#019DE0;
				position: relative;
    			top: -1290px;
			}
			.glitcher_black{
				opacity:0;
				width:8px;
				height: 830px;
				background:#00FF45;
				position: relative;
    			top: -1720px;
				left: 150px;
			}
		
		#SOE_Ext, #SOE_Ext2{
			border: solid 1px #000000;
			background: #FEED00;
			width:375px;
			height: 80px;
			margin-bottom: 24px;
			display: flex;
			flex-direction: column-reverse;
			cursor:pointer;
		}
		#CS_Ext{
			border: solid 1px #000000;
			background: #E3007B;
			width:375px;
			height: 80px;
			margin-bottom: 24px;
			display: flex;
			flex-direction: column-reverse;
			cursor:pointer;
		}
.f_col{
		flex-direction: column;
	}
		.smol{
			width:80px!important;
			margin-bottom:0px!important;
		}
		.e_marg{
			margin:8px 8px 16px 8px;
		}
		.captions{
			display: flex;
		}
		.T_itles{
			width:220px;
		}
		.b{
			font-weight: bold;
		}
		.exp{
			bottom: -42px;
    		position: relative;
		}
		.description{
			font-size:11px;
			font-family: "montserrat", sans-serif;
			font-weight: 300;
		}

		.no_marg{margin:0;}
		.company_box{
			height:400px;
			width: 375px;
			border-left:solid #000 1px;
			border-right:solid #000 1px;
			border-top:solid rgba(0,0,0,1) 1px;
			border-bottom:solid rgba(0,0,0,1) 1px;
			background: rgba(255,255,255,0);
			color:#000;
			transition: 350ms ease-in-out;
			display: flex;
			flex-direction: row;
			align-items: flex-end;
			font-family: "montserrat", sans-serif;
			font-size: 32px;
			font-weight: 700;
		}
		.nowhite{
			background: none;
		}
		.me_container_item{
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
		}
		.me_left_pic{
			width:500px;
			display: flex;
			align-items: flex-end;
			flex-direction: column;
		}
		.me_right_text{
			width:500px;
			padding: 125px 0px;
			text-align: left;
			margin-left: 24px;
		}
		.side_text {
			
			font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
			font-size: 13px;
			line-height: 1.71429;
			font-weight: 300;
			color: #111111;
			background-color: #ffffff;
			letter-spacing: .05em;
			-webkit-text-size-adjust: none;
			-webkit-font-smoothing: subpixel-antialiased;
		}
		.me_right_pic{
			width:500px;
			display: flex;
			align-items: flex-start;
			flex-direction: column;
		}
		.me_left_text{
			width:500px;
			padding: 125px 0px;
			text-align: right;
			margin-right: 24px;
		}
		.me_center_text{
			width:100%;
			padding: 125px 0px;
			text-align: center;
			margin-right: 24px;
		}
		.center_flex{
			justify-content: center;
		}
		
/* hovers */
		#Keap:hover canvas, #Boeing:hover canvas, #Cdk:hover canvas{
			opacity: 1;
		}
		.canvaz:hover .company_box{
			color: #fff;
			background: rgba(0,0,0,0);
			border-left:solid #fff 1px;
			border-right:solid #fff 1px;
			border-top:solid rgba(0,0,0,0) 1px;
			border-bottom:solid rgba(0,0,0,0) 1px;
		}
		mark {
			color: #ffffff;
			background: #E3007B;
			padding: 5px 0px;
		}

		@media only screen and (max-width:1420px){
			.home_columns{
				width: 100%;
				flex-direction: column;
				align-items: center;
			}
			.col_1{
				width:440px;
			}
			.col_3{
				margin-top: -200px;
			}
			.projects_circle{
				align-self: flex-start;
				margin-top: -40px;
			}
			.header{
				flex-direction: row;
				width: 100%;
			}
			.page_box{
				Width: calc(100vw - 80px);
				margin: 0 auto 24px auto;
				display: flex;
				border: solid 1px #231f20;
				height: auto;
				flex-direction: column;
				}
			.light_box, .dark_box{
				width:100%;
			}
			.light_bottom{
				flex-direction: row-reverse;
			}
			.circle_contain_2, .circle_contain, .circle_contain_3, .circle_contain_4{
				margin-left: 0px;
				order: 0;
				align-self: center;
				
				}
			.circle_contain_3{
				width:80px;
			}
			.note_contain{order:1;}
			.Exp_circle{
				margin-top: -51px;
				}
			.nb_p{
				padding: 40px 0px 16px 24px;
			}
			.ext_circle{
				margin-top: -40px;
			}
			.Mob_nav{
				display:none;
			}
		}
		@media only screen and (max-width:900px){
			.nav{
				display: none;
			}
			.Mob_nav{
				display:block;
			}
			.header{
				margin-bottom: 24px;
			}
			.rd-navbar-sidebar .rd-navbar-toggle {
				display: block;
			}
		}
		@media only screen and (max-width:769px){
			.large_black_text_shadow{
				font-size: 48px;
				letter-spacing: 29px;
				margin: 16px;
				}
			.rot_2, .rot_contain {
				margin: 86px auto;
				}
			.exp_font{
				margin-left: -65px;
				}
			.light_bottom{
				flex-direction: column;
				align-items: flex-start;
				}
			.nb{
				border-left: solid 1px #151515;
    			padding: 40px 0px 16px 24px;
			}
			.nb_p{
				border-left: none;
    			padding: 40px 0px 16px 24px;
			}
			}
		@media only screen and (max-width:669px){
			.left_image{
				width:420px;
			}
			.nudge_out_name{
				margin-right:-40px;
			}
			body{
				margin: 0 16px;
			}
			.page_box{
				Width: 100%;
				margin: 0 auto 24px auto;
				display: flex;
				border: solid 1px #231f20;
				height: auto;
				flex-direction: column;
				}
			.page_box_2{
				Width: 100%;
				margin: 0 auto 0px auto;
				display: flex;
				border: solid 1px #231f20;
				height: auto;
				flex-direction: column;
				}
		}