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

@media only screen
	and (max-width: 1440px)
	and (min-width: 1025px) {

/* -------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------- */
/* -------------------------------- 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: ' Large [1025 - 1440px]'; }

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

nav {
	display: flex;
		align-items: top;
		justify-content: center;
	position: fixed;
	margin: calc(50px) 0 0 50px;
	transition: all 0.25s;
	width: calc(100% - 100px);
	z-index: 10;
}

	nav a.svg-logo-tc {
		color: #FFF;
		cursor: pointer;
		font-size: 30px;
		position: fixed;
			left: 50px;
	}

	nav .directory {
		display: flex;
			flex-direction: row;
		margin: auto;
		position: fixed;
			left: 50%;
			transform: translateX(-50%);
				-webkit-transform: translateX(-50%);
		width: fit-content;
	}

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

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

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

	nav a.menu-open {
		color: #FFF;
		cursor: pointer;
		display: flex;
			align-items: center;
			flex-direction: row;
		font-family: 'jetbrains_monoextralight';
		font-size: 17px;
		line-height: 17px;
		position: fixed;
			right: 50px;
			top: 50px;
		text-transform: uppercase;
	}

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

.overlay {
	border-radius: 15px;
	height: 0;
	overflow-y: hidden;
	position: fixed;
		right: 25px;
		top: 25px;
	transition: 1.0s all;
	width: 350px;
	z-index: 50;
}

    .overlay .content { 
    	background: #FFF;
    	border-radius: 15px;
    	display: flex;
    		flex-direction: column;
    		justify-content: space-between;
    	height: calc(100% - 50px);
    	overflow-y: scroll;
    	position: absolute;
    		right: 0;
    		top: 0;
    	transition: 1.0s all;
    	width: 350px;
    }
    	
    	.overlay .content::-webkit-scrollbar {  display: none; }
    
        .overlay .content a.close {
        	color: #000;
            display: flex;
        		align-items: center;
        		flex-direction: row-reverse;
        		justify-content: center;
        	font-family: 'jetbrains_monoextralight';
        	font-size: 17px;
        	height: 50px;
        	position: absolute;
            	right: 25px;
            	top: 8px;
            text-transform: uppercase;
        }

			.overlay .content a.close:hover { color: #000; }
    
        .overlay .content ul {
        	display: flex;
        		align-self: flex-end;
        		flex-direction: column;
        		flex-wrap: wrap;
        		justify-content: space-between;
        	margin: 15px 0 100px 0;
        	width: 350px;
        }

            .overlay .content ul li { margin-left: 25px; }
            .overlay .content ul li:last-child { margin-bottom: 25px; }

            	.overlay .content ul li a {
                	color: #000;
                	cursor: pointer;
                	display: inline-block;
                	font-family: 'butlerreguar';
                	font-size: 40px;
                	line-height: 50px;
                }

                	.overlay .content ul li a:hover { color: #888; }
                                
        .overlay .content .marquee-latest {
        	display: flex;
        		flex-direction: column;
        		justify-content: space-between;
        	position: relative;
        	width: 350px;
        }

        	.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: #000;
        			font-family: 'jetbrains_monoextralight';
        			font-size: 17px;
        			line-height: 30px;
        			text-transform: uppercase;
				}
        
        	.overlay .content .marquee-latest .frame-logo {
        		height: 80px;
        		margin: 50px 0;
        		overflow: hidden;
        		position: relative;
        		width: 350px;
        	}
    
        		.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: #000;
            				font-size: 80px;
            				z-index: 1;
            			}

/* --------------------------------------------------------------------- */
/* --------------------------------------------------------------------- */
/* -------------------------------- HERO ------------------------------- */
/* --------------------------------------------------------------------- */
/* --------------------------------------------------------------------- */

#hero {
	background: #000;
	display: flex;
		align-items: center;
	height: 100dvh;
	position: relative;
}

	#hero.ibm { background: #0F62FE; }
	#hero.intuit { background: #0084C8; }
	#hero.pixelraygun { background: #FF00B8; }
	#hero.pendo { background: #FF205A; }
	#hero.smartling { background: #701BDB; }
	#hero.pepsicola { background: #04A8FA; }
	
	#hero .text-frame.home {
		position: absolute;
			bottom: 50px;
			left: 50px;
		width: calc(50% - 50px);
	}

	#hero .text-frame.work {
		margin-left: 50px;
		width: calc(100% - 100px);
	}

		#hero .text-frame h1 {
			display: inline-block;
			font-family: 'butlerregular';
			font-size: 40px;
			line-height: 50px;
		}

		#hero .text-frame.home h1 { color: #929292; }
		#hero .text-frame.work h1 { color: #FFF; }

		#hero .text-frame.home h1 a {
		color: #FFF;
		display: inline-block;
		font-family: 'butlerregular';
		font-size: 40px;
		line-height: 50px;
		margin-top: 25px;
		text-decoration: underline;
			text-underline-offset: 7px;
			text-decoration-thickness: 2px;
		}

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

		#hero .meta .quadrant {
			display: flex;
				flex-direction: column;
			width: 50%;
		}
		
			#hero .meta .quadrant .tier {
				display: flex;
					flex-direction: row;
				width: 100%;
			}

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

						#hero .meta .quadrant .tier .sub-quadrant h3 {
							color: #FFF;
							font-family: 'jetbrains_monoextralight';
							font-size: 17px;
							line-height: 30px;
							text-transform: uppercase;
						}

						#hero .meta .quadrant .tier .sub-quadrant p {
							color: #929292;
							font-family: 'jetbrains_monoextralight';
							font-size: 17px;
							line-height: 30px;
						}

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

							#hero .meta .quadrant .tier .sub-quadrant ul li { list-style-type: none; }

								#hero .meta .quadrant .tier .sub-quadrant ul li p {
									color: rgba(255,255,255,0.75);
									font-family: 'jetbrains_monothin';
									font-size: 17px;
									line-height: 30px;
									text-transform: uppercase;
								}

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

#category-selector {
	background: #000;
	padding: 250px 0 300px 0; /*--- 50px is deducted from top padding since the hero has a bottom padding of 50px already ---*/
}

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

			#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: #FFF;
        			margin-left: -50px;
        			padding-left: 50px;
        			width: calc(100% + 0px);
        		}

    				#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: #000; }

    				#category-selector ul li a .tooltip-card {
    					background: #565656;
                        border-radius: 15px;
                        display: none;
                        height: calc(350px - 50px);
                        margin-left: 15px;
                        margin-top: -2px;
                        padding: 25px;
                        position: absolute;
                        width: calc(350px - 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-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; }

								#category-selector ul li a:hover .tooltip-card.FPO-01 { background: #0F62FE; } 
								#category-selector ul li a:hover .tooltip-card.FPO-02 { background: #FF205A; } 
								#category-selector ul li a:hover .tooltip-card.FPO-03 { background: #701BDB; } 
								#category-selector ul li a:hover .tooltip-card.FPO-04 { background: #0084C8; }
								#category-selector ul li a:hover .tooltip-card.FPO-05 { background: #04A8FA; }
								#category-selector ul li a:hover .tooltip-card.FPO-06 { background: #FF00B8; }

									#category-selector ul li a:hover .svg-logo-ibm,
									#category-selector ul li a:hover .svg-logo-pendo,
									#category-selector ul li a:hover .svg-logo-smartling,
									#category-selector ul li a:hover .svg-logo-intuit,
									#category-selector ul li a:hover .svg-logo-tc,
									#category-selector ul li a:hover .svg-logo-pepsico,
									#category-selector ul li a:hover .svg-logo-cardstack,
									#category-selector ul li a:hover .svg-logo-netflix { color: #FFF; position: absolute; }

									#category-selector ul li a:hover .svg-logo-ibm { font-size: 45px; bottom: 125px; }
									#category-selector ul li a:hover .svg-logo-pendo { font-size: 48px; bottom: 120px; }
									#category-selector ul li a:hover .svg-logo-smartling { font-size: 40px; bottom: 125px; }
									#category-selector ul li a:hover .svg-logo-intuit { font-size: 30px; bottom: 125px; }
									#category-selector ul li a:hover .svg-logo-tc { font-size: 65px; bottom: 108px; }
									#category-selector ul li a:hover .svg-logo-pepsico { font-size: 60px; bottom: 115px; }
									#category-selector ul li a:hover .svg-logo-cardstack { font-size: 40px; bottom: 125px; }
									#category-selector ul li a:hover .svg-logo-netflix{  font-size: 40px; bottom: 125px; }

                           	#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: 350px;
                            	z-index: 1;
                            }
                        
                            	#category-selector ul li a:hover .tooltip-card .marquee-tooltip .frame-text {
                            		height: 17px;
                            		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: 17px;
                                    			line-height: 17px;
                                    			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 .category sup {
    					color: #929292;
    					display: inline-block;
                		font-family: 'jetbrains_monoextralight';
    					font-size: 17px;
    					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: 50px;
        			}

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

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

	hr.indent-left,
	hr.indent-right { border-top: 1px solid #565656; }
    
	hr.indent-left {
		margin: 0 0 40px 50px;
    		width: calc(100% - 52px);
    }
    
    hr.indent-right {
		margin: 50px 40px 0 0;
    		width: calc(100% - 52px);
    }

/* -------------------------------- SECTION META ------------------------------ */

#section-meta {
	background: #000;
	height: auto;
	padding-bottom: 50px;
	position: relative;
}

	#section-meta.work { padding-top: 500px; }

    #section-meta .info {
    	display: flex;
    		flex-direction: row;
    	margin-left: 50px;
    	width: calc(100% - 100px);
    }

	#section-meta .info .quadrant {
		display: flex;
    		flex-direction: row;
		width: 50%;
	}

		#section-meta .info .quadrant .sub-quadrant { width: 100%; }
        
    		#section-meta .info .quadrant .sub-quadrant h3 {
    			color: #FFF;
    			font-family: 'jetbrains_monoextralight';
    			font-size: 17px;
    			line-height: 30px;
    			margin-bottom: 2px;
    			text-transform: uppercase;
    		}

			#section-meta .info .quadrant .sub-quadrant:nth-child(2) h3 {
				color: #929292;
    			text-transform: uppercase;
    		}

    		#section-meta .info .quadrant .sub-quadrant p {
				color: #929292;
				font-family: 'jetbrains_monoextralight';
    			font-size: 17px;
    			line-height: 30px;
				margin-bottom: 50px;
    		}
		
					#section-meta .info .quadrant .sub-quadrant p a {
						color: #FFF;
						display: inline;
						font-family: 'jetbrains_monothin';
						font-size: 17px;
						line-height: 30px;
						text-decoration: underline;
						text-decoration-thickness: 1px;
						text-underline-offset: 2px;
					}
	
				#section-meta .info .quadrant .sub-quadrant ul { margin-top: 25px; }

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

					#section-meta .info .quadrant .sub-quadrant ul li::marker { color: #FFF; }

						#section-meta .info .quadrant .sub-quadrant ul li p {
							color: #929292;
							font-family: 'jetbrains_monothin';
							font-size: 17px;
							line-height: 30px;
						}

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

#block-panoramic { background: #000; }

	#block-panoramic .image-frame {
		display: flex;
			align-items: top;
			justify-content: center;
		border-radius: 15px;
		margin: 0 0 50px 50px;
		padding: 50px 0;
		width: calc(100% - 100px);
	}

	#block-panoramic .image-frame-inset {
		display: flex;
			align-items: top;
			justify-content: center;
		border-radius: 15px;
		margin: 50px 0 0 50px;
		width: calc(100% - 100px);
	}

		#block-panoramic .image-frame-inset .image-frame-small {
			display: flex;
				justify-content: center;
			border-radius: 15px;
			margin: 0 0 0 50px;
			padding: 50px 0;
			width: 50%;
		}

		#block-panoramic .image-frame:last-child { margin-bottom: 0; }

		#block-panoramic .image-frame.ibm-gradient,
		#block-panoramic .image-frame-small.ibm-gradient { background: linear-gradient(to top right, #000, #0F62FE, #A625FF); }
		#block-panoramic .image-frame.intuit-gradient { background: linear-gradient(to top right, #000, #0084C8, #6ACCFF); }
		#block-panoramic .image-frame.pendo-gradient { background: linear-gradient(to top right, #000, #FF205A, #FF94B0); }
		#block-panoramic .image-frame.smartling-gradient { background: linear-gradient(to top right, #000, #701BDB, #C291FF); }
		#block-panoramic .image-frame.pepsicola-gradient { background: linear-gradient(to top right, #000, #04A8FA, #DDF9F9); }

	#block-panoramic .image-frame .ibm-user-console01,
	#block-panoramic .image-frame .ibm-user-console02,
	#block-panoramic .image-frame .ibm-good-design,
	#block-panoramic .image-frame .ibm-email-template-01,
	#block-panoramic .image-frame .ibm-email-template-02,
	#block-panoramic .image-frame .ibm-team-cover,
	#block-panoramic .image-frame .ibm-transcript-analyzer-01,
	#block-panoramic .image-frame .ibm-transcript-analyzer-02,
	#block-panoramic .image-frame .ibm-transcript-analyzer-03,
	#block-panoramic .image-frame .ibm-transcript-analyzer-04,
	#block-panoramic .image-frame .ibm-buymore-01-module,
	#block-panoramic .image-frame .ibm-buymore-02-checkout,
	#block-panoramic .image-frame .ibm-buymore-03-provisioning,
	#block-panoramic .image-frame .ibm-buymore-04-overview,
	#block-panoramic .image-frame .intuit-dashboard-01,
	#block-panoramic .image-frame .intuit-dashboard-02,
	#block-panoramic .image-frame .intuit-billboard,
	#block-panoramic .image-frame .intuit-keep-calm-01,
	#block-panoramic .image-frame .intuit-keep-calm-02,
	#block-panoramic .image-frame .intuit-website,
	#block-panoramic .image-frame .pendo-website-01,
	#block-panoramic .image-frame .pendo-website-02,
	#block-panoramic .image-frame .pendo-website-03,
	#block-panoramic .image-frame .pendo-website-04,
	#block-panoramic .image-frame .pendo-website-05,
	#block-panoramic .image-frame .pendo-dashboard-01,
	#block-panoramic .image-frame .pendo-dashboard-02,
	#block-panoramic .image-frame .pendo-dashboard-03,
	#block-panoramic .image-frame .pendo-craft-01,
	#block-panoramic .image-frame .pendo-craft-02,
	#block-panoramic .image-frame .pendo-craft-03,
	#block-panoramic .image-frame .pendo-craft-04,
	#block-panoramic .image-frame .smartling-dashboard-01,
	#block-panoramic .image-frame .smartling-dashboard-02,
	#block-panoramic .image-frame .smartling-dashboard-03,
	#block-panoramic .image-frame .smartling-workflow-01,
	#block-panoramic .image-frame .smartling-workflow-02,
	#block-panoramic .image-frame .smartling-workflow-03,
	#block-panoramic .image-frame .smartling-workflow-04,
	#block-panoramic .image-frame .smartling-workflow-05,
	#block-panoramic .image-frame .smartling-workflow-06,
	#block-panoramic .image-frame .smartling-workflow-07,
	#block-panoramic .image-frame .smartling-select-a-plan-01,
	#block-panoramic .image-frame .smartling-select-a-plan-02,
	#block-panoramic .image-frame .smartling-select-a-plan-03,
	#block-panoramic .image-frame .smartling-select-a-plan-04,
	#block-panoramic .image-frame .smartling-select-a-plan-05,
	#block-panoramic .image-frame .pepsicola-website-01,
	#block-panoramic .image-frame .pepsicola-website-02 {
		border-radius: 15px;
		width: calc(100% - 100px);
	}

	#block-panoramic .image-frame .ibm-email-template-01,
	#block-panoramic .image-frame .ibm-email-template-02 {
		border-radius: 15px;
	}

		#block-panoramic .image-frame .ibm-email-template-01 { margin: 0 50px; }
		#block-panoramic .image-frame .ibm-email-template-02 { margin-right: 50px; }

	#block-panoramic .image-frame .ibm-user-console01 { aspect-ratio: 1312 / 1134; background: url("../graphics/ibm/user-console01.png") no-repeat center center / contain; }
	#block-panoramic .image-frame .ibm-user-console02 { aspect-ratio: 1312 / 1010; background: url("../graphics/ibm/user-console02.png") no-repeat center center / contain; }
	#block-panoramic .image-frame-inset .ibm-platform-statistics { aspect-ratio: 602 / 406; background: url("../graphics/ibm/user-console-card-platform-statistics.png") no-repeat center center / contain; width : calc(100% - 100px); }
	#block-panoramic .image-frame-inset .ibm-scheduled-programs { aspect-ratio: 410 / 406; background: url("../graphics/ibm/user-console-card-scheduled-programs.png") no-repeat center center / contain; width: 75% }
	#block-panoramic .image-frame-inset .ibm-new-appointments { aspect-ratio: 602 / 406; background: url("../graphics/ibm/user-console-card-new-appointments.png") no-repeat center center / contain; width: 75% }
	#block-panoramic .image-frame-inset .ibm-card-other { aspect-ratio: 410 / 406; background: url("../graphics/ibm/user-console-card-other.png") no-repeat center center / contain; width: 75% }
		
	#block-panoramic .image-frame .ibm-good-design { aspect-ratio: 1312 / 1496; background: url("../graphics/ibm/good-design.png") no-repeat center center / contain; }
	#block-panoramic .image-frame .ibm-email-template-01 { aspect-ratio: 590 / 2505; background: url("../graphics/ibm/email-template-01.png") no-repeat top center / contain; }
	#block-panoramic .image-frame .ibm-email-template-02 { aspect-ratio: 590 / 2505; background: url("../graphics/ibm/email-template-02.png") no-repeat center center / contain; }
	#block-panoramic .image-frame .ibm-team-cover { aspect-ratio: 1312 / 562; background: url("../graphics/ibm/team-cover.png") no-repeat center center / contain; }
	#block-panoramic .image-frame .ibm-transcript-analyzer-01 { aspect-ratio: 1312 / 1157; background: url("../graphics/ibm/transcript-analyzer-01.png") no-repeat center center / contain; }
	#block-panoramic .image-frame .ibm-transcript-analyzer-02 { aspect-ratio: 1312 / 1157; background: url("../graphics/ibm/transcript-analyzer-02.png") no-repeat center center / contain; }
	#block-panoramic .image-frame .ibm-transcript-analyzer-03 { aspect-ratio: 1312 / 1157; background: url("../graphics/ibm/transcript-analyzer-03.png") no-repeat center center / contain; }
	#block-panoramic .image-frame .ibm-transcript-analyzer-04 { aspect-ratio: 1312 / 1157; background: url("../graphics/ibm/transcript-analyzer-04.png") no-repeat center center / contain; }
	#block-panoramic .image-frame .ibm-buymore-01-module { aspect-ratio: 1 / 1; background: url("../graphics/ibm/buymore-01-module.png") no-repeat center center / contain; }
	#block-panoramic .image-frame .ibm-buymore-02-checkout { aspect-ratio: 1312 / 2399; background: url("../graphics/ibm/buymore-02-checkout.png") no-repeat center center / contain; }
	#block-panoramic .image-frame .ibm-buymore-03-provisioning { aspect-ratio: 1312 / 1711; background: url("../graphics/ibm/buymore-03-provisioning.png") no-repeat center center / contain; }
	#block-panoramic .image-frame .ibm-buymore-04-overview { aspect-ratio: 1312 / 1511; background: url("../graphics/ibm/buymore-04-overview.png") no-repeat center center / contain; }

	#block-panoramic .image-frame .pendo-website-01 { aspect-ratio: 1312 / 820; background: url("../graphics/pendo/website-01.jpg") no-repeat center center / contain; }
	#block-panoramic .image-frame .pendo-website-02 { aspect-ratio: 1312 / 820; background: url("../graphics/pendo/website-02.jpg") no-repeat center center / contain; }
	#block-panoramic .image-frame .pendo-website-03 { aspect-ratio: 1312 / 4534; background: url("../graphics/pendo/website-03.jpg") no-repeat center center / contain; }
	#block-panoramic .image-frame .pendo-website-04 { aspect-ratio: 1312 / 984; background: url("../graphics/pendo/website-04.jpg") no-repeat center center / contain; }
	#block-panoramic .image-frame .pendo-website-05 { aspect-ratio: 1312 / 5139; background: url("../graphics/pendo/website-05.jpg") no-repeat center center / contain; }
	#block-panoramic .image-frame .pendo-dashboard-01 { aspect-ratio: 1312 / 1039; background: url("../graphics/pendo/dashboard-01.png") no-repeat center center / contain; }
	#block-panoramic .image-frame .pendo-dashboard-02 { aspect-ratio: 1312 / 1039; background: url("../graphics/pendo/dashboard-02.png") no-repeat center center / contain; }
	#block-panoramic .image-frame .pendo-dashboard-03 { aspect-ratio: 1312 / 1039; background: url("../graphics/pendo/dashboard-03.png") no-repeat center center / contain; }
	#block-panoramic .image-frame .pendo-craft-01 { aspect-ratio: 1312 / 4516; background: url("../graphics/pendo/craft-01.jpg") no-repeat center center / contain; }
	#block-panoramic .image-frame .pendo-craft-02 { aspect-ratio: 1312 / 3676; background: url("../graphics/pendo/craft-02.jpg") no-repeat center center / contain; }
	#block-panoramic .image-frame .pendo-craft-03 { aspect-ratio: 1312 / 5051; background: url("../graphics/pendo/craft-03.jpg") no-repeat center center / contain; }
	#block-panoramic .image-frame .pendo-craft-04 { aspect-ratio: 1312 / 3337; background: url("../graphics/pendo/craft-04.jpg") no-repeat center center / contain; }

	#block-panoramic .image-frame .smartling-dashboard-01 { aspect-ratio: 1312 / 1025; background: url("../graphics/smartling/dashboard-01.jpg") no-repeat center center / contain; }
	#block-panoramic .image-frame .smartling-dashboard-02 { aspect-ratio: 1312 / 1105; background: url("../graphics/smartling/dashboard-02.jpg") no-repeat center center / contain; }
	#block-panoramic .image-frame .smartling-dashboard-03 { aspect-ratio: 1312 / 1093; background: url("../graphics/smartling/dashboard-03.jpg") no-repeat center center / contain; }
	#block-panoramic .image-frame .smartling-workflow-01 { aspect-ratio: 1312 / 908; background: url("../graphics/smartling/workflow-01.jpg") no-repeat center center / contain; }
	#block-panoramic .image-frame .smartling-workflow-02 { aspect-ratio: 1312 / 1488; background: url("../graphics/smartling/workflow-02.jpg") no-repeat center center / contain; }
	#block-panoramic .image-frame .smartling-workflow-03 { aspect-ratio: 1312 / 1121; background: url("../graphics/smartling/workflow-03.jpg") no-repeat center center / contain; }
	#block-panoramic .image-frame .smartling-workflow-04 { aspect-ratio: 1312 / 871; background: url("../graphics/smartling/workflow-04.jpg") no-repeat center center / contain; }
	#block-panoramic .image-frame .smartling-workflow-05 { aspect-ratio: 1312 / 1144; background: url("../graphics/smartling/workflow-05.jpg") no-repeat center center / contain; }
	#block-panoramic .image-frame .smartling-workflow-06 { aspect-ratio: 1312 / 1015; background: url("../graphics/smartling/workflow-06.jpg") no-repeat center center / contain; }
	#block-panoramic .image-frame .smartling-workflow-07 { aspect-ratio: 1312 / 1015; background: url("../graphics/smartling/workflow-07.jpg") no-repeat center center / contain; }
	#block-panoramic .image-frame .smartling-select-a-plan-01 { aspect-ratio: 1312 / 992; background: url("../graphics/smartling/select-plan-01.jpg") no-repeat center center / contain; }
	#block-panoramic .image-frame .smartling-select-a-plan-02 { aspect-ratio: 1312 / 1171; background: url("../graphics/smartling/select-plan-02.jpg") no-repeat center center / contain; }
	#block-panoramic .image-frame .smartling-select-a-plan-03 { aspect-ratio: 1312 / 1205; background: url("../graphics/smartling/select-plan-03.jpg") no-repeat center center / contain; }
	#block-panoramic .image-frame .smartling-select-a-plan-04 { aspect-ratio: 1312 / 992; background: url("../graphics/smartling/select-plan-04.jpg") no-repeat center center / contain; }
	#block-panoramic .image-frame .smartling-select-a-plan-05 { aspect-ratio: 1312 / 1126; background: url("../graphics/smartling/select-plan-05.jpg") no-repeat center center / contain; }

	#block-panoramic .image-frame .intuit-dashboard-01 { aspect-ratio: 1312 / 1287; background: url("../graphics/intuit/dashboard-01.jpg") no-repeat center center / contain; }
	#block-panoramic .image-frame .intuit-dashboard-02 { aspect-ratio: 1312 / 1160; background: url("../graphics/intuit/dashboard-02.jpg") no-repeat center center / contain; }
	#block-panoramic .image-frame .intuit-billboard { aspect-ratio: 1312 / 738; background: url("../graphics/intuit/billboard.jpg") no-repeat center center / contain; }
	#block-panoramic .image-frame .intuit-keep-calm-01 { aspect-ratio: 1312 / 1312; background: url("../graphics/intuit/keep-calm-01.jpg") no-repeat center center / contain; }
	#block-panoramic .image-frame .intuit-keep-calm-02 { aspect-ratio: 1312 / 1312; background: url("../graphics/intuit/keep-calm-02.jpg") no-repeat center center / contain; }
	#block-panoramic .image-frame .intuit-website { aspect-ratio: 1312 / 4701; background: url("../graphics/intuit/website-01-desktop.jpg") no-repeat center center / contain; }

	#block-panoramic .image-frame .pepsicola-website-01 { aspect-ratio: 1312 / 3299; background: url("../graphics/pepsicola/website-01.jpg") no-repeat center center / contain; }
	#block-panoramic .image-frame .pepsicola-website-02 { aspect-ratio: 1312 / 1312; background: url("../graphics/pepsicola/website-02.jpg") no-repeat center center / contain; }

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

#design-spread {
	background: linear-gradient(to top left, #000, #929292);
	display: flex;
		flex-direction: column;
		justify-content: space-between;
	overflow: hidden;
	position: relative;
	width: 100%;
}

    #design-spread .ibm { padding: 200px 0; }
    
    	#design-spread .ibm ul {
    		display: flex;
    			gap: 50px;
    		overflow: auto;
    		padding: 0 50px;
    	}
    
    		#design-spread .ibm ul::-webkit-scrollbar { display: none; }
    
    		#design-spread .ibm ul li { }
    
        		#design-spread .ibm ul li {
        			border-radius: 15px;
            		display: flex;
            			flex: 0 0 auto;
            			flex-direction: column;
            			justify-content: space-between;
        		}
        
                	#design-spread .ibm ul li .figure-01,
                	#design-spread .ibm ul li .figure-02,
                	#design-spread .ibm ul li .figure-03,
                	#design-spread .ibm ul li .figure-04,
                	#design-spread .ibm ul li .figure-05,
                	#design-spread .ibm ul li .figure-06,
                	#design-spread .ibm ul li .figure-07,
                	#design-spread .ibm ul li .figure-08,
                	#design-spread .ibm ul li .figure-09,
                	#design-spread .ibm ul li .figure-10,
					#design-spread .ibm ul li .figure-11,
					#design-spread .ibm ul li .figure-12 {
                		background-position: top left;
                		background-repeat: no-repeat;
                		background-size: cover;
						height: 586px;
						width: 320px;
                	}
   
                	#design-spread .ibm ul li .figure-01 { background-image: url("../graphics/ibm/cmaas-01-router.png"); }
                    #design-spread .ibm ul li .figure-02 { background-image: url("../graphics/ibm/cmaas-02-support.png"); }
                	#design-spread .ibm ul li .figure-03 { background-image: url("../graphics/ibm/cmaas-03-channels-sales.png"); }
                	#design-spread .ibm ul li .figure-04 { background-image: url("../graphics/ibm/cmaas-04-channels-sales-call.png"); }
                	#design-spread .ibm ul li .figure-05 { background-image: url("../graphics/ibm/cmaas-05-chat-with-ai.png"); }
                	#design-spread .ibm ul li .figure-06 { background-image: url("../graphics/ibm/cmaas-06-chat-with-sales.png"); }
		            #design-spread .ibm ul li .figure-07 { background-image: url("../graphics/ibm/cmaas-07-chat-type-ahead.png"); }
                	#design-spread .ibm ul li .figure-08 { background-image: url("../graphics/ibm/cmaas-08-chat-book-a-meeting.png"); }
                	#design-spread .ibm ul li .figure-09 { background-image: url("../graphics/ibm/cmaas-09-text-to-device.png"); }
                	#design-spread .ibm ul li .figure-10 { background-image: url("../graphics/ibm/cmaas-10-text-to-device-form.png"); }
                	#design-spread .ibm ul li .figure-11 { background-image: url("../graphics/ibm/cmaas-11-chat-close.png"); }
                	#design-spread .ibm ul li .figure-12 { background-image: url("../graphics/ibm/cmaas-12-chat-feedback.png"); }

        			#design-spread .ibm ul li .meta { }
        
                		#design-spread .ibm ul li .meta h3 {
							color: #FFF;
                    		display: inline-block;
                    		font-family: 'jetbrains_monoextralight';
                    		font-size: 17px;
                    		line-height: 30px;
                    		margin-top: 25px;
                    		text-transform: uppercase;
                    	}

    #design-spread .intuit {
    	padding: 300px 0;
    }
    
    	#design-spread .intuit ul {
    		display: flex;
    			gap: 50px;
    		overflow: auto;
    		padding: 0 50px;
    	}
    
    		#design-spread .intuit ul::-webkit-scrollbar { display: none; }
    
    		#design-spread .intuit ul li { }
    
        		#design-spread .intuit ul li {
            		display: flex;
            			flex: 0 0 auto;
            			flex-direction: column;
            			justify-content: space-between;
        		}
        
                	#design-spread .intuit ul li .figure-01,
                	#design-spread .intuit ul li .figure-02,
                	#design-spread .intuit ul li .figure-03,
                	#design-spread .intuit ul li .figure-04,
                	#design-spread .intuit ul li .figure-05,
                	#design-spread .intuit ul li .figure-06,
                	#design-spread .intuit ul li .figure-07 {
						border-radius: 15px;
                		background-position: top left;
                		background-repeat: no-repeat;
                		background-size: cover;
						height: 690px;
						width: 320px;
                	}
   
                	#design-spread .intuit ul li .figure-01 { background-image: url("../graphics/intuit/file-taxes-01.jpg"); }
                    #design-spread .intuit ul li .figure-02 { background-image: url("../graphics/intuit/file-taxes-02.jpg"); }
                	#design-spread .intuit ul li .figure-03 { background-image: url("../graphics/intuit/file-taxes-03.jpg"); }
                	#design-spread .intuit ul li .figure-04 { background-image: url("../graphics/intuit/file-taxes-04.jpg"); }
                	#design-spread .intuit ul li .figure-05 { background-image: url("../graphics/intuit/file-taxes-05.jpg"); }
                	#design-spread .intuit ul li .figure-06 { background-image: url("../graphics/intuit/file-taxes-06.jpg"); }
		            #design-spread .intuit ul li .figure-07 { background-image: url("../graphics/intuit/file-taxes-07.jpg"); }

        			#design-spread .intuit ul li .meta { }
        
                		#design-spread .intuit ul li .meta h3 {
							color: #FFF;
                    		display: inline-block;
                    		font-family: 'jetbrains_monoextralight';
                    		font-size: 17px;
                    		line-height: 30px;
                    		margin-top: 25px;
                    		text-transform: uppercase;
                    	}

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

#clients {
	background: #000;
	padding: 300px 0 250px 0;
}

	#clients ul {
		display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		margin-left: 50px;
			width: calc(100% - 100px);
	}

		#clients ul li {
			margin-bottom: -1px;
			width: calc(32.75% - 25px);
		}

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

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

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

    				#clients ul li a.client-card p {
    					color: #929292;
        				font-family: 'jetbrains_monothin';
        				font-size: 17px;
        				line-height: 17px;
						text-transform: uppercase;
        			}

					#clients ul li a:hover.client-card p{ color: #FFF; transition: all 0.25s; }

                    #clients ul li a.client-card .svg-logo-ibm,
                    #clients ul li a.client-card .svg-logo-intuit,
                    #clients ul li a.client-card .svg-logo-pendo,
                    #clients ul li a.client-card .svg-logo-pepsico,
                    #clients ul li a.client-card .svg-logo-smartling,
					#clients ul li a.client-card .svg-logo-prg-vertical { color: #929292; transition: all 0.25s; }
    
                    #clients ul li a:hover.client-card .svg-logo-ibm,
                    #clients ul li a:hover.client-card .svg-logo-intuit,
                    #clients ul li a:hover.client-card .svg-logo-pendo,
                    #clients ul li a:hover.client-card .svg-logo-pepsico,
                    #clients ul li a:hover.client-card .svg-logo-smartling,
					#clients ul li a:hover.client-card .svg-logo-prg-vertical { color: #FFF; }

                    #clients ul li a.client-card .svg-logo-ibm { font-size: 2.5vw; }
                    #clients ul li a.client-card .svg-logo-intuit { font-size: 1.5vw; }
                    #clients ul li a.client-card .svg-logo-pendo { font-size: 2.5vw; }
                    #clients ul li a.client-card .svg-logo-pepsico { font-size: 3vw; }
                    #clients ul li a.client-card .svg-logo-smartling { font-size: 2.25vw; }
					#clients ul li a.client-card .svg-logo-prg-vertical { font-size: 3.5vw; }

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

#footer {
	display: flex;
    	flex-direction: column;
	background: #000;
	padding-top: 50px;
}

    #footer .legal {
    	display: flex;
    		align-items: flex-start;
    		justify-content: space-between;
    	margin-left: 50px;
    	padding-bottom: 40px;
    	width: calc(100% - 100px);
    }
    
			#footer .legal .copyright p,
			#footer .legal .dxc p {
    			color: #929292;
    			font-family: 'jetbrains_monothin';
    			font-size: 17px;
    			line-height: 30px;
    			text-transform: uppercase;
    			white-space: nowrap;
    		}

    
    	#footer .legal .copyright,
     	#footer .legal .dxc {
    		display: flex;
    			align-items: center;
    	}
    
    	#footer .legal .dxc {
    		display: flex;
    			align-items: center;
    	}


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

}