/* ---------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------- */
/* -------------------------------- START DEVICE TYPE ------------------------------- */
/* ---------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------- */

@media only screen
	and (max-width: 480px) {

/* -------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------- */
/* -------------------------------- REOCCURING COMPONENTS ------------------------------- */
/* -------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------- */

/* -------------------------------- DEVELOPER MODE ------------------------------- */

#device {
    background: #00FF0C;
    display: block;
    height: 14px;
	padding-top: 1px;
    position: fixed;
    	top: 0;
    text-align: center;
    width: 100%;
    z-index: 100;
}

	#device p {
		font-family: 'jetbrains_monothin';
		font-size: 10px;
		text-transform: uppercase;
	}

		#device p::after { content: ' XS [480px or less]'; }

/* -------------------------------- NAV BAR ------------------------------- */

#nav-bar {
	display: flex;
		align-items: top;
		justify-content: center;
	height: 50px;
	position: fixed;
	margin-left: 25px;
	margin-top: calc(25px + 15px); /*--- 15PX ADDED FOR DEV MODE BANNER---*/
	transition: all 0.25s;
	z-index: 10;
}

	#nav-bar a.svg-logo-prg-vertical {
		color: #FFF;
		cursor: pointer;
		font-size: 40px;
		position: fixed;
			left: 25px;
	}

	#nav-bar a.menu-open {
		cursor: pointer;
		display: flex;
			align-items: center;
			flex-direction: row;
		position: fixed;
			right: 25px;
	}

		#nav-bar a.menu-open p {
			color: #FFF;
			font-family: 'jetbrains_monoextralight';
			font-size: 15px;
			line-height: 15px;
			text-transform: uppercase;
		}

	#nav-bar .directory {
		display: flex;
			flex-direction: row;
		height: 15px;
		position: fixed;
			left: 50%;
			transform: translateX(-50%);
				-webkit-transform: translateX(-50%);
		width: fit-content;
	}

	#nav-bar .directory h1 {
		color: rgba(255,255,255,0.5);
		font-family: 'jetbrains_monoextralight';
		font-size: 15px;
		line-height: 15px;
		text-transform: uppercase;
	}

		#nav-bar .directory h1.selected { color: #FFF; }

		#nav-bar .directory .sub-directory::before {
			color: rgba(255,255,255,0.75);
			content: "/";
			font-family: 'jetbrains_monoextralight';
			font-size: 15px;
			line-height: 15px;
			padding: 0 5px;
			cursor: default;
			text-transform: uppercase;
		}

/* -------------------------------- OVERLAY NAVIGATION ------------------------------- */

.overlay {
	height: 0;
	overflow-y: hidden;
	position: fixed;
		right: 0;
		top: 0;
	transition: 1.0s all;
	width: 100%;
	z-index: 50;
}

    .overlay .content {
    	background: #FF00B8;
    	display: flex;
    		flex-direction: column;
    		justify-content: space-between;
    	height: 100%;
    	overflow-y: scroll; 
    	position: absolute;
    		right: 0;
    		top: 0;
    	width: 100%;
    }
    	
    	.overlay .content::-webkit-scrollbar {  display: none; }
    
        .overlay .content a.close {
        	color: #FFF;
            display: flex;
        		align-items: center;
        		flex-direction: row-reverse;
        		justify-content: center;
        	font-family: 'jetbrains_monoextralight';
        	font-size: 15px;
        	height: 50px;
        	position: absolute;
            	right: 25px;
            	top: 22px;
            text-transform: uppercase;
        }
    
        .overlay .content ul {
        	display: flex;
        		align-self: flex-end;
        		flex-direction: column;
        		flex-wrap: wrap;
        		justify-content: space-between;
        	margin: 30px 0 100px;
        	width: 100%;
        }
        
            .overlay .content ul li { margin-left: 25px; }
            
            .overlay .content ul li:nth-child(5) a,
            .overlay .content ul li:nth-child(5) a:hover {
            	color: rgba(255,255,255,0.75);
            	cursor: default;
            	text-decoration: line-through;
            	text-decoration-color: #FFF;
            }
                        
            	.overlay .content ul li a {
                	color: rgba(255,255,255,0.75);
                	cursor: pointer;
                	display: inline-block;
                	font-family: 'butlerreguar';
                	font-size: 40px;
                	line-height: 50px;
                }
                
                	.overlay .content ul li a:hover { color: #FFF; }
                
        .overlay .content .marquee-latest {
        	display: flex;
        		align-self: flex-end;
        		flex-direction: column;
        		justify-content: space-between;
        	positon: relative;
        	width: 100%;
        }
        
        	.overlay .content .marquee-latest .quadrant { margin-left: 25px; }
        
            	.overlay .content .marquee-latest .quadrant .tag {
            		background: #000;
            		border-radius: 20px;
            		display: inline-block;
            		margin-bottom: 15px;
            		padding: 10px;
            		text-transform: uppercase;
            	}
            
                	.overlay .content .marquee-latest .quadrant .tag p {
                		color: #FFF;
                		font-family: 'jetbrains_monosemibold';
                		font-size: 10px;
                	}
        
        		.overlay .content .marquee-latest .quadrant h3 {
        		    color: #FFF;
        			font-family: 'jetbrains_monoextralight';
        			font-size: 15px;
        			line-height: 25px;
        			text-transform: uppercase;
				}
        
        	.overlay .content .marquee-latest .frame-logo {
        		height: 90px;
        		margin: 25px 0;
        		overflow: hidden;
        		position: relative;
        		width: 100%;
        	}
    
        		.overlay .content .marquee-latest .frame-logo div {
        			animation: marquee 10s linear infinite;
        			overflow: hidden;
        			position: absolute; 
        			width: 200%;
        		}
        
        			.overlay .content .marquee-latest .frame-logo div span {
        				display: flex;
        					align-items: center;
        				float: left;
        				width: 50%;
        			}
        
        				@keyframes marquee {
                          0% { left: 0; }
                          100% { left: -100%; }
                        }
                        
            			.overlay .content .marquee-latest .frame-logo div span .svg-logo-prg-horizontal {
            				color: #FFF;
            				font-size: 90px;
            				z-index: 1;
            			}

/* -------------------------------- LINE CAPTIONS ------------------------------ */

#line-captions {
	height: auto;
	position: relative;
}
		
	#line-captions.padding-bottom-500 { padding: 0 0 250px 0; }
	#line-captions.padding-top-500 { padding: 250px 0 0 0; }
	#line-captions.logo-grid { padding: 50px 0 250px 0; } /*--- UNDER LOGO GRID ---*/

	#line-captions.black { background: #000; }
	#line-captions.magenta { background: #FF00B8; }

    #line-captions .meta { 
    	display: flex;
    		flex-direction: column;
    	margin-left: 25px;
    	width: calc(100% - 50px);
    }

	#line-captions .meta .quadrant { 
		display: flex;
    		flex-direction: column;
		width: 100%;
	}

		#line-captions .meta .quadrant .sub-quadrant {
			margin-bottom: 50px;
			padding-right: 25px;
    		width: calc(100% - 25px);
    	}
    
    		#line-captions .meta .quadrant:first-child .sub-quadrant:last-child { display: none; }
    
    		#line-captions .meta .quadrant .sub-quadrant:last-child { margin-bottom: 0; }
    
    		#line-captions .meta .quadrant .sub-quadrant .icon-stack {
    			display: flex;
    				flex-direction: row;
    		}
    
        		#line-captions .meta .quadrant .sub-quadrant .icon-stack .svg-ui-menu-close {
        			border: 1px solid #FFF;
        			display: flex;
        				align-items: center;
        				justify-content: center;
        			font-size: 25px;
        			height: 40px;
        			width: 40px;
        		}
    			
    				#line-captions .meta .quadrant .sub-quadrant .icon-stack .svg-ui-menu-close.blue { color: #4B92FD; }
    				#line-captions .meta .quadrant .sub-quadrant .icon-stack .svg-ui-menu-close.cyan { color: #00FFFF; }
    				#line-captions .meta .quadrant .sub-quadrant .icon-stack .svg-ui-menu-close.magenta { color: #FF00B8; }
					#line-captions .meta .quadrant .sub-quadrant .icon-stack .svg-ui-menu-close.orange { color: #FF8426; }
					#line-captions .meta .quadrant .sub-quadrant .icon-stack .svg-ui-menu-close.white { color: #FFF; }
    
    				#line-captions .meta .quadrant .sub-quadrant .icon-stack .svg-ui-menu-close:not(:first-child) { margin-left: -1px; }
    
    		#line-captions .meta .quadrant .sub-quadrant h3 {
    			color: #FFF;
    			font-family: 'jetbrains_monoextralight';
    			font-size: 15px;
    			line-height: 15px;
    			margin-bottom: 30px;
    			text-transform: uppercase;
    		}
    
    		#line-captions .meta .quadrant .sub-quadrant p {
    			font-size: 15px;
    			line-height: 25px;
    		}
    
				#line-captions .meta .quadrant .sub-quadrant p.gray:last-child,
    			#line-captions .meta .quadrant .sub-quadrant p.white:last-child { margin-top: 30px; }
    
    			#line-captions .meta .quadrant .sub-quadrant p.gray {
    				color: #929292;
    				font-family: 'jetbrains_monothin';
    			}
    
    			#line-captions .meta .quadrant .sub-quadrant p.white {
    				color: rgba(255,255,255,0.75);
    				font-family: 'jetbrains_monoextralight';
    			}

					#line-captions .meta .quadrant .sub-quadrant p a {
						color: #00FFFF;
						display: inline;
						font-family: 'jetbrains_monothin';
						font-size: 15px;
						line-height: 25px;
						text-decoration: underline;
						text-decoration-thickness: 1px;
						text-underline-offset: 2px;
					}

				#line-captions .meta .quadrant .sub-quadrant ul { margin-top: 25px; }

					#line-captions .meta .quadrant .sub-quadrant ul li {
						list-style-type: square !important;
						margin-left: 20px;
						padding-left: 15px;
					}

					#line-captions .meta .quadrant .sub-quadrant ul li::marker { color: #FFF; }

						#line-captions .meta .quadrant .sub-quadrant ul li p {
							color: #929292;
							font-family: 'jetbrains_monothin';
							font-size: 15px;
							line-height: 25px;
						}

/* -------------------------------- LINE CHAPTERS ------------------------------ */

#line-chapters {
	background: #000;
	height: auto;
	position: relative;
}

	#line-chapters.padding-bottom-500 { padding: 0 0 250px 0; }
	#line-chapters.padding-top-500 { padding: 250px 0 0 0; }
	#line-chapters.logo-grid { padding: 50px 0 250px 0; } /*--- UNDER LOGO GRID ---*/

	#line-chapters h2 {
    	color: #FFF;
    	font-family: 'butlerregular';
    	font-size: 40px;
    	line-height: 50px;
    	margin: 0 0 50px 25px;
    	width: calc(100% - 50px);
    }

    #line-chapters .meta {
    	display: flex;
    		flex-direction: column;
    	margin-left: 25px;
    	width: calc(100% - 50px);
    }

	#line-chapters .meta .quadrant {
		display: flex;
    		flex-direction: column;
		width: 100%;
	}

		#line-chapters .meta .quadrant:last-child {
    		display: flex;
        		flex-direction: column;
    		width: 100%;
    	}

		#line-chapters .meta .quadrant .sub-quadrant {
			padding-right: 25px;
    		width: calc(100% - 25px);
		}

			#line-chapters .meta .quadrant:first-child .sub-quadrant:first-child { margin-bottom: 50px; }
        

    		#line-chapters .meta .quadrant .sub-quadrant .icon-stack {
    			display: flex;
    				flex-direction: row;
    		}
    
        		#line-chapters .meta .quadrant .sub-quadrant .icon-stack .svg-ui-menu-close {
        			border: 1px solid #FFF;
        			display: flex;
        				align-items: center;
        				justify-content: center;
        			font-size: 25px;
        			height: 40px;
        			width: 40px;
        		}
    			
    				#line-chapters .meta .quadrant .sub-quadrant .icon-stack .svg-ui-menu-close.blue { color: #4B92FD; }
    				#line-chapters .meta .quadrant .sub-quadrant .icon-stack .svg-ui-menu-close.cyan { color: #00FFFF; }
    				#line-chapters .meta .quadrant .sub-quadrant .icon-stack .svg-ui-menu-close.magenta { color: #FF00B8; }
					#line-chapters .meta .quadrant .sub-quadrant .icon-stack .svg-ui-menu-close.orange { color: #FF8426; }
					#line-chapters .meta .quadrant .sub-quadrant .icon-stack .svg-ui-menu-close.white { color: #FFF; }
    
    				#line-chapters .meta .quadrant .sub-quadrant .icon-stack .svg-ui-menu-close:not(:first-child) { margin-left: -1px; }
    
    		#line-chapters .meta .quadrant .sub-quadrant h3 {
    			color: #FFF;
    			display: inline;
    			font-family: 'jetbrains_monoextralight';
    			font-size: 15px;
    			line-height: 25px;
    			text-transform: uppercase;
    		}
    
    		#line-chapters .meta .quadrant .sub-quadrant p { 
    			color: #929292;
    			display: inline;
    			font-family: 'jetbrains_monothin';
    			font-size: 15px;
    			line-height: 25px;
    		}
    
        		#line-chapters .meta .quadrant .sub-quadrant p:not(:first-of-type) { display: block; margin-top: 50px; }
        
        		#line-chapters .meta .quadrant .sub-quadrant p:last-child { margin-bottom: 250px; }
    
        		#line-chapters .meta .quadrant .sub-quadrant p a {
        			color: #00FFFF;
        			display: inline;
        			font-family: 'jetbrains_monothin';
        			font-size: 15px;
        			line-height: 25px;
            		text-decoration: underline;
            		text-decoration-thickness: 1px;
            		text-underline-offset: 2px;
        		}
        
        	#line-chapters .meta .quadrant .sub-quadrant ul { margin-top: 50px; }
        
            	#line-chapters .meta .quadrant .sub-quadrant ul li {
        			list-style-type: square !important;
        			margin-left: 20px;
        			padding-left: 15px;
        		}
        
        		#line-chapters .meta .quadrant .sub-quadrant ul li::marker { color: #FFF; }
        
            		#line-chapters .meta .quadrant .sub-quadrant ul li p {
            			color: #929292;
            			font-family: 'jetbrains_monothin';
            			font-size: 15px;
            			line-height: 25px;
            		}

    #line-chapters .meta .cards {
    	display: flex;
    		flex-direction: column;
    	margin-bottom: 250px;
    }
        
    	#line-chapters .meta .cards .quadrant {
    		display: flex;
    			flex-direction: column;
    		padding-right: 25px;
    		width: calc(100% - 25px);
    	}
    
    		#line-chapters .meta .cards .quadrant:not(:first-of-type) { display: block; margin-top: 50px; }
    
    		#line-chapters .meta .cards .quadrant .label {
    			display: flex;
    				flex-direction: column;
    			margin-bottom: 15px;
    		}
        
        		#line-chapters .meta .cards .quadrant .label .svg-ui-menu-close {
        			color: #FFF;
        			display: flex;
        				align-items: center;
        				justify-content: center;
        			font-size: 25px;
        			height: 40px;
        			margin-bottom: 25px;
        			width: 40px;
        		}

    				#line-chapters .meta .cards .quadrant .label .svg-ui-menu-close.blue { background: #0F62FE; }
    				#line-chapters .meta .cards .quadrant .label .svg-ui-menu-close.cyan { background: #00FFFF; }
    				#line-chapters .meta .cards .quadrant .label .svg-ui-menu-close.magenta { background: #FF00B8; }
					#line-chapters .meta .cards .quadrant .label .svg-ui-menu-close.orange { background: #FF8426; }
					#line-chapters .meta .cards .quadrant .label .svg-ui-menu-close.white { background: #FFF; }
    
        		#line-chapters .meta .cards .quadrant .label h3 {
        			color: #FFF;
        			font-family: 'butlermedium';
        			font-size: 40px;
        			line-height: 40px;
        		}
        
    		#line-chapters .meta .cards .quadrant p {
    			color: #929292;
    			font-family: 'jetbrains_monothin';
    			font-size: 15px;
    			line-height: 25px;
    		}
    
        		#line-chapters .meta .cards .quadrant p a {
        			color: #00FFFF;
        			display: inline;
        			font-family: 'jetbrains_monothin';
        			font-size: 15px;
        			line-height: 25px;
            		text-decoration: underline;
            		text-decoration-thickness: 1px;
            		text-underline-offset: 2px;
        		}

            	#line-chapters .meta .quadrant ul li {
        			list-style-type: square !important;
        			margin-left: 20px;
        			padding-left: 15px;
        		}
        
        		#line-chapters .meta .quadrant ul li::marker { color: #FFF; }
        
            		#line-chapters .meta .quadrant ul li p {
            			color: #929292;
            			font-family: 'jetbrains_monothin';
            			font-size: 15px;
            			line-height: 25px;
            		}

/* -------------------------------- HR ------------------------------ */

hr {
	border-bottom: none;
	margin: 0;
	padding: 0;
}

	hr.indent-left.gray,
	hr.indent-right.gray { border-top: 1px solid #565656; }

	hr.indent-left.white,
	hr.indent-right.white { border-top: 1px solid #FFF; }
    
	hr.indent-left.pink,
	hr.indent-right.pink { border-top: 1px solid rgba(255,255,255,0.75); }
    
	hr.indent-left {
		margin: 0 0 50px 25px;
    		width: calc(100% - 27px);
    }
    
    hr.indent-right {
		margin: 50px 25px 0 0;
    		width: calc(100% - 27px);
    }

/* --------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------- */
/* -------------------------------- HERO: HOME ------------------------------- */
/* --------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------- */

#hero-home {
	background: #000;
	display: flex;
    		align-items: center;
    		justify-content: center;
	position: relative;
	height: 100dvh;
	width: 100%;
}

    #hero-home .marquee-mission {
		display: flex;
    		align-items: center;
    		justify-content: center;
		position: absolute;
		width: 100%;
    	z-index: 1;
    }

    	#hero-home .marquee-mission .frame-text {
    		height: 25px;
    		overflow: hidden;
    		position: absolute;
    		width: 100%;
    	}
    
            #hero-home .marquee-mission .frame-text span.fade {
            	background-image: none;
            	height: 25px;
            	position: absolute;
            	width: 25px;
            	z-index: 1;
            }

			#hero-home .marquee-mission .frame-text span.fade.left { display: none; }
			#hero-home .marquee-mission .frame-text span.fade.right { display: none; }
    
    		#hero-home .marquee-mission .frame-text div {
    			animation: marquee 10s linear infinite;
    			overflow: hidden;
    			position: absolute; 
    			width: 200%;
    		}
    
    			#hero-home .marquee-mission .frame-text div span {
    				display: flex;
    					align-items: center;
    				float: left;
    				width: 50%;
    			}
    
    				@keyframes marquee {
                      0% { left: 0; }
                      100% { left: -100%; }
                    }

            		#hero-home .marquee-mission .frame-text div span h2 {
            			color: #FFF;
            			display: flex;
            			font-family: 'jetbrains_monoextralight';
            			font-size: 15px;
            			white-space: nowrap;
            			text-transform: uppercase;
            		}

	#hero-home .x-box {
		display: flex;
			align-items: center;
			justify-content: center;
		height: 100dvh;
		margin: auto;
		position: relative;
	}

		#hero-home .x-box .sizzle-reel {
			animation: gradient 25s ease infinite;
			background: radial-gradient(circle at top right, #FF00B8, #FF00B8, #FEDD02, #FEDD02, #FF00B8, #CC00FF, #00FBDC, #00FBDC, #00FBDC);
			background-size: 500% 500%;
			border-radius: 0;
    		display: flex;
    			align-items: center;
    			justify-content: center;
			height: 100dvh;
			width: 100vw;
		}

			@keyframes gradient {
            	0% {
            		background-position: 0% 50%;
            	}
            	50% {
            		background-position: 100% 50%;
            	}
            	100% {
            		background-position: 0% 50%;
            	}
        	}

		#hero-home .x-box .svg-ui-x-mask-16-9 { display: none; }

	#hero-home .meta {
		display: flex;
			flex-direction: column;
		position: absolute;
			bottom: 25px;
		width: calc(100% - 50px);
	}    	

		#subhome .meta .quadrant:nth-child(1) { width: 100%; }

		#hero-home .meta .quadrant:nth-child(2) { text-align: left; width: 100%; }

		#hero-home .meta .quadrant:nth-child(3) {
			position: absolute;
				bottom: 0;
				right: 0;
			text-align: right;
			width: 100%;
		}

    	#hero-home .meta .quadrant h3.primary,
    	#hero-home .meta .quadrant h3 {
    		font-size: 15px;
    		line-height: 25px;
    		text-transform: uppercase;
    		transition: all 0.25s;
    	}
    
    	#hero-home .meta .quadrant h3.primary { font-family: 'jetbrains_monoextralight'; }
    	#hero-home .meta .quadrant h3 { font-family: 'jetbrains_monoextralight'; }
    
    	#hero-home .meta .quadrant h3.primary { color: #FFF; }
        #hero-home .meta .quadrant h3 { color: #FFF; }

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------ */
/* -------------------------------- HERO: SUBPAGE ------------------------------- */
/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------ */

#hero-subpage {
	background: #000;
	display: flex;
		flex-direction: column;
	position: relative;
	width: 100%;
}

	#hero-subpage .client {
		display: flex;
			align-items: center;
			justify-content: center;
		height: 350px;
		width: 100%;
	}

		#hero-subpage .client.ibm { background: #0F62FE; }
		#hero-subpage .client.intuit { background: #3588DF; }

			#hero-subpage .client.ibm .svg-logo-ibm {
				font-size: 50px;
				margin-top: calc(50px + 15px);
			}
		
			#hero-subpage .client.intuit .svg-logo-intuit {
				font-size: 30px;
				margin-top: calc(60px + 15px);
			}

	#hero-subpage .meta {
		display: flex;
			flex-direction: column;
		width: 100%;
	}

		#hero-subpage .meta.ibm { background: #0F62FE; }
		#hero-subpage .meta.intuit { background: #3588DF; }

		#hero-subpage .meta .quadrant {
			display: flex;
				align-items: flex-start;
			width: 100%;
		}

			#hero-subpage .meta .quadrant.column { flex-direction: column; order: 1; }
			#hero-subpage .meta .quadrant.row { flex-direction: row; order: 2; }


			#hero-subpage .meta .quadrant .sub-quadrant {
				display: flex;
					flex-direction: row;
				margin: 0 0 50px 25px;
				width: calc(100% - 50px);
			}

				#hero-subpage .meta .quadrant .sub-quadrant:first-child { margin-top: 25px; }

				#hero-subpage .meta .quadrant .sub-quadrant ul { width: 50%; }

					#hero-subpage .meta .quadrant .sub-quadrant:last-child ul { margin-bottom: 0; }

						#hero-subpage .meta .quadrant .sub-quadrant li { margin-bottom: 5px; }
						#hero-subpage .meta .quadrant .sub-quadrant li:last-child { margin-bottom: -5px; }
         
                		#hero-subpage .meta .quadrant .sub-quadrant ul li h3 {
                			color: #FFF;
                			font-family: 'jetbrains_monoextralight';
                			font-size: 15px;
                			line-height: 25px;
                			text-transform: uppercase;
                		}
                            
                		#hero-subpage .meta .quadrant .sub-quadrant ul li {
                			color: rgba(255,255,255,0.5);
                			font-family: 'jetbrains_monothin';
                			font-size: 15px;
                			line-height: 25px;
                			text-transform: uppercase;
                		}
    
    		#hero-subpage .meta .quadrant .card {
    			aspect-ratio: 1 / 1;
    			width: 100%;
    		}
    
    		#hero-subpage .meta .quadrant .card.ibm-mini-grid {
				background-image: url("../graphics/ibm/ibm-mini-grid.jpg");
            		background-position: center center;
                	background-repeat: no-repeat;
            		background-size: contain;
            }
            
    		#hero-subpage .meta .quadrant .card.ibm-gradient-think {
				background-image: url("../graphics/ibm/ibm-gradient-think.jpg");
            		background-position: center center;
                	background-repeat: no-repeat;
            		background-size: contain;
            }

			#hero-subpage .meta .quadrant .card.intuit-logo-personal-pro {
				background-image: url("../graphics/intuit/intuit-logo-personal-pro.png");
					background-color: #0050A4;
            		background-position: center center;
                	background-repeat: no-repeat;
            		background-size: 60%;
            }
            
    		#hero-subpage .meta .quadrant .card.intuit-icon-maximum-guarantee {
				background-image: url("../graphics/intuit/intuit-icon-maximum-guarantee.png");
            		background-color: #B8D5F4;
					background-position: center center;
                	background-repeat: no-repeat;
            		background-size: 40%;
            }

/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
/* -------------------------------- BLOCK PANORAMIC ------------------------------- */
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */

#block-panoramic {
	background: #565656;
	background-attachment: scroll;
	background-position: top left;
    background-repeat: no-repeat;
    background-size: cover;
}

	#block-panoramic.ibm-people-collage { background-image: url("../graphics/ibm/ibm-people-collage.jpg"); }
	#block-panoramic.ibm-logo-abstract { background-image: url("../graphics/ibm/ibm-logo-abstract.jpg"); }
	#block-panoramic.team-planning { background-image: url("../graphics/ibm/ibm-team-planning.jpg"); }
	#block-panoramic.wireframes { background-image: url("../graphics/ibm/ibm-wireframes.jpg"); background-position: bottom center !important; }
	#block-panoramic.intuit-photo-ipad-dashboard { background-image: url("../graphics/intuit/intuit-photo-ipad-dashboard.jpg"); background-position: bottom; background-size: cover; }
	#block-panoramic.intuit-photo-sketch-of-pictograms { background-image: url("../graphics/intuit/intuit-photo-sketch-of-pictograms.jpg"); background-position: center; background-size: cover; }
	#block-panoramic.intuit-photo-office { background-image: url("../graphics/intuit/intuit-photo-office.jpg"); background-position: bottom; background-size: cover; }

	#block-panoramic .meta {
		display: flex;
			align-items: center;
			justify-content: center;
		height: 75vw;
		margin-left: 50px;
		width: calc(100% - 100px);
	}

		#block-panoramic .meta .fpo-x {
			border: 1px solid #929292;
			display: flex;
				align-items: center;
				justify-content: center;
            height: 200px;
            margin: 10px;
            position: relative;
            width: 200px;
    	}
    
           #block-panoramic .meta .fpo-x:after {
        		background: #929292;
                content: ''; 
                height: 1px;
                position: absolute;
                	left: 0px;
                	top: 0px;
                transform: rotate(45deg);
                transform-origin: 1px 1px;
                width: 141.421%;
            }
    
			#block-panoramic .meta .fpo-x p {
				background: #929292;
				color: #565656;
				font-family: 'jetbrains_monosemibold';
				font-size: 20px;
				padding: 17px 12px;
				position: absolute;
				text-align: center;
            	text-transform: uppercase;
            	z-index: 1;
			}

/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
/* -------------------------------- BLOCK WIREFRAME ------------------------------- */
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */

#block-wireframe {
	background: #FF0000;
	height: 100vw;
	margin-left: 50px;
	width: calc(100% - 100px);
}

/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* -------------------------------- LARGE TYPOGRAPHY ------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */

#large-typography { background: #000; }

	#large-typography.standard { padding: 250px 0; }
	
	#large-typography.project-details { padding: 225px 0; } /*--- 25PX PRE-SUBTRACTED FOR HERO: CLIENT META's 25px PADDING ---*/

    #large-typography .text-box {
    	margin-left: 25px;
    	width: calc(100% - 50px);
    }
    
	#large-typography .text-box h1 {
    	color: #929292;
    	font-family: 'butlerregular';
    	font-size: 40px;
    	line-height: 50px;
    }
    
    	#large-typography .text-box h1 .cyan { color: #00FFFF; }
    	#large-typography .text-box h1 .ibm { color: #0F62FE; }
    	#large-typography .text-box h1 .intuit { color: #3588DF; }
    	#large-typography .text-box h1 .magenta { color: #FF00B8; }
    	#large-typography .text-box h1 .white { color: #FFF; }
    
    	#large-typography .text-box h1:not(:first-of-type) { display: block; margin-top: 50px; }
		
		#large-typography .text-box h1 a {
			color: #FFF;
			font-family: 'butlerregular';
			font-size: 40px;
			line-height: 50px;
			text-decoration: underline;
        		text-underline-offset: 7px;
        		text-decoration-thickness: 1.25px;
		}
		
		#large-typography .text-box h1 a:hover { color: #FFF; } 

/* -------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------- */
/* -------------------------------- MARQUEE PRG LOGO GRID ------------------------------- */
/* -------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------- */

#marquee-prg-logo-grid {
	background: #000;
	height: 75vw;
	position: relative;
}

	#marquee-prg-logo-grid.padding-top { padding-top: 250px; }

    #marquee-prg-logo-grid .marquee-logo {
		position: absolute;
    	width: 100%;
    	z-index: 1;
    }

    	#marquee-prg-logo-grid .marquee-logo .frame-logo {
    		display: flex;
				align-items: center;
				justify-content: center;
    		height: 75vw;
    		overflow: hidden;
    		position: absolute;
    		width: 100%;
    	}

    		#marquee-prg-logo-grid .marquee-logo .frame-logo div {
    			animation: marquee 25s linear infinite;
    			overflow: hidden;
    			position: absolute; 
    			width: 200%;
    		}
    
    			#marquee-prg-logo-grid .marquee-logo .frame-logo div span {
    				display: flex;
    					align-items: center;
    				float: left;
    				width: 50%;
    			}
    
    				@keyframes marquee {
                      0% { left: 0; }
                      100% { left: -100%; }
                    }
    
            		#marquee-prg-logo-grid .marquee-logo .frame-logo div span .svg-logo-prg-horizontal { font-size: 23vw; }
            
            			#marquee-prg-logo-grid .marquee-logo .frame-logo div span .svg-logo-prg-horizontal.white {
            				color: #FFF;
            				margin-left: 4px;
            				z-index: 1;
            			}
            
            			#marquee-prg-logo-grid .marquee-logo .frame-logo div span .svg-logo-prg-horizontal.cyan {
                            color: #00FFFF;
                            margin-left: 0x;
                            z-index: 0;
                        }
            
            			#marquee-prg-logo-grid .marquee-logo .frame-logo div span .svg-logo-prg-horizontal.magenta {
                            color: #FF00B8;
                            margin-left: 8px;
                            z-index: 0;
                		}

    #marquee-prg-logo-grid .grid {
        background:
            linear-gradient(transparent 2px, #000 2px),
            linear-gradient(-90deg, transparent 2px, #000 2px), #565656;
        background-position: center;
	    background-size: 25px 25px;
		height: 100%;
		width: 100%;
    }

/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* -------------------------------- CLIENT LOGO GRID ------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */

#client-logo-grid {
	background: #000;
	display: flex;
		align-items: center;
		justify-content: center;
	height: 100vw;
	position: relative;
}

	#client-logo-grid .client {
		background: #000;
		padding: 25px;
		position: absolute;
	}

		#client-logo-grid .client.svg-logo-ibm { color: #0F62FE; font-size: 50px; }
		#client-logo-grid .client.svg-logo-intuit { color: #3588DF; font-size: 30px; }

    #client-logo-grid .grid { 
        background:
            linear-gradient(transparent 2px, #000 2px),
            linear-gradient(-90deg, transparent 2px, #000 2px), #565656;
        background-position: center;
	    background-size: 25px 25px;
		height: 100%;
		width: 100%;
    }

/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
/* -------------------------------- PANORAMIC IMAGE ------------------------------- */
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */

#panoramic-image {
	position: relative;
	height: 50dvh;
}

	#panoramic-image.cmaas-lady {
		background-image: url("../graphics/cmaas-lady.jpg");
		background-position: center right -75px;
		background-repeat: no-repeat;
		background-size: cover;
	}

	#panoramic-image .meta {
		display: flex;
			flex-direction: row;
		position: absolute;
			bottom: 25px;
			left: 25px;
		width: calc(100% - 50px);
	}

		#panoramic-image .meta .quadrant { width: 100%; }

    		#panoramic-image .meta .quadrant p {
    			color: #FFF;
    			font-family: 'jetbrains_monothin';
    			font-size: 15px;
    			line-height: 25px;
    			text-transform: uppercase;
    		}

/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
/* --------------------------------- DESIGN SPREAD -------------------------------- */
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */

#design-spread {
	display: flex;
		flex-direction: column;
		justify-content: space-between;
	overflow: hidden;
	position: relative;
	width: 100%;
}

	#design-spread .meta { }

		#design-spread .meta .quadrant {
			margin: 25px 0 0 25px;
			width: auto;
		}

    		#design-spread .meta .quadrant h3 {
        		color: #FFF;
        		font-family: 'jetbrains_monoextralight';
        		font-size: 15px;
        		line-height: 25px;
        		text-transform: uppercase;
    		}

    #design-spread.cyan { background: #00FFFF; }
	#design-spread.ibm { background: #0F62FE; }
	#design-spread.intuit { background: #3588DF; }
	#design-spread.intuit-darker-blue { background: #0050A4; }
    #design-spread.magenta { background: #FF00B8; }
    #design-spread.white { background: #FFF; }
    
	#design-spread .text-box {
		margin: 250px 0 0 25px;
		width: calc(100% - 50px);
	}

    	#design-spread .text-box h2 {
        	color: rgba(255,255,255,0.75);
        	font-family: 'butlerregular';
        	font-size: 40px;
        	line-height: 50px;
        	margin-bottom: 50px;
        }
        
        	#design-spread .text-box h2:last-child { margin-bottom: 0; }
        
        	#design-spread .text-box h2 .white { color: #FFF; }

    #design-spread .legend {
    	margin: 100px 0 0 25px;
    	width: fit-content;
    }
    
    	#design-spread .legend ul { }
    
    		#design-spread .legend ul li {
    			display: flex;
    				align-items: center;
    				flex-direction: row;
    			height: 25px;
    		}
        	
    		#design-spread .legend ul li .node {
    			border: 1px solid #FFF;
    			display: block;
    			height: 25px;
    			width: 25px;
    		}
    
    			#design-spread .legend ul li .node.ibm { background: #1454CD; }
				#design-spread .legend ul li .node.intuit { background: #0050A4; }
				#design-spread .legend ul li .node.magenta { background: #FF00B8; }
				#design-spread .legend ul li .node.orange { background: #FF8426; }
				#design-spread .legend ul li .node.white { background: #FFF; }
    
    		#design-spread .legend ul li hr {
    			background: #FFF;
    			border: none;
    			height: 1px;
    			margin-right: 15px;
    			width: 50px;
    		}
    
    		#design-spread .legend ul li p {
    			color: #FFF;
                font-family: 'jetbrains_monoextralight';
                font-size: 15px;
                line-height: 15px;
                text-transform: uppercase;
    		}

	#design-spread .ibm-marquee-journey-map {
		height: 791px;
		padding: 150px 0;
		position: relative;
	}

		#design-spread .ibm-marquee-journey-map .map {
			position: absolute;
			width: 200%;
			z-index: 1;
		}

			#design-spread .ibm-marquee-journey-map .map .frame {
				display: flex;
					align-items: center;
					justify-content: center;
				height: 791px;
				overflow: hidden;
				position: absolute;
				width: calc(3000px + 250px);
			}

				#design-spread .ibm-marquee-journey-map .map .frame div {
					animation: marquee 50s linear infinite;
					overflow: hidden;
					position: absolute; 
					width: 200%;
				}

					#design-spread .ibm-marquee-journey-map .map .frame div span {
						display: flex;
							align-items: center;
						float: left;
						width: 50%;
					}

						@keyframes marquee {
						  0% { left: 0; }
						  100% { left: -100%; }
						}

						#design-spread .ibm-marquee-journey-map .map .frame div span .ibm {
							background-image: url("../graphics/ibm/ibm-user-journey-map-15px.png");
								background-position: top center;
								background-repeat: no-repeat;
								background-size: contain;
							display: flex;
								flex: 0 0 auto;
							height: 791px;
							width: 3000px;
						}

	#design-spread .intuit-marquee-journey-map {
		height: 791px;
		padding: 150px 0;
		position: relative;
	}

		#design-spread .intuit-marquee-journey-map .map {
			position: absolute;
			width: 200%;
			z-index: 1;
		}

			#design-spread .intuit-marquee-journey-map .map .frame {
				display: flex;
					align-items: center;
					justify-content: center;
				height: 791px;
				overflow: hidden;
				position: absolute;
				width: calc(3000px + 250px);
			}

				#design-spread .intuit-marquee-journey-map .map .frame div {
					animation: marquee 50s linear infinite;
					overflow: hidden;
					position: absolute; 
					width: 200%;
				}

					#design-spread .intuit-marquee-journey-map .map .frame div span {
						display: flex;
							align-items: center;
						float: left;
						width: 50%;
					}

						@keyframes marquee {
						  0% { left: 0; }
						  100% { left: -100%; }
						}

						#design-spread .intuit-marquee-journey-map .map .frame div span .intuit {
							background-image: url("../graphics/intuit/intuit-user-journey-map-15px.png");
								background-position: top center;
								background-repeat: no-repeat;
								background-size: contain;
							display: flex;
								flex: 0 0 auto;
							height: 791px;
							width: 3000px;
						}

	#design-spread .controller {
    	padding-bottom: calc(250px - 25px);
    	width: 100%;
    }
    
    	#design-spread .controller .box {
    		margin: 0 0 50px 25px;
    		position: relative;
    		width: calc(100% - 50px);
    		z-index: 1;
        }
    
        	#design-spread .controller .box .grabber {
        		background: #FFF;
        		height: 11px;
        		position: absolute;
        			top: -5px;
        		width: 25%;
        	}
        
    		#design-spread .controller .box p {
    			color: #FFF;
                font-family: 'jetbrains_monoextralight';
                font-size: 15px;
                line-height: 15px;
                position: absolute;
        			top: 25px;
                text-transform: uppercase;
    		}
    
            #design-spread .controller .box hr {
            	border-bottom: none;
            	border-top: 1px solid #FFF;
            	padding: 0;
                width: 100%;
            }

    #design-spread .selector-cards {
    	padding: 250px 0;
    }
    
    	#design-spread .selector-cards ul {
    		display: flex;
    			flex-direction: column;
    		margin-left: 25px;
    		width: calc(100% - 25px);
    	}
        
    		#design-spread .selector-cards ul.standard li {
    			border-bottom: 1px solid #88BBFA;
    			border-top: 1px solid #88BBFA;
    			display: flex;
        			align-items: center;
        			flex-direction: column;
        			justify-content: center;
        		margin-bottom: -1px;
        		padding: 25vw 0;
        		position: relative;
        		width: calc(100% - 25px);
    		}
    
        		#design-spread .selector-cards ul.standard li .meta {
					display: flex;
						flex-direction: row;
						justify-content: space-between;
					position: absolute;
						top: 25px;
					width: 100%;
				}

    				#design-spread .selector-cards ul.standard li p {
    					color: #88BBFA;
        				font-family: 'jetbrains_monothin';
        				font-size: 15px;
        				line-height: 15px;
        				text-transform: uppercase;
        			} 

    			#design-spread .selector-cards ul.standard li .ibm,
				#design-spread .selector-cards ul.standard li .intuit {
    				display: flex;
    					align-items: center;
    					flex-direction: column;
    					justify-content: center;
    				position: relative;
    			}  

                	#design-spread .selector-cards ul.standard li .ibm.figure-01,
                	#design-spread .selector-cards ul.standard li .ibm.figure-02,
                	#design-spread .selector-cards ul.standard li .ibm.figure-03,
                	#design-spread .selector-cards ul.standard li .ibm.figure-04,
                	#design-spread .selector-cards ul.standard li .ibm.figure-05,
                	#design-spread .selector-cards ul.standard li .ibm.figure-06,
                	#design-spread .selector-cards ul.standard li .ibm.figure-07,
                	#design-spread .selector-cards ul.standard li .ibm.figure-08,
                	#design-spread .selector-cards ul.standard li .ibm.figure-09,
                	#design-spread .selector-cards ul.standard li .ibm.figure-10 {
                		background-position: top left;
                		background-repeat: no-repeat;
                		background-size: cover;
                		border-radius: 15px;
                		height: 586px;
            			width: 320px;
                	}

					#design-spread .selector-cards ul.standard li .intuit.figure-01,
					#design-spread .selector-cards ul.standard li .intuit.figure-02,
					#design-spread .selector-cards ul.standard li .intuit.figure-03,
					#design-spread .selector-cards ul.standard li .intuit.figure-04,
					#design-spread .selector-cards ul.standard li .intuit.figure-05,
					#design-spread .selector-cards ul.standard li .intuit.figure-06,
					#design-spread .selector-cards ul.standard li .intuit.figure-07,
					#design-spread .selector-cards ul.standard li .intuit.figure-08,
					#design-spread .selector-cards ul.standard li .intuit.figure-09,
					#design-spread .selector-cards ul.standard li .intuit.figure-10,
					#design-spread .selector-cards ul.standard li .intuit.figure-11,
					#design-spread .selector-cards ul.standard li .intuit.figure-12 { background: #0050A4;
                		background-position: top left;
                		background-repeat: no-repeat;
                		background-size: cover;
                		border-radius: 15px;
                		height: 690px;
            			width: 320px;
                	}
   
                	#design-spread .selector-cards ul.standard li .ibm.figure-01 { background-image: url("../graphics/ibm/cmaas-router.png"); }
                    #design-spread .selector-cards ul.standard li .ibm.figure-02 { background-image: url("../graphics/ibm/cmaas-support.png"); }
                	#design-spread .selector-cards ul.standard li .ibm.figure-03 { background-image: url("../graphics/ibm/cmaas-channels-sales.png"); }
                	#design-spread .selector-cards ul.standard li .ibm.figure-04 { background-image: url("../graphics/ibm/cmaas-channels-sales-call.png"); }
                	#design-spread .selector-cards ul.standard li .ibm.figure-05 { background-image: url("../graphics/ibm/cmaas-chat-ai-agent.png"); }
                	#design-spread .selector-cards ul.standard li .ibm.figure-06 { background-image: url("../graphics/ibm/cmaas-chat-live-agent.png"); }
                	#design-spread .selector-cards ul.standard li .ibm.figure-07 { background-image: url("../graphics/ibm/cmaas-text-to-device.png"); }
                	#design-spread .selector-cards ul.standard li .ibm.figure-08 { background-image: url("../graphics/ibm/cmaas-text-to-device-form.png"); }
                	#design-spread .selector-cards ul.standard li .ibm.figure-09 { background-image: url("../graphics/ibm/cmaas-chat-close.png"); }
                	#design-spread .selector-cards ul.standard li .ibm.figure-10 { background-image: url("../graphics/ibm/cmaas-chat-feedback.png"); }
		
                    #design-spread .selector-cards ul.standard li .intuit.figure-02 { background-image: url("../graphics/intuit/intuit-dashboard-upload-mobile.jpg"); }
                	#design-spread .selector-cards ul.standard li .intuit.figure-03 { background-image: url("../graphics/intuit/intuit-share-docs.jpg"); }
                	#design-spread .selector-cards ul.standard li .intuit.figure-04 { background-image: url("../graphics/intuit/intuit-choose-bank.jpg"); }
                	#design-spread .selector-cards ul.standard li .intuit.figure-05 { background-image: url("../graphics/intuit/intuit-imported-files.jpg"); }
                	#design-spread .selector-cards ul.standard li .intuit.figure-06 { background-image: url("../graphics/intuit/intuit-price-summary-mobile.jpg"); }
                	#design-spread .selector-cards ul.standard li .intuit.figure-07 { background-image: url("../graphics/intuit/intuit-review-docs-mobile.jpg"); }

			#design-spread .selector-cards ul.wide li {
    			border-bottom: 1px solid #88BBFA;
    			border-top: 1px solid #88BBFA;
    			display: flex;
        			align-items: center;
        			flex-direction: column;
        			justify-content: center;
        		margin-bottom: -1px;
        		padding: 25vw 0;
        		position: relative;
        		width: calc(100% - 25px);
    		}
    
        		#design-spread .selector-cards ul.wide li .meta {
					display: flex;
						flex-direction: row;
						justify-content: space-between;
					position: absolute;
						top: 25px;
					width: 100%;
				}

    				#design-spread .selector-cards ul.wide li p {
    					color: #88BBFA;
        				font-family: 'jetbrains_monothin';
        				font-size: 15px;
        				line-height: 15px;
        				text-transform: uppercase;
        			}
        
					#design-spread .selector-cards ul.wide li h2 {
    					color: #FFF;
        				font-family: 'jetbrains_monoextralight';
        				font-size: 20px;
						letter-spacing: -1px;
        				line-height: 20px;
						margin: 150px 0;
        			}

    			#design-spread .selector-cards ul.wide li .ibm,
				#design-spread .selector-cards ul.wide li .intuit {
					aspect-ratio: 325 / 223;
					background-position: top center;
                    background-repeat: no-repeat;
                	background-size: cover;
					border-radius: 15px;
    				display: flex;
    					align-items: center;
    					flex-direction: column;
    					justify-content: center;
					height: auto;
					width: 100%;
    			}  
   
                	#design-spread .selector-cards ul.wide li .ibm.figure-01 { aspect-ratio: 325 / 223; background-image: url("../graphics/ibm/book-a-meeting.jpg"); }

                	#design-spread .selector-cards ul.wide li .intuit.figure-01 { aspect-ratio: 3000 / 2943; background-image: url("../graphics/intuit/intuit-dashboard-upload-desktop.jpg"); }
                	#design-spread .selector-cards ul.wide li .intuit.figure-02 { aspect-ratio: 3000 / 2651; background-image: url("../graphics/intuit/intuit-dashboard-cpa-desktop.jpg"); }
					#design-spread .selector-cards ul.wide li .intuit.figure-03 { aspect-ratio: 1280 / 14778; background-image: url("../graphics/intuit/intuit-website-phone.jpg"); }

/* ------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------ */
/* -------------------------------- CLIENT LOGO CALLOUT ------------------------------- */
/* ------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------ */

#client-logo-callout { background: #000; }

	#client-logo-callout .canvas {
    	display: flex;
    		align-items: center;
    		justify-content: center;
		height: 75vw;
		position: relative;
	}

		#client-logo-callout .canvas.ibm { background: #D5E8FF; }
		#client-logo-callout .canvas.intuit { background: #0050A4; }

    	#client-logo-callout .canvas .client {
    		position: absolute;
    			left: 50%;
    			transform: translateX(-50%);
    			-webkit-transform: translateX(-50%);
    		z-index: 2;
    	}

			#client-logo-callout .canvas .client.svg-logo-ibm { color: #0F62FE; font-size: 50px; }

			#client-logo-callout .canvas .client.intuit-logo-personal-pro {
				background-image: url("../graphics/intuit/intuit-logo-personal-pro.png");
            		background-position: center center;
                	background-repeat: no-repeat;
					background-size: contain;
            		height: 25%;
					width: 175px;
            }

/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* -------------------------------- CATEGORY SELECTOR ------------------------------ */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */

#category-selector {
	background: #000;
	padding-bottom: 250px;
}

	#category-selector ul { }
	
		#category-selector ul li {
			margin-left: 25px;
			width: calc(100% - 25px);
		}

			#category-selector ul li:not(:first-child) { margin-top: -1px; }

			#category-selector ul li a {
				background: #000;
				border-bottom: 1px solid #565656;
        		border-top: 1px solid #565656;
				color: #929292;
				cursor: crosshair;
				display: flex;
					align-items: center;
					flex-direction: row;
					justify-content: space-between;
            	font-family: 'butlerregular';
            	font-size: 40px;
            	padding: 10px 0;
            	width: 100%;
			}

        		#category-selector ul li a:hover {
        			background: #FF00B8;
        			margin-left: -50px;
        			padding-left: 50px;
        			width: calc(100% + 0px);
        		}
                        
    				#category-selector ul li a .tooltip-card {
    					background: #565656;
                        border-radius: 15px;
                        display: none;
                        height: calc(300px - 50px);
                        margin-left: 15px;
                        margin-top: 15px;
                        padding: 25px;
                        position: absolute;
                        width: calc(300px - 50px);
                        z-index: 5;
                    }

                        #category-selector ul li a .tooltip-card::after,
                        #category-selector ul li a:hover .tooltip-card::after {
                        	height: 0;
                        	overflow: hidden;
                        	position: absolute;
                        	width: 0;
                        	z-index: -1;
                        	content: url("../graphics/fpo/fpo-tooltip-card01.jpg")
                        			 url("../graphics/fpo/fpo-tooltip-card02.jpg")
                        			 url("../graphics/fpo/fpo-tooltip-card03.jpg")
                        			 url("../graphics/fpo/fpo-tooltip-card04.jpg")
                        			 url("../graphics/fpo/fpo-tooltip-card05.jpg")
                        			 url("../graphics/fpo/fpo-tooltip-card06.jpg")
                        			 url("../graphics/fpo/fpo-tooltip-card07.jpg")
                        			 url("../graphics/fpo/fpo-tooltip-card08.jpg")
                        			 url("../graphics/fpo/fpo-tooltip-card09.jpg")
                        			 url("../graphics/fpo/fpo-tooltip-card10.jpg");
                        }
                        
                        	#category-selector ul li a:hover .tooltip-card {
    							display: flex;
    							flex-direction: column-reverse;
    						}
                        
                        	#category-selector ul li a:hover .tooltip-card.FPO-01 { background: url("../graphics/fpo/fpo-tooltip-card01.jpg"); background-size: contain; }
                        	#category-selector ul li a:hover .tooltip-card.FPO-02 { background: url("../graphics/fpo/fpo-tooltip-card02.jpg"); background-size: contain; }
                        	#category-selector ul li a:hover .tooltip-card.FPO-03 { background: url("../graphics/fpo/fpo-tooltip-card03.jpg"); background-size: contain; }
                        	#category-selector ul li a:hover .tooltip-card.FPO-04 { background: url("../graphics/fpo/fpo-tooltip-card04.jpg"); background-size: contain; }
                        	#category-selector ul li a:hover .tooltip-card.FPO-05 { background: url("../graphics/fpo/fpo-tooltip-card05.jpg"); background-size: contain; }
                        	#category-selector ul li a:hover .tooltip-card.FPO-06 { background: url("../graphics/fpo/fpo-tooltip-card06.jpg"); background-size: contain; }
                        	#category-selector ul li a:hover .tooltip-card.FPO-07 { background: url("../graphics/fpo/fpo-tooltip-card07.jpg"); background-size: contain; }
                        	#category-selector ul li a:hover .tooltip-card.FPO-08 { background: url("../graphics/fpo/fpo-tooltip-card08.jpg"); background-size: contain; }
                        	#category-selector ul li a:hover .tooltip-card.FPO-09 { background: url("../graphics/fpo/fpo-tooltip-card09.jpg"); background-size: contain; }
                        	#category-selector ul li a:hover .tooltip-card.FPO-10 { background: url("../graphics/fpo/fpo-tooltip-card10.jpg"); background-size: contain; }
                        
                           	#category-selector ul li a:hover .tooltip-card .marquee-tooltip {
								display: flex;
                            		align-items: center;
                            		justify-content: center;
                        		position: absolute;
                        			bottom: calc(25px + 5px);
                        			left: 0;
                        		width: 300px;
                            	z-index: 1;
                            }
                        
                            	#category-selector ul li a:hover .tooltip-card .marquee-tooltip .frame-text {
                            		height: 15px;
                            		overflow: hidden;
                            		position: absolute;
                            		width: 100%;
                            	}
                        
                            		#category-selector ul li a:hover .tooltip-card .marquee-tooltip .frame-text div {
                            			animation: marquee 10s linear infinite;
                            			overflow: hidden;
                            			position: absolute; 
                            			width: 200%;
                            		}
                            
                            			#category-selector ul li a:hover .tooltip-card .marquee-tooltip .frame-text div span {
                            				display: flex;
                            					align-items: center;
                            				float: left;
                            				width: 50%;
                            			}
                            
                            				@keyframes marquee {
                                              0% { left: 0; }
                                              100% { left: -100%; }
                                            }
                            
                                    		#category-selector ul li a:hover .tooltip-card .marquee-tooltip .frame-text div span p {
                                    			color: #FFF;
                                    			display: flex;
                                    			font-family: 'jetbrains_monoextralight';
                                    			font-size: 15px;
                                    			line-height: 15px;
                                    			text-transform: uppercase;
                                    			white-space: nowrap;
                                    		}

				#category-selector ul li a .category,
				#category-selector ul li a .category sup,
				#category-selector ul li a .svg-menu-open { transition: all 0.25s; }

    				#category-selector ul li a:hover .category,
    				#category-selector ul li a:hover .category sup,
    				#category-selector ul li a:hover .svg-ui-menu-open { color: #FFF; }

					#category-selector ul li a .category sup {;
    					color: #929292;
    					display: inline-block;
                		font-family: 'jetbrains_monoextralight';
    					font-size: 15px;
    					letter-spacing: 1px;
    					margin-left: 8px;
                    	vertical-align: top;
                    	position: relative;
                    		top: 0.3em;
					}

        			#category-selector ul li a .svg-ui-menu-open {
        				color: #929292;
        				font-size: 20px;
        				margin-right: 25px;
        			}

/* ------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------- */
/* -------------------------------- PROJECT GALLERY ------------------------------ */
/* ------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------- */

#project-gallery { background: #000; }

	#project-gallery.padding-top-500 { padding-top: calc(250px + 15px); } /*--- PROJECT PAGE + 15PX ADDED FOR DEV MODE BANNER---*/

	#project-gallery .meta {
		display: flex;
			flex-direction: row;
		margin: 25px 0 0 25px;
		width: calc(100% - 50px);
	}

		#project-gallery .meta .quadrant {
			display: flex;
				flex-direction: column;
			width: 100%;
		}

			#project-gallery .meta .quadrant .sub-quadrant { width: 100%; }
		
				#project-gallery .meta .quadrant:first-child .sub-quadrant:last-child { display: none; }
	
        		#project-gallery .meta .quadrant .sub-quadrant h3 {
        			color: #FFF;
        			font-family: 'jetbrains_monoextralight';
        			font-size: 15px;
        			line-height: 25px;
        			text-transform: uppercase;
        		}
        
        		#project-gallery .meta .quadrant .sub-quadrant li {
        			color: #929292;
        			font-family: 'jetbrains_monothin';
        			font-size: 15px;
        			line-height: 25px;
        			text-transform: uppercase;
        		}
        
        			#project-gallery .meta .quadrant .sub-quadrant ul > :not(:first-child) { margin-top: 5px; }
        			#project-gallery .meta .quadrant .sub-quadrant:last-child ul li:first-child { margin-top: 5px; }
        
	#project-gallery .inset-2x1,
	#project-gallery .inset-2x2 { padding-bottom: 250px; }
    
    	#project-gallery .inset-2x1 a.block,
    	#project-gallery .inset-2x2 a.block,
    	#project-gallery .inset-2x2 a.block-full {
    		cursor: pointer;
    		display: flex;
    			flex-direction: row;
    			justify-content: space-between;
    		position: relative;
    	}

    		#project-gallery .inset-2x1 .block-set a.block .tag,
    		#project-gallery .inset-2x1-plus-mini .block-set a.block .tag {
    			background: #FFF;
    			border-radius: 20px;
    			display: inline-block;
    			padding: 10px;
    			position: absolute;
    				left: 15px;
    				top: 15px;
    		}
    
    		#project-gallery .inset-2x2 .block-set a.block-full .tag {
    			background: #FFF;
    			border-radius: 20px;
    			display: inline-block;
    			padding: 10px;
    			position: absolute;
    				left: 15px;
    				top: 15px;
    		}

        		#project-gallery .inset-2x1 .block-set a.block .tag p,
        		#project-gallery .inset-2x2 .block-set a.block-full .tag p {
        			color: #000;
        			font-family: 'jetbrains_monosemibold';
        			font-size: 10px;
        			text-transform: uppercase;
        		}

			#project-gallery .inset-2x1 .block-set a.block .ibm-stripe { width: 100%; }

				#project-gallery .inset-2x1 .block-set a.block .ibm-stripe.blue-100 { background: #0F62FE; }
				#project-gallery .inset-2x1 .block-set a.block .ibm-stripe.blue-80 { background: #4F8CFF; }
				#project-gallery .inset-2x1 .block-set a.block .ibm-stripe.blue-60 { background: #7AA8FF; }
				#project-gallery .inset-2x1 .block-set a.block .ibm-stripe.blue-40 { background: #D5E8FF; }
				#project-gallery .inset-2x1 .block-set a.block .ibm-stripe.blue-20 { background: #FFF; }

    		#project-gallery .inset-2x1 .block-set {
    			display: flex;
    				flex-direction: column;
    			margin-left: 25px;
    			width: calc(100% - 50px);
    		}
    
        		#project-gallery .inset-2x1 .block-set .block {
        			height: 50vw;
        			width: 100%;
        		}

        		#project-gallery .inset-2x1 .block-set a.block .svg-logo-intuit { 
					background: #3588DF;
					display: flex;
						align-items: center;
						justify-content: center;
					font-size: 30px;
					width: 100%;
				}

        		#project-gallery .inset-2x1 .block-set a.block.intuit-photo-ipad-dashboard {
					background-image: url("../graphics/intuit/intuit-photo-ipad-dashboard.jpg");
						background-color: #000;
						background-position: center center;
						background-repeat: no-repeat;
						background-size: 100%;
				}

				#project-gallery .inset-2x1 .block-set a.block .svg-logo-ibm {
					background: #0F62FE;
					color: #FFF;
					display: flex;
						align-items: center;
						justify-content: center;
					font-size: 40px;
					width: 100%;
				}
                    
    		#project-gallery .inset-2x2 .block-set {
    			display: flex;
    				flex-direction: column;
    			position: relative;
    			width: 100%;
    		}
    
        		#project-gallery .inset-2x2 .block-set a.block {
        			background: #565656;
        			height: 50vw;
        			width: 100%;
        			z-index: 1;
        		}
        
        		#project-gallery .inset-2x2 .block-set a.block-full {
        			background: #747474;
        			height: 50vw;
        			width: 100%;
        		}

/* ----------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------- */
/* -------------------------------- FACTURED TYPOGRAPHY ------------------------------ */
/* ----------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------- */

#fractured-typography {
	padding: 250px 20px 100px 20px;
	position: relative;
}
	#fractured-typography.ibm { background: #0F62FE; }
	#fractured-typography.intuit { background: #3588DF; }
	
	#fractured-typography .stacked-words {
		display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
		width: 100%;
	}
	
		#fractured-typography .stacked-words .words { }
		
		#fractured-typography .stacked-words .words .negative,
		#fractured-typography .stacked-words .words .positive {
			font-family: 'jetbrains_monosemibold';
			font-size: 10vw;
			line-height: 11vw;
			text-stroke: 1.25px #B8D5F4;
				-webkit-text-stroke: 1.25px #B8D5F4;
			text-transform: uppercase;
			word-break: break-all;
		}
		
		#fractured-typography .stacked-words .words.ibm .negative { color: #0F62FE; }
		#fractured-typography .stacked-words .words.ibm .positive { color: #B8D5F4; }
		
		#fractured-typography .stacked-words .words.intuit .negative { color: #3588DF; }
		#fractured-typography .stacked-words .words.intuit .positive { color: #B8D5F4; }

/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */
/* -------------------------------- MOSAIC ------------------------------ */
/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */

#mosaic{ background: #000; }
		
	#mosaic .grid {
		display: flex;
			flex-flow: colum-wrap;
			flex-wrap: wrap;
		position: relative;
	}

		#mosaic .grid .quadrant {
			display: flex;
				flex-direction: row;
				flex-wrap: wrap;
			width: 100%; 
		}

			#mosaic .grid .quadrant .box {
				aspect-ratio: 1 / 1;
				display: flex;
					align-items: center;
					justify-content: center;
			}
		
				#mosaic .grid .quadrant:nth-child(1) .box:nth-child(1) { background: #CD171E; height: 50%; width: 50%; }
				#mosaic .grid .quadrant:nth-child(1) .box:nth-child(2) { background: #transparent; height: 50%; width: 50%; }
				#mosaic .grid .quadrant:nth-child(1) .box:nth-child(3) { background: #transparent; height: 50%; width: 50%; }
				#mosaic .grid .quadrant:nth-child(1) .box:nth-child(4) { background: #B8D5F4; height: 50%; width: 50%; }
				#mosaic .grid .quadrant:nth-child(2) .box:nth-child(1) { width: 100%; }
				#mosaic .grid .quadrant:nth-child(3) .box:nth-child(1) { background: #transparent; width: 0%; }
				#mosaic .grid .quadrant:nth-child(3) .box:nth-child(2) { background: #FF8426; width: 100%; }
				#mosaic .grid .quadrant:nth-child(4) .box:nth-child(1) { background: #3588DF; width: 50%; }
				#mosaic .grid .quadrant:nth-child(4) .box:nth-child(2) { background: #0050A4; width: 50%; }

				#mosaic .grid .quadrant:nth-child(2) .box:nth-child(1) {
					background: url("../graphics/intuit/intuit-isometic-dashboard.png");
						background-color: #0050A4;
						background-size: 100%;
				}

				#mosaic .grid .quadrant .box p {
                	color: #FFF;
                	font-family: 'jetbrains_monoextralight';
                	font-size: 15px;
                	line-height: 25px;
                	text-transform: uppercase;
		}

/* ----------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------- */
/* -------------------------------- INSET GALLERY ------------------------------ */
/* ----------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------- */

#inset-gallery {
    position: relative;
}

		#inset-gallery.ibm { background: #0F62FE; }
		#inset-gallery.intuit { background: #3588DF; }

	#inset-gallery .block-spread {
		display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		margin: 0 0 0 25px;
		width: calc(100% - 50px);
	}

		#inset-gallery .block-spread .card-stack {
			display: flex;
				flex-direction: column;
			width: 100%;
		}

			#inset-gallery .block-spread .card-stack:nth-child(3) { margin-bottom: 0; }
			#inset-gallery .block-spread .card-stack:nth-child(4) { margin-bottom: 250px; }

		#inset-gallery .block-spread .card-stack ul {
			display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
		}
		
		#inset-gallery .block-spread .card-stack ul.half { width: 100%; }
		#inset-gallery .block-spread .card-stack ul.full { width: 100%; }
		
		#inset-gallery .block-spread .card-stack ul { margin-left: 0; }
		
			#inset-gallery .block-spread .card-stack ul li {
				display: flex;
					flex-direction: column;
					justify-content: space-between;
				margin-bottom: 25px;
				position: relative;
			}
		
		#inset-gallery .block-spread .card-stack ul li.ibm { background: #1454CD; }
		#inset-gallery .block-spread .card-stack ul li.intuit { background: #0050A4; }
		
		#inset-gallery .block-spread .card-stack:nth-child(4) ul:last-child li { margin-bottom: 0; }
		
		#inset-gallery .block-spread .card-stack ul li.small {
				height: 175px;
				width: 100%;
		}
		
		#inset-gallery .block-spread .card-stack ul li.med {
				height: 175px;
				width: 100%;
				margin-right: 0;
		}
		
		#inset-gallery .block-spread .card-stack ul li.long {
				height: 175px;
				width: 100%;
		}

				#inset-gallery .block-spread .card-stack ul li:after {
					content:'';
					border-top: 20px solid #0F62FE;
					border-left: 20px solid transparent;
					position: absolute;
						right: -2px;
						top: -1px; 
   				}

					#inset-gallery .block-spread .card-stack ul li.ibm:after { border-top: 20px solid #0F62FE; }
					#inset-gallery .block-spread .card-stack ul li.intuit:after { border-top: 20px solid #3588DF; }
		
				#inset-gallery .block-spread .card-stack ul li .box-id {
					display: flex;
						align-items: center;
						justify-content: center;
					height: 50px;
					width: 50px;
				}
		
					#inset-gallery .block-spread .card-stack ul li .box-id.ibm { background: #FFF; }
					#inset-gallery .block-spread .card-stack ul li .box-id.intuit { background: #FF8426; }

				#inset-gallery .block-spread .card-stack ul li .box-id p {
                	color: #0F62FE;
                	font-family: 'jetbrains_monosemibold';
                	font-size: 17px;
                	line-height: 30px;
                	text-transform: uppercase;
                }

					#inset-gallery .block-spread .card-stack ul li .box-id.ibm p { color: #0F62FE; }
                	#inset-gallery .block-spread .card-stack ul li .box-id.intuit p { color: #FFF; }
		
				#inset-gallery .block-spread .card-stack ul li .meta {
					margin: 0 15px 15px 15px;
				}

    				#inset-gallery .block-spread .card-stack ul li .meta h3 {
                    	color: #FFF;
                    	font-family: 'jetbrains_monoextralight';
                    	font-size: 15px;
                    	line-height: 20px;
						margin-bottom: 5px;
                    	text-transform: uppercase;
                    }
		
						#inset-gallery .block-spread .card-stack ul li.ibm .meta h3 { color: #FFF; }
    					#inset-gallery .block-spread .card-stack ul li.intuit .meta h3 { color: #FFF; }
		
    					#inset-gallery .block-spread .card-stack ul li.small .meta h3 { width: calc(100% - 25%); }
    					#inset-gallery .block-spread .card-stack ul li.large .meta h3 { width: calc(75% - 10%); }
    
    				#inset-gallery .block-spread .card-stack ul li .meta p {
                    	color: rgba(255,255,255,0.75);
            			font-family: 'jetbrains_monothin';
            			font-size: 15px;
            			letter-spacing: -0.5px;
            			line-height: 22px;
                    }
		
						#inset-gallery .block-spread .card-stack ul li.ibm .meta p { color: rgba(255,255,255,0.75); }
    					#inset-gallery .block-spread .card-stack ul li.intuit .meta p { color: rgba(255,255,255,0.75); }
    
    #inset-gallery .canvas {
        display: flex;
        	align-items: center;
        	justify-content: center;
    	height: 75vw;
    	position: relative;
    }
    
    	#inset-gallery .canvas.blue { background: #0F62FE; }
    	
		#inset-gallery .canvas h2 {
			color: #FFF;
			font-family: 'jetbrains_monoextralight';
			font-size: 40px;
			letter-spacing: -2px;
			line-height: 50px;
		}
    
		#inset-gallery .canvas h2::after {
			color: #00FFFF;
			content: "_";
			font-family: 'jetbrains_monoextralight';
			font-size: 60px;
			line-height: 80px;
		}

	#inset-gallery .block-set {
		display: flex;
			flex-direction: column;
		width: 100%;
	}

    	#inset-gallery .block-set .inset-1x1 {
    		display: flex;
    			align-items: center;
    			justify-content: center;
    		height: 75vw;
    		width: 100%;
    	}
    
    		#inset-gallery .block-set .inset-1x1.first { background: #747474; left: 0; }
    		#inset-gallery .block-set .inset-1x1.second { background: #929292; right: 0; }
    		#inset-gallery .block-set .inset-1x1.third { background: #747474; left: 0; }
    		#inset-gallery .block-set .inset-1x1.fourth { background: #929292; right: 0; }
    
				#inset-gallery .block-set .inset-1x1.first-ibm { background: #FFF; left: 0; }
				#inset-gallery .block-set .inset-1x1.second-ibm { background: #BAD9FF; right: 0; }

					#inset-gallery .block-set .inset-1x1.first-ibm .launcher,
					#inset-gallery .block-set .inset-1x1.second-ibm .message-card {
						background-size: contain !important;
					}

					#inset-gallery .block-set .inset-1x1.first-ibm .launcher {
						background: url("../graphics/ibm/launcher.png");
						border-radius: 5px;
						height: 65px;
						width: 213px;
					}

					#inset-gallery .block-set .inset-1x1.second-ibm .message-card {
						background: url("../graphics/ibm/message-card.png");
						border-radius: 5px;
						height: 178px;
						width: 347px;
					}

				#inset-gallery .block-set .inset-1x1.first-intuit { background: #FFF; left: 0; }
    			#inset-gallery .block-set .inset-1x1.second-intuit { background: #B8D5F4; right: 0; }

					#inset-gallery .block-set .inset-1x1.first-intuit .intuit-couple-doing-taxes,
					#inset-gallery .block-set .inset-1x1.second-intuit .intuit-pictograms {
						background-size: cover !important;
					}

					#inset-gallery .block-set .inset-1x1.first-intuit .intuit-couple-doing-taxes {
						background: url("../graphics/intuit/intuit-photo-couple-doing-taxes.jpg");
						height: 100%;
						width: 100%;
					}

					#inset-gallery .block-set .inset-1x1.second-intuit .intuit-pictograms {
						background: url("../graphics/intuit/intuit-pictograms.png");
						height: 68px;
						width: 310px;
					} 

	#inset-gallery .carousel {
		background: #747474;
		height: 50vw;
		width: 100%;
	}

    	#inset-gallery .carousel {
        	background: #565656;
        	display: flex;
        		align-items: center;
        		justify-content: center;
        		flex-direction: row;
        		justify-content: space-between;
        	height: 75vh;
        }
        
        	#inset-gallery .carousel a {
        		background: #FFF;
        		display: flex;
        			align-items: center;
        			justify-content: center;
        		height: 100px;
        		width: 50px;
        	}
        
        		#inset-gallery .carousel a:hover {
        			background: #FFF;
        			transition: all 0.25s;
        		}
        
        			#inset-gallery .carousel a.svg-ui-arrow {
        				color: #000;
        				font-size: 12px;
        			}
        
        				#inset-gallery .carousel a.svg-ui-arrow:first-child { transform: rotate(180deg); }

		#inset-gallery .default-full {
			padding: 25px 0;
			width: 100%;
		}

			#inset-gallery .default-full.ibm { background: linear-gradient(to top right, #0F62FE, #A625FF); }
			#inset-gallery .default-full.intuit { background: #6FB0F6; }

			#inset-gallery .default-full .ibm,
			#inset-gallery .default-full .intuit {
				aspect-ratio: 4 / 3;
				background-position: top center;
				background-repeat: no-repeat;
				background-size: contain;
				border-radius: 15px;
				height: auto;
				margin-left: 25px;
				width: calc(100% - 50px);
			}

			#inset-gallery .default-full .ibm.ibm-cmaas-modulator { background-image: url("../graphics/ibm/cmaas-modulator.jpg"); }
		
			#inset-gallery .default-full .intuit.intuit-photo-billboard { background-image: url("../graphics/intuit/intuit-photo-billboard.jpg"); background-position: center; background-size: cover; }

        #inset-gallery .default-1x1x2 {
        	background: #222;
        	display: flex;
        		flex-direction: column;
        	width: 100%;
        }

			#inset-gallery .inset-1x1.ibm-01 { background: #D5E8FF; }
        	#inset-gallery .inset-1x1.ibm-02 { background: #EDF4FF; }
        	#inset-gallery .inset-1x2.ibm-03 { background: #BAD9FF; }

			#inset-gallery .inset-1x1.intuit-01 { background: #6FB0F6; }
        	#inset-gallery .inset-1x1.intuit-02 { background: #B8D5F4; }
        	#inset-gallery .inset-1x2.intuit-03 { background: #FFF; }

        	#inset-gallery .default-1x1x2 .stacked-vertical-1x1 {
              	display: flex;
        			flex-direction: column;
        		width: 100%;
        	}

        		#inset-gallery .default-1x1x2 .stacked-vertical-1x1 .inset-1x1 {
        			aspect-ratio: 1 / 1;
        			display: flex;
        				align-items: center;
        				justify-content: center;
        			width: 100%;
            	}

            		#inset-gallery .default-1x1x2 .stacked-vertical-1x1 .inset-1x1:first-child .cmaas-spec {
            			aspect-ratio: 1 / 1;
        				background: url("../graphics/ibm/cmaas-spec.png");
                			background-position: top center;
                    		background-repeat: no-repeat;
                			background-size: contain;
        				height: auto;
        				width: calc(100% - 50px);
        			}

            		#inset-gallery .default-1x1x2 .stacked-vertical-1x1 .inset-1x1:last-child .ai-chatter-box {
						aspect-ratio: 167 / 278;
        				background: url("../graphics/ibm/ai-chatter-box.png");
                			background-position: top center;
                    		background-repeat: no-repeat;
                			background-size: contain;
        				height: auto;
        				width: calc(52% - 50px);
        			}

					#inset-gallery .default-1x1x2 .stacked-vertical-1x1 .inset-1x1 .intuit-icon-4xgrid,
					#inset-gallery .default-1x1x2 .stacked-vertical-1x1 .inset-1x1 .intuit-photo-keep-calm-inside,
					#inset-gallery .default-1x1x2 .stacked-vertical-1x1 .inset-1x1 .intuit-photo-keep-calm-outside,
					#inset-gallery .default-1x1x2 .stacked-vertical-1x1 .inset-1x1 .intuit-photo-retail {
						aspect-ratio: 1 / 1;
						background-position: center;
						background-size: contain;
						height: auto;
						width: 100%;
					}

					#inset-gallery .default-1x1x2 .stacked-vertical-1x1 .inset-1x1 .intuit-icon-4xgrid { background-image: url("../graphics/intuit/intuit-icon-4xgrid.png"); }
					#inset-gallery .default-1x1x2 .stacked-vertical-1x1 .inset-1x1 .intuit-photo-keep-calm-inside { background-image: url("../graphics/intuit/intuit-photo-keep-calm-inside.jpg"); }
					#inset-gallery .default-1x1x2 .stacked-vertical-1x1 .inset-1x1 .intuit-photo-keep-calm-outside { background-image: url("../graphics/intuit/intuit-photo-keep-calm-outside.jpg"); }
					#inset-gallery .default-1x1x2 .stacked-vertical-1x1 .inset-1x1 .intuit-photo-retail { background-image: url("../graphics/intuit/intuit-photo-retail.jpg"); }

        	#inset-gallery .default-1x1x2 .inset-1x2 {
        		display: flex;
        			align-items: center;
        			justify-content: center;
        		padding: 25px 0;
        		width: 100%;
        	}

            		#inset-gallery .default-1x1x2 .inset-1x2 .email-notification {
            			aspect-ratio: 301 /691;
        				background: url("../graphics/ibm/email-confirmation.jpg");
                			background-position: top center;
                    		background-repeat: no-repeat;
                			background-size: contain;
                		border-radius: 15px;
        				width: calc(100% - 50px);
        			}
        
        #inset-gallery .default-1x1 {
        	background: #222;
        	display: flex;
        		flex-direction: row;
        	width: 100%;
        }
        
            #inset-gallery .default-1x1 .stacked-horizontal-1x1 {
              	display: flex;
        			flex-direction: column;
        		width: 100%;
        	}
            
            		#inset-gallery .default-1x1 .stacked-horizontal-1x1 .inset-1x1 {
            			display: flex;
            				align-items: center;
            				justify-content: center;
            			width: 100%;
                	}
                
                	#inset-gallery .default-1x1 .stacked-horizontal-1x1 .inset-1x1 .ibm-logo-dissection {
                		aspect-ratio: 1 / 1;
        				background: url("../graphics/ibm/ibm-logo-dissection.jpg");
							background-position: top center;
                    		background-repeat: no-repeat;
                			background-size: contain;
        				height: auto;
        				width: 100%;
        			}
        
        			#inset-gallery .default-1x1 .stacked-horizontal-1x1 .inset-1x1 .ibm-mini-grid {
                		aspect-ratio: 1 / 1;
        				background: url("../graphics/ibm/ibm-mini-grid.jpg");
							background-position: top center;
                    		background-repeat: no-repeat;
                			background-size: contain;
        				height: auto;
        				width: 100%;
        			}

/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* -------------------------------- SERVICES ------------------------------- */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */

#services {
	background: #000;
	padding-bottom: 250px;
}

	#services ul {
    	margin-left: 25px;
    	width: calc(100% - 25px);
	}

		#services ul li {
			border-bottom: 1px solid #565656;
			display: flex;
    		flex-direction: column;
    		padding: 50px 0;
    		width: 100%;
		}

    		#services ul li:first-child { border-top: 1px solid #565656; }

			#services ul li .quadrant {
				display: flex;
					flex-direction: column;
					justify-content: space-between;
				position: relative;
				width: calc(100% - 25px);
			}

				#services ul li .quadrant h2 {
                	color: #FFF;
                	font-family: 'butlerregular';
                	font-size: 40px;
                	line-height: 40px;
                	margin: -6px 0 250px 0;
				}

				#services ul li .quadrant .specs { margin-bottom: 44px; }

					#services ul li .quadrant .specs p {
            			color: #929292;
            			font-family: 'jetbrains_monoextralight';
            			font-size: 15px;
            			line-height: 25px;
					}

				#services ul li .quadrant .mini-grid {
					display: flex;
						flex-wrap: wrap;
					width: 100%;
				}

					#services ul li .quadrant .mini-grid .box {
						aspect-ratio: 1 / 1;
						border-left: 1px solid #565656;
						border-top: 1px solid #565656;
						box-sizing: border-box;
            			color: #FFF;
            			display: flex;
							align-items: center;
							justify-content: center;
            			font-family: 'jetbrains_monothin';
            			font-size: 15px;
            			line-height: 15px;
            			width: 14.28%;
					}

						#services ul li .quadrant .mini-grid .box:nth-child(1n+22) { border-bottom: 1px solid #565656; }

						#services ul li .quadrant .mini-grid .box:nth-child(7),
						#services ul li .quadrant .mini-grid .box:nth-child(14),
						#services ul li .quadrant .mini-grid .box:nth-child(21) { border-right: 1px solid #565656; }

						#services ul li .quadrant .mini-grid .box:last-child { background: #565656; }

							#services ul li .quadrant .mini-grid .box:last-child .svg-ui-x-mask-4-4 {
								color: #FFF;
                    			font-size: 9vw;
							}

/* ----------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------- */
/* -------------------------------- SELECTOR MGS ------------------------------- */
/* ----------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------- */

#selector-mgs {
	background: #222222;
	padding: 50px 0;
	position: relative;
}

	#selector-mgs .meta {
		display: flex;
			flex-direction: column;
			justify-content: space-between;
		height: 412px;
		margin-left: 25px;
		padding-bottom: 50px;
		width: 50%;
	}

		#selector-mgs .meta .quadrant { }

			#selector-mgs .meta .quadrant h2 {
				color: #FFF;
				font-family: 'jetbrains_monoextralight';
				font-size: 15px;
				line-height: 25px;
				text-transform: uppercase;
			}

			#selector-mgs .meta .quadrant p {
				color: #929292;
				font-family: 'jetbrains_monoextralight';
				font-size: 15px;
				line-height: 25px;
				text-transform: uppercase;
			}

	#selector-mgs .selector {
		height: 537px;
		margin-left: 25px;
		position: absolute;
			top: 0;
		width: calc(100% - 50px);
	}

		#selector-mgs .selector .current {
			aspect-ratio: 16 / 9;
			background: #565656;
			border: 1px solid #FFF;
			box-sizing: border-box;
			position: absolute;
				bottom: 0;
				right: 0;
			width: 50%;
			z-index: 1;
		}

    		#selector-mgs .selector .current p {
    			color: #FFF;
    			display: flex;
    				align-items: center;
    				justify-content: center;
    			height: 50px;
    			font-family: 'jetbrains_monoextralight';
    			font-size: 15px;
    			position: absolute;
    				bottom: 0;
    				left: 0;
    			text-transform: uppercase;
    			width: 100%;
    		}
    
    		#selector-mgs .selector .current .controller {
    			display: flex;
    				flex-direction: row;
    			height: 100%;
    			position: relative;
    			width: 100%;
    		}
    
    			#selector-mgs .selector .current .controller a.svg-ui-arrow {
    				background: #FFF;
    				color: #000;
    				display: flex;
    					align-items: center;
    					justify-content: center;
    				font-size: 12px;
    				height: 50px;
    				position: absolute;
    					bottom: 0;
    					right: 0;
    				width: 50px;
    			}
    
    			#selector-mgs .selector .current .controller a.svg-ui-arrow:first-child {
    				left: 0;
    				transform: rotate(180deg);
    			}
    
		#selector-mgs .selector ul.parent {
			display: flex;
				flex-direction: row-reverse;
			overflow-x: auto;
			position: absolute;
				bottom: 0;
				right: 50%;
			width: 100%
		}

           #selector-mgs .selector ul.parent::-webkit-scrollbar {  display: none; }

			#selector-mgs .selector ul.parent li {
				flex: 0 0 auto;
				width: 50%; 
			}
				
				#selector-mgs .selector ul.parent li a {
					background: #000;
					border: 1px solid #222;
					display: flex;
						flex-direction: row;
					height: 50px;
					width: 100%;
            	}
                        
            		#selector-mgs .selector ul.parent li a:hover { border: 1px solid #FFF; }
            
            		#selector-mgs .selector ul.parent li a p {
            			background: #565656;
            			color: #929292;
            			display: flex;
            				align-items: center;
            				justify-content: center;
            			font-family: 'jetbrains_monoextralight';
            			font-size: 15px;
            			height: 50px;
            			width: 50px;
            			text-transform: uppercase;
            			transition: all 0.25s;
            		}
            
                		#selector-mgs .selector ul.parent li a:hover p {
                			background: #FFF;
                			color: #000;
                		}

		#selector-mgs .selector ul.child {
			display: flex;
				flex-direction: column-reverse;
			height: 539px;
			overflow-x: auto;
			position: absolute;
				bottom: -2px;
				right: 0;
			width: 50%;
		}

			#selector-mgs .selector ul.child::-webkit-scrollbar {  display: none; }

			#selector-mgs .selector ul.child li:first-child a { visibility: hidden; }
				#selector-mgs .selector ul.child li a {
					aspect-ratio: 16 / 9;
					background: #000;
					border: 1px solid #222;
					display: flex;
						flex-direction: row;
					position: relative;
            	}
            
            	#selector-mgs .selector ul.child li a:last-child { border-top: 1px solid #000; }
                        
					#selector-mgs .selector ul.child li a:hover { border: 1px solid #FFF; }

            		#selector-mgs .selector ul.child li a p {
            			background: #565656;
            			color: #929292;
            			display: flex;
            				align-items: center;
            				justify-content: center;
            			font-family: 'jetbrains_monosemibold';
            			font-size: 15px;
            			height: 50px;
            			position: absolute;
            				bottom: 0;
            				left: 0;
            			text-transform: uppercase;
						transition: all 0.25s;
            			width: 50px;
            		}
            
                		#selector-mgs .selector ul.child li a:hover p {
                			background: #FFF;
                			color: #000;
                		}
                
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
/* -------------------------------- SELECTOR TIKTOK ------------------------------- */
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */

#selector-tiktok {
	background: #000;
	padding-bottom: 500px;
}

	#selector-tiktok ul {
		display: flex;
			gap: 50px;
		overflow: auto;
		padding: 0 25px;
	}

		#selector-tiktok ul::-webkit-scrollbar {  display: none; }

		#selector-tiktok ul li { }

    		#selector-tiktok ul li a {
    			background: #222222; 
    			border-radius: 25px;
        		display: flex;
        			flex: 0 0 auto;
        			flex-direction: column;
        			justify-content: space-between;
    			height: 370px;
    			padding: 25px;
    			width: 180px;
    		}
    
    			#selector-tiktok ul li  a:hover {
    				background: #565656;
    			}
    
    			#selector-tiktok ul li:last-child { margin-right: 0; }
    
    			#selector-tiktok ul li .tiktok { position: relative; }
    
        			#selector-tiktok ul li .svg-avatar-tiktok {
        				color: #FFF;
        				font-size: 25px;
        				position: absolute;
        			}
        
    				#selector-tiktok ul li .svg-avatar-tiktok.white,
    				#selector-tiktok ul li .svg-avatar-tiktok.cyan,
    				#selector-tiktok ul li .svg-avatar-tiktok.red { position: absolute; }
        
        			#selector-tiktok ul li .svg-avatar-tiktok.white {
        				color: #FFF;
        				margin: 1.5px 0 0 1.5px;
        				z-index: 1;
        			}
        
        			#selector-tiktok ul li .svg-avatar-tiktok.cyan {
                        color: #00FFFF;
                        z-index: 0;
                    }
        
        			#selector-tiktok ul li .svg-avatar-tiktok.red {
                        color: #FF0000;
                        margin: 3px 0 0 3px;
                        z-index: 0;
            		}
    
    			#selector-tiktok ul li .meta { }
    
            		#selector-tiktok ul li .meta h3 {
                		color: #929292;
                		font-family: 'jetbrains_monoextralight';
                		font-size: 15px;
                		line-height: 25px;
                		text-transform: uppercase;
                	}

/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* -------------------------------- SELECTOR YOUTUBE ------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */

#selector-youtube {
	background: #000;
	position: relative;
}

	#selector-youtube a {
		aspect-ratio: 16 / 9;
		background: #FF0000;
		cursor: pointer;
		display: flex;
			align-items: center;
			justify-content: center;
	}

    	#selector-youtube a .svg-avatar-youtube {
    		color: #FFF;
    		font-size: 35px;
    		transition: all 0.25s;
    	}
    
    		#selector-youtube a:hover .svg-avatar-youtube { font-size: 45px; }
    
    	#selector-youtube a .meta {
    		display: flex;
    			flex-direction: row;
    		position: absolute;
    			bottom: 25px;
    			left: 25px;
    		width: calc(100% - 50px);
    	}
    
    		#selector-youtube a .meta .quadrant { width: 100%; }
    
        		#selector-youtube a .meta .quadrant h3,
        		#selector-youtube a .meta .quadrant p {
        			color: #FFF;
        			font-family: 'jetbrains_monoextralight';
        			font-size: 15px;
        			line-height: 25px;
        			text-transform: uppercase;
        		}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------ */
/* -------------------------------- METRIC GALLERY ------------------------------ */
/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------ */

#metric-gallery { 
	background: #000;
	padding: 250px 0;
}

	#metric-gallery h2 {
    	color: #FFF;
    	font-family: 'butlerregular';
    	font-size: 40px;
    	line-height: 50px;
    	margin: 0 0 25px 25px;
    	width: calc(100% - 50px);
    }

	#metric-gallery .panel {
		display: flex;
			flex-direction: column;
		height: 100%;
		margin-left: 25px;
		width: calc(100% - 25px);
	}

		#metric-gallery .panel .card-metric {
			display: flex;
				flex-direction: column;
				justify-content: space-between;
			width: calc(100% - 25px);
		}

    		#metric-gallery .panel .card-metric .card {
    			border-bottom: 1px solid #565656;
				border-top: 1px solid #565656;
    			display: flex;
    				flex-direction: column;
    				justify-content: space-between;
    			height: 50vw;
    			padding: 25px 0;
    			position: relative;
    		}
    
    		#metric-gallery .panel .card-metric .card:first-child { margin-bottom: -1px; }
    
    			#metric-gallery .panel .card-metric .card h2 {
    				color: #FFF;
    				font-family: 'jetbrains_monoextralight';
    				font-size: 15px;
    				line-height: 15px;
    				margin: 0;
    				text-transform: uppercase;
    			}
    
    			#metric-gallery .panel .card-metric .card .quadrant h3 {
    				color: #929292;
    				font-family: 'jetbrains_monoextralight';
    				font-size: 15px;
    				line-height: 25px;
    			}
    
    			#metric-gallery .panel .card-metric .card .value {
    				position: absolute;
    					bottom: 25px;
    					right: 0;
    			}
    
    				#metric-gallery .panel .card-metric .card .value p {
        				color: #FFF;
        				font-family: 'butlerregular';
        				font-size: 40px;
        				line-height: 50px;
        			}

		#metric-gallery .panel .card-metric-xl {
			border-bottom: 1px solid #565656;
			display: flex;
				flex-direction: column;
			width: calc(100% - 25px);
		}

    		#metric-gallery .panel .card-metric-xl .card {
    			display: flex;
    				flex-direction: column;
    				justify-content: space-between;
    			height: 50vw;
    			padding: 25px 0;
    			position: relative;
    		}
    
    			#metric-gallery .panel .card-metric-xl .card h2 {
    				color: #FFF;
    				font-family: 'jetbrains_monoextralight';
    				font-size: 15px;
    				line-height: 17px;
    				margin: 0;
    				text-transform: uppercase;
    			}
    
    			#metric-gallery .panel .card-metric-xl .card .quadrant h3 {
    				color: #929292;
    				font-family: 'jetbrains_monoextralight';
    				font-size: 15px;
    				line-height: 25px;
    			}
    
    			#metric-gallery .panel .card-metric-xl .card .value {
    				position: absolute;
    					bottom: 25px;
    					right: 0;
    			}
    
    				#metric-gallery .panel .card-metric-xl .card .value p {
        				color: #FFF;
        				font-family: 'butlerregular';
        				font-size: 40px;
        				line-height: 50px;
        			}

		#metric-gallery .panel .card-quote {
			border-bottom: 1px solid #565656;
			display: flex;
				flex-direction: column;
				justify-content: space-between;
			width: calc(100% - 25px);
		}

    		#metric-gallery .panel .card-quote .card {
    			display: flex;
    				flex-direction: column;
    				justify-content: space-between;
    			padding: 25px 0;
    			position: relative;
    		}
    
    			#metric-gallery .panel .card-quote .card h2 {
    				color: #FFF;
    				font-family: 'jetbrains_monoextralight';
    				font-size: 15px;
    				line-height: 17px;
    				margin: 0;
    				text-transform: uppercase;
    			}
    
    			#metric-gallery .panel .card-quote .card .text-box { }
                    
                	#metric-gallery .panel .card-quote .card .text-box p {
                    	color: #FFF;
                    	font-family: 'butlerregular';
                    	font-size: 40px;
                    	line-height: 50px;
                    }
    
				#metric-gallery .panel .card-quote .card p {
    				color: #FFF;
    				font-family: 'butlerregular';
    				font-size: 50px;
    				line-height: 70px;
    				margin: 100px 0;
    			}
    
    			#metric-gallery .panel .card-quote .card .quadrant h3 {
    				color: #929292;
    				font-family: 'jetbrains_monoextralight';
    				font-size: 15px;
    				line-height: 25px;
    			}

		#metric-gallery .panel .card-keywords {
			border-bottom: 1px solid #565656;
			display: flex;
				flex-direction: column;
				justify-content: space-between;
			width: calc(100% - 25px);
		}

    		#metric-gallery .panel .card-keywords .card { 
    			display: flex;
    				flex-direction: column;
    				justify-content: space-between;
    			padding: 25px 0;
    			position: relative;
    		}
    
    			#metric-gallery .panel .card-keywords .card h2 {
    				color: #FFF;
    				font-family: 'jetbrains_monoextralight';
    				font-size: 15px;
    				line-height: 15px;
    				margin: 0;
    				text-transform: uppercase;
    			}
    
    			#metric-gallery .panel .card-keywords .card .quadrant h3 {
    				color: #929292;
    				font-family: 'jetbrains_monoextralight';
    				font-size: 15px;
    				line-height: 25px;
    			}

    			#metric-gallery .panel .card-keywords .card .value {
    				align-self: flex-end;
    				margin: 100px 0;
    				width: 100%;
    			}
    
    				#metric-gallery .panel .card-keywords .card .value ul { }
    
        				#metric-gallery .panel .card-keywords .card .value ul li {
        					color: #0F62FE;
        					display: inline;
        					font-family: 'jetbrains_monothin';
            				font-size: 40px;
            				line-height: 50px;
        				}

							#metric-gallery .panel .card-keywords .card .value ul li.ibm { color: #0F62FE; }
							#metric-gallery .panel .card-keywords .card .value ul li.intuit { color: #3588DF; }

            				#metric-gallery .panel .card-keywords .card .value ul li p {
                				color: #FFF;
                				display: inline;
                				font-family: 'butlerregular';
                				font-size: 40px;
                				line-height: 50px;
                				margin-right: 5px;
                			}

/* --------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------- */
/* -------------------------------- GRID SLIDER ------------------------------ */
/* --------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------- */

#grid-slider {
	background: #000;
	padding-bottom: 250px;
	position: relative;
}

	#grid-slider .controller {
		display: flex;
			align-items: center;
			justify-content: center;
		position: absolute;
			left: 50%;
		z-index: 1;
	}

    	#grid-slider .controller .grabber {
    		height: 100px;
    		margin-top: 1px;
    		position: absolute;
    			top: calc(50% - 45px);
    		width: 25px;
    	}
    
    		#grid-slider .controller .grabber.blue { background: #0F62FE; }

    	#grid-slider .controller hr {
    		border-bottom: none;
        	padding: 0;
        	height: 100vw;
        	width: 0px;
        }

	#grid-slider .canvas {
		border: 1px solid #565656;
		height: 100vw;
    	margin-left: 25px;
    	position: relative;
    	width: calc(100% - 50px);
    }
    
    	#grid-slider .canvas .meta { 
    		display: flex;
    			flex-direction: column;
    			justify-content: space-between;
    		height: calc(100% - 50px);
    		padding: 25px;
    		width: calc(50% - 50px);
    	}
    
    	    #grid-slider .canvas .meta h2 {
    			color: #FFF;
    			font-family: 'jetbrains_monoextralight';
    			font-size: 15px;
    			line-height: 25px;
    			text-transform: uppercase;
    		}
    
        	#grid-slider .canvas .meta .quadrant { }
    
        		#grid-slider .canvas .meta .quadrant h3 {
    				color: #929292;
        			font-family: 'jetbrains_monothin';
        			font-size: 15px;
        			line-height: 25px;
        		}

/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
/* -------------------------------- CLIENTS ------------------------------ */
/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */

#clients {
	background: #000;
	padding-bottom: 250px;
}

	#clients ul {
		display: flex;
			flex-direction: column;
		margin-left: 25px;
			width: calc(100% - 50px);
	}

		#clients ul::after {
			content: "";
			flex: auto;
		}

		#clients ul li { margin-bottom: -1px; }

			#clients ul li:nth-last-child(-1n+2) { margin-bottom: 0; }

			#clients ul li .client-card {
				border-bottom: 1px solid #565656;
				border-top: 1px solid #565656;
				display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;
				height: 62.5vw;
				position: relative;
			}

				#clients ul li .client-card .meta {
					display: flex;
						flex-direction: row;
						justify-content: space-between;
					position: absolute;
						top: 25px;
					width: 100%;
				}

    				#clients ul li .client-card p {
    					color: #929292;
        				font-family: 'jetbrains_monothin';
        				font-size: 15px;
        				line-height: 15px;
						text-transform: uppercase;
        			}
        
        			.svg-logo-cardstack,
                    .svg-logo-citrix,
                    .svg-logo-ibm,
                    .svg-logo-intuit,
                    .svg-logo-netflix,
                    .svg-logo-pendo,
                    .svg-logo-pepsico,
                    .svg-logo-smartling { color: #FFF; }
        
        			.svg-logo-cardstack { font-size: 6.5vw; }
                    .svg-logo-citrix { font-size: 8vw; }
                    .svg-logo-ibm { font-size: 6.5vw; }
                    .svg-logo-intuit { font-size: 4.25vw; }
                    .svg-logo-netflix { font-size: 6vw; }
                    .svg-logo-pendo { font-size: 7vw; }
                    .svg-logo-pepsico { font-size: 8.5vw; }
                    .svg-logo-smartling { font-size: 6vw; }

/* --------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------- */
/* -------------------------------- SUMMARY-PRG ------------------------------ */
/* --------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------- */

#summary-prg { padding: 25px 0; }

	#summary-prg.ibm { background: #0F62FE; }
	#summary-prg.intuit { background: #3588DF; }
	#summary-prg.magenta { background: #FF00B8; }
    
	#summary-prg .text-box {
		margin-left: 25px;
		padding-bottom: 250px;
		width: calc(100% - 50px);
	}
        
    	#summary-prg .text-box h2 {
        	color: rgba(255,255,255,0.75);
        	font-family: 'butlerregular';
        	font-size: 40px;
        	line-height: 50px;
        }
        
        	#summary-prg .text-box h2 a {
        		color: #FFF;
        		text-decoration: underline;
        			text-underline-offset: 5px;
        			text-decoration-thickness: 2px;
        	}
        
            	#summary-prg .text-box h2 a:hover { color: #FFF; }

/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* -------------------------------- SAY HELLO ------------------------------ */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */

#say-hello {
	display: flex;
    	flex-direction: column;
	background: #000;
}

	#say-hello ul.required-fields {
		display: flex;
			flex-direction: row;
			justify-content: space-between;
			gap: 1px;
		margin: 10px 0 40px 0;
		width: 100%;
	}
		#say-hello ul.required-fields li {
			background: #222;
			list-style-type: none;
			margin: 0;
			padding: 13px 0;
			text-align: center;
			transition: all 0.25s;
			width: 100%;
		}

			#say-hello ul.required-fields li:first-child { background: #FFF; }

			#say-hello ul.required-fields li p {
				color: #929292;
				font-family: 'jetbrains_monoextralight';
				font-size: 12px;
				line-height: 12px;
				text-transform: uppercase;
			}
			
				#say-hello ul.required-fields li:first-child p {
					color: #000;
					font-family: 'jetbrains_monosemibold';
				}

    #say-hello .form {
    	display: flex;
    		flex-direction: column;
    	margin-left: 25px;
    	padding-top: 112px;
    	position: relative;
    	width: calc(100% - 50px);
    }

		#say-hello .form form textarea {
			background: #000;
			border: none;
			border-radius: 0;
			box-sizing: border-box;
			caret-color: #FF00B8;
			color: #FFF;
			cursor: pointer;
			font-family: 'butlerregular';
			font-size: 40px;
			height: calc(75vh - 150px);
			line-height: 50px;
  			outline: none;
			padding: 0;
			resize: none;
			transition: all 0.25s;
			width: 100%;
		}

			#say-hello .form textarea::-webkit-scrollbar { display: none; }

				#say-hello .form textarea::placeholder {
            	color: #565656;
            	opacity: 1; /* Firefox */
            	transition: all 0.25s;
            }

		#say-hello .form form button {
			background: #FF1DC0;
			border: 2px solid #FF1DC0;
			box-sizing: border-box;
			cursor: pointer;
			display: flex;
				align-items: center;
				justify-content: space-between;
			height: 65px;
			padding: 23px 23px 23px 13px;
			position: absolute;
				bottom: 0;
				right: 0px;
			transition: all 0.25s;
			width: 25%;
		}

/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */
/* -------------------------------- FOOTER ------------------------------ */
/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */

#footer {
	display: flex;
    	flex-direction: column;
	background: #000;
}
    
	#footer .contact-info {
		display: flex;
			flex-direction: column;
		margin-left: 25px;
		padding-top: 50px;
		width: calc(100% - 50px);
	}

		#footer .contact-info .quadrant {
			display: flex;
			margin-bottom: 50px;
    		width: 100%;
    	}
    
		#footer .contact-info .quadrant:first-child { flex-direction: row; }
		#footer .contact-info .quadrant:last-child { flex-direction: column; }

    		#footer .contact-info .quadrant .newsletter {
    			display: flex;
    				flex-direction: column;
        		width: 100%;
        	}

    		#footer .contact-info .quadrant .sub-quadrant { }
    
    		#footer .contact-info .quadrant .sub-quadrant:last-child { margin-top: 50px; }

    		#footer .contact-info .quadrant h3,
    		#footer .contact-info .quadrant .sub-quadrant h3 {
    			color: #FFF;
    			font-family: 'jetbrains_monoextralight';
    			font-size: 15px;
    			line-height: 15px;
    			margin-bottom: 50px;
    			text-transform: uppercase;
    		}
    
    		#footer .contact-info .quadrant p,
    		#footer .contact-info .quadrant .sub-quadrant p {
    			color: #929292;
    			font-family: 'jetbrains_monoextralight';
    			font-size: 15px;
    			line-height: 25px;
    		}
    
    			#footer .contact-info .quadrant .sub-quadrant p:first-of-type { margin-top: -10px; }
    
		    #footer .contact-info .quadrant a.email,
    		#footer .contact-info .quadrant .sub-quadrant a.email {
    			color: #929292;
    			font-family: 'jetbrains_monoextralight';
    			font-size: 15px;
    			line-height: 25px;
    		}

		    	#footer .contact-info .quadrant a.email:hover,
				#footer .contact-info .quadrant .sub-quadrant a.email:hover { color: #FFF; }
		
			#footer .contact-info .quadrant p.small-print {
    			color: #929292;
    			font-family: 'jetbrains_monoextralight';
    			font-size: 12px;
    			line-height: 20px;
    			margin-top: 15px;
    		}
    
    		#footer .contact-info .quadrant form {
    			display: flex;
    				justify-content: space-between;
    		}

        		#footer .contact-info .quadrant input[type=text] {
        			background: #A1BFBF;
        			border: 2px solid #A1BFBF;
        			border-radius: 0;
        			box-sizing: border-box;
        			caret-color: #00FFFF;
        			color: #456565;
        			font-family: 'jetbrains_monothin';
        			font-size: 15px;
        			padding: 0 15px;
      				outline-color: #FFF;
    				transition: all 0.25s;
    				width: 100%;
        		}
        
        			#footer .contact-info .quadrant input[type=text]:hover {
        				background: #B6D5D5;
        				border: 2px solid #FFF;
        			}
    
    				#footer .contact-info .quadrant input[type=text]:focus {
    					border: 2px solid #FFF;
    					outline: none;
    				}
    
    				#footer .contact-info .quadrant input[type=text]::-webkit-input-placeholder { color: #658989; }
        
        		#footer .contact-info .quadrant button {
        			background: #FF00B8;
        			box-sizing: border-box;
        			padding: 13px 23px;
        			cursor: pointer;
        			transition: all 0.25s;
        		}
        
					#footer .contact-info .quadrant button.ibm { background: #0F62FE; border: 2px solid #0F62FE; }
					#footer .contact-info .quadrant button.intuit { background: #3588DF; border: 2px solid #3588DF; }
                    #footer .contact-info .quadrant button.magenta { background: #FF00B8; border: 2px solid #FF00B8; }
        
            		#footer .contact-info .quadrant button.magenta:hover {
            			background: #FF00B8;
            			border: 2px solid #FF00B8;
            			padding: 13px 23px;
            		}
            
            		#footer .contact-info .quadrant button.ibm:hover {
            			background: #0F62FE;
            			border: 2px solid #0F62FE;
            			padding: 13px 23px;
            		}
            
            		#footer .contact-info .quadrant button.red:hover {
            			background: #E20A16;
            			border: 2px solid #E20A16;
            			padding: 13px 23px;
            		}
            
            		#footer .contact-info .quadrant button:active {
            			border: 2px solid #00FFFF;
            			padding: 13px 23px;
            		}
            
            		#footer .contact-info .quadrant button:focus-visible {
            			border: 2px solid #00FFFF;
            			outline: none;
            			padding: 13px 23px;
            		}
            
            		#footer .contact-info .quadrant button.svg-ui-arrow {
            			color: #FFF;
            			font-size: 12px;
            		}

			#footer .contact-info .quadrant .sub-quadrant ul {
    			margin: -10px 0 0 0;
    			padding: 0;
    			width: 100%;
    		}
                
                #footer .contact-info .quadrant .sub-quadrant ul li {
                	display: inline;
                	margin-right: 15px;
                }
                
                #footer .contact-info .quadrant .sub-quadrant ul li a { line-height: 25px; }
            	#footer .contact-info .quadrant .sub-quadrant ul li a:hover { color: #FFF; }

    			#footer .contact-info .quadrant .sub-quadrant ul li:last-child { margin-right: 0; }
    
    				#footer .contact-info .quadrant .sub-quadrant ul li a.svg-avatar-linkedin,
    				#footer .contact-info .quadrant .sub-quadrant ul li a.svg-avatar-instagram,
    				#footer .contact-info .quadrant .sub-quadrant ul li a.svg-avatar-dribbble,
    				#footer .contact-info .quadrant .sub-quadrant ul li a.svg-avatar-youtube,
    				#footer .contact-info .quadrant .sub-quadrant ul li a.svg-avatar-tiktok,
    				#footer .contact-info .quadrant .sub-quadrant ul li a.svg-avatar-twitter { color: #929292; }
    
    					#footer .contact-info .quadrant .sub-quadrant ul li a:hover.svg-avatar-linkedin,
    					#footer .contact-info .quadrant .sub-quadrant ul li a:hover.svg-avatar-instagram,
    					#footer .contact-info .quadrant .sub-quadrant ul li a:hover.svg-avatar-dribbble,
    					#footer .contact-info .quadrant .sub-quadrant ul li a:hover.svg-avatar-youtube,
    					#footer .contact-info .quadrant .sub-quadrant ul li a:hover.svg-avatar-tiktok,
    					#footer .contact-info .quadrant .sub-quadrant ul li a:hover.svg-avatar-twitter { color: #FFF; }
    	
    				#footer .contact-info .quadrant .sub-quadrant ul li a.svg-avatar-linkedin { font-size: 21px; }
    				#footer .contact-info .quadrant .sub-quadrant ul li a.svg-avatar-instagram { font-size: 16px; }
    				#footer .contact-info .quadrant .sub-quadrant ul li a.svg-avatar-dribbble { font-size: 16px; }
    				#footery .content .footer-strip .contact-info .quadrant .sub-quadrant ul li a.svg-avatar-youtube { font-size: 15px; }
    				#footer .contact-info .quadrant .sub-quadrant ul li a.svg-avatar-tiktok { font-size: 19px; }
    				#footer .contact-info .quadrant .sub-quadrant ul li a.svg-avatar-twitter { font-size: 15px; }

    #footer .legal {
    	display: flex;
    		align-items: flex-start;
    		flex-direction: column;
    	margin-left: 25px;
    	padding-bottom: 25px;
    	width: calc(100% - 50px);
    }
    
			#footer .legal .copyright p,
			#footer .legal .dxc p,
			#footer .legal .dxc p a {
    			color: #929292;
    			font-family: 'jetbrains_monothin';
    			font-size: 15px;
    			line-height: 15px;
    			text-transform: uppercase;
    			white-space: nowrap;
    		}
    			
    			#footer .legal .dxc p a:hover { color: #FFF; }
    
    	#footer .legal .copyright,
     	#footer .legal .dxc {
    		display: flex;
    			align-items: center;
    		width: 100%;
    	}
    
    		#footer .legal .copyright .svg-logo-prg-horizontal {
    			color: #929292;
    			font-size: 12px;
    		}
    
    	#footer .legal .dxc {
    		display: flex;
    			align-items: center;
    		margin-top: 10px;
    		width: 100%;
    	}

/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
/* -------------------------------- END DEVICE TYPE ------------------------------- */
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */

}