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

	body {
		min-height: 100vh;
		margin: 0;
		display: flex;
		flex-direction: column;
	}
	
	footer {
		min-height: 270px;
		flex-shrink: 0;
	}
	
	
	.prompt-semibold {
  		font-family: "Prompt", sans-serif;
  		font-weight: 600;
  		font-style: normal;
	}
	
	.cabin-400 {
  		font-family: "Cabin", sans-serif;
  		font-optical-sizing: auto;
  		font-weight: 400;
  		font-style: normal;
  		font-variation-settings: "wdth" 100;
	}
	
	.roboto-900 {
		font-family: "Roboto", sans-serif;
  		font-optical-sizing: auto;
  		font-weight: 900;
  		font-style: normal;
  		font-variation-settings: "wdth" 100;
	}
	
	.roboto-500 {
  		font-family: "Roboto", sans-serif;
  		font-optical-sizing: auto;
  		font-weight: 500;
  		font-style: normal;
  		font-variation-settings: "wdth" 100;
	}
	
	.roboto-300 {
  		font-family: "Roboto", sans-serif;
  		font-optical-sizing: auto;
  		font-weight: 300;
  		font-style: normal;
  		font-variation-settings: "wdth" 100;
	}
	
	.lato-regular {
  		font-family: "Lato", sans-serif;
  		font-weight: 400;
  		font-style: normal;
	}
	
	.saira-stencil {
		font-family: "Saira Stencil One", sans-serif;
	}
	
	#Footer {
		position: relative;
		z-index: 10;
	}
	
	#footerBottom {
		z-index: 1;
	}
	
	:root {
		--marquee-width: 100%;
		--marquee-height: 32vh;
		/* --marquee-elements: 12; */ /* defined with JavaScript */
		--marquee-elements-displayed: 7;
		--marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
		--marquee-animation-duration: calc(var(--marquee-elements) * 3s);
		--swiper-theme-color: #e5e5e5;
	}

	.marquee {
		width: var(--marquee-width);
	 	height: var(--marquee-height);
	  	background-color: #f8f9fa;
	  	color: #eee;
	  	overflow: hidden;
	  	position: relative;
	}
	
	.marquee:before, .marquee:after {
		position: absolute;
	  	top: 0;
	 	width: 10rem;
	  	height: 100%;
	  	content: "";
	  	z-index: 1;
	}
	
	.marquee:before {
		left: 0;
		background: -webkit-linear-gradient(left, #f8f9fa 0%, transparent 100%);
		background: -o-linear-gradient(left, #f8f9fa 0%, transparent 100%);
		background: linear-gradient(to right, #f8f9fa 0%, transparent 100%);
	}
	
	.marquee:after {
		right: 0;
	    background: -webkit-linear-gradient(right, #f8f9fa 0%, transparent 100%);
	    background: -o-linear-gradient(right, #f8f9fa 0%, transparent 100%);
	    background: linear-gradient(to left, #f8f9fa 0%, transparent 100%);
	}
	
	.marquee-content {
		list-style: none;
	 	height: 100%;
	  	display: flex;
	  	animation: scrolling var(--marquee-animation-duration) linear infinite;
	}
	
	/* .marquee-content:hover {
	  animation-play-state: paused;
	} */
	
	@keyframes scrolling {
		0% { transform: translateX(0); }
		100% { transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements))); }
	}
	
	.marquee-content li {
		display: flex;
	  	justify-content: center;
	  	align-items: center;
	  	/* text-align: center; */
	  	flex-shrink: 0;
	  	width: var(--marquee-element-width);
	  	max-height: 100%;
	  	font-size: calc(var(--marquee-height)*3/4); /* 5rem; */
	  	white-space: nowrap;
	}

	.marquee-content li img {
		width: 100%;
	  	/* height: 100%; */
	}

	.heroSwiper {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	
	.heroSwiper .swiper-wrapper {
		height: auto;
	}

	.heroSwiper .swiper-slide {
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	.heroSwiper .swiper-slide img {
		display: block;
		width: 100%;
		object-fit: contain;
	}	

	.productSwiper {
        width: 100%;
        padding-top: 50px;
        padding-bottom: 50px;
	}
	
	.productSwiper .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 300px;
        height: 300px;
		box-shadow: rgba(0, 0, 0, 0.46) 10px 10px 12px -4px;
	}

	.productSwiper .swiper-slide img {
        display: block;
        width: 100%;
	}
	
	.swiper-pagination-bullet {
    	background: var(--swiper-pagination-bullet-inactive-color, #ffffff);
	}

	.skew-img:hover {
    	filter: contrast(200%);
	}
	
	.skew-img {
        -webkit-transform: skew(-13deg);
        -moz-transform: skew(-13deg);
        -ms-transform: skew(-13deg);
        -o-transform: skew(-13deg);
        transform: skew(-13deg);
    }
	
	.skew-img {
		width: 25%;
		float: left;
		position: relative;
		min-height: 20em;
		overflow: hidden;
		background: #060606;
		filter: grayscale(100%);
	}
	
	.skew-img:before {
        content: '';
        -webkit-transform: skew(13deg);
        -moz-transform: skew(13deg);
        -ms-transform: skew(13deg);
        -o-transform: skew(13deg);
        transform: skew(13deg);
        width: 18em;
        left: -4.6875em;
    }
	
	.skew-img:before {
		content: '';
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		width: 100%;
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		opacity: .80;
	}
	
	.skew-img:nth-child(1):before {
		background-image: url("https://sdp-si.com/images/aerospace-market.jpg");
		opacity: 1;
	    transform: scale(1.3) skewX(15deg);
	}

	.skew-img:nth-child(2):before {
		background-image: url(https://sdp-si.com/Markets/images/robotics-index-1.png);
		transform: scale(1.3) skewX(15deg);
	}

	.skew-img:nth-child(3):before {
		background-image: url(https://sdp-si.com/Markets/images/industry-index-1.png);
		transform: scale(1.3) skewX(15deg);
	}

	.skew-img:nth-child(4):before {
		background-image: url(https://sdp-si.com/Markets/images/medical-index-1.png);
		transform: scale(1.3) skewX(15deg);
	}
	
	.skew-text {
		opacity: 0;
		position: relative;
		bottom: -200px;
		transition: all 0.5s ease;
	}
	
	.skew-text h4 {
		transform: skew(15deg);
	}
	
	.skew-img:hover .skew-text {
		opacity: 1;
		bottom: -90px;
		transition: all 0.5s ease;
		background: rgba(0, 0, 0, 0.5);
    	padding: 20px;
		height: 120px;
	}
	
	.markets-background {
		background-color: rgba(0, 0, 0, .68);
		margin-top: 100px;
	}
	
	.white-card {
		background-color: #e6f3f8;
		color: #0e2e54;
	}
	
	.white-card img {
		-webkit-filter: drop-shadow(2px 2px 3px #111);;
  		filter: drop-shadow(2px 2px 3px #111);
		transition: 0.4s ease;
	}
	
	.white-card:hover {
		background-color: #0d6efd;
		color: white;
		transition: 0.4s ease;
	}
	
	.white-card:hover img {
		-webkit-filter: brightness(0) invert(1) drop-shadow(2px 2px 3px #222);
  		filter: brightness(0) invert(1) drop-shadow(2px 2px 3px #222);
		transition: 0.4s ease;
	}
	
	.large-font {
		font-size: 4.5vw;
	}
	
	.cta {
		margin-top: 100px;
		margin-bottom: 100px;
	}
	
	.chevron {
		background-color: #0d6efd;
		display: inline-block;
		padding-right: 15px;
		color: white;
		padding-left: 15px;
	}
	
	.white-card:hover .chevron {
		background-color: white;
		color: #0d6efd;
		transition: 0.4s ease;
	}
	
	.text-shadow {
		box-shadow: inset 0px 80px 0px 0px rgb(0 0 0 / 66%);
	}




	:root {
		--scale: 0.1;
		--space: 8vmin;
		--font-primary: 'Lato', sans-serif;
		--font-heading: 'Playfair Display', serif;
	}

	@media (prefers-reduced-motion) {
		:root {
			--scale: 0;
		}
	}
	
	.section {
		transform-origin: center top;
		transform: scaleY(calc(1 - var(--scale)));
	}

	.section > * {
		transform-origin: center top;
		transform: scaleY(calc(1 / (1 - var(--scale))));
	}

	.content {
		margin-top: 0;
	}

	.image-container {
		position: sticky;
		top: 0;
		width: 100%;
		height: 5vh;
		z-index: -2;
	}

	.image-container img {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 115vh;
		object-fit: cover;
	}
/*
	.image-container::after {
		content: '';
		position: absolute;
		bottom: -150px;
		left: 0;
		width: 100%;
		height: 50%;
		background: linear-gradient(
		to bottom,
		hsla(5, 15%, 5%, 0) 0%,
		hsla(5, 15%, 5%, 0.013) 8.1%,
		hsla(5, 15%, 5%, 0.049) 15.5%,
		hsla(5, 15%, 5%, 0.104) 22.5%,
		hsla(5, 15%, 5%, 0.175) 29%,
		hsla(5, 15%, 5%, 0.259) 35.3%,
		hsla(5, 15%, 5%, 0.352) 41.2%,
		hsla(5, 15%, 5%, 0.45) 47.1%,
		hsla(5, 15%, 5%, 0.55) 52.9%,
		hsla(5, 15%, 5%, 0.648) 58.8%,
		hsla(5, 15%, 5%, 0.741) 64.7%,
		hsla(5, 15%, 5%, 0.825) 71%,
		hsla(5, 15%, 5%, 0.896) 77.5%,
		hsla(5, 15%, 5%, 0.951) 84.5%,
		hsla(5, 15%, 5%, 0.987) 91.9%,
		hsl(5, 15%, 5%) 100%);
	}
*/
	@keyframes fadein {
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@media all and (max-width: 767px) {
		.image-container img {
			height: 135vh;
		}
		.image-container::after {
			bottom: -250px;
		}
	}





/*	
	:root {
		--parallax-scale: 0.4;
	  	--parallax-min-height: 44rem;
	  	--container-offset-adjustment: 65rem;
	}

	/* disable if requested for accessibility reasons 
	@media (prefers-reduced-motion) {
		:root {
			--parallax-scale: 0;
	  	}
	}

	/* container around parallax layers 
	.parallax__group {
		position: relative;
	  	z-index: 0;
	  	transform-origin: center;
	  	transform: scaleY(calc(1 - var(--parallax-scale)));
	  	margin-top: calc(
		var(--container-offset-adjustment)
		+ 
		(-1 * max(160vh, var(--parallax-min-height)))
	  	);
	  	margin-bottom: calc(-1.1 * var(--container-offset-adjustment));
	}

	.parallax__layer {
		transform-origin: center;
	  	transform: scaleY(calc(1 / (1 - var(--parallax-scale))));
	}

	.parallax__layer--foreground {
		position: relative;
		top: -800px;
		z-index: 1;
	}

	.parallax__layer--background {
		position: sticky;
	  	z-index: -2;
	  	top: -500px;
	  	transform-origin: center;
	  	transform: scaleY(calc(1.24 / (1 - var(--parallax-scale))));
	  	height: 185vh;
	  	min-height: 100vh;
	  	min-height: max(100vh, var(--parallax-min-height));
	  	width: 100%;
	  	background-attachment: fixed; /* legacy fallback 
	  	background-image: url("https://sdp-si.com/images/parallax-background.jpg"); 
	  	background-repeat: no-repeat;
	  	background-size: cover;
	}
	
	@media all and (max-width: 600px) {	
		.parallax__group {
			margin-top: calc(-1.5 * var(--container-offset-adjustment));
			margin-bottom: calc(-1.1 * var(--container-offset-adjustment));
		}
		.parallax__layer--background {
			height: 210vh;
		}
	}

*/






	.back-opacity {
		--bs-bg-opacity: 0.8;
	}
		
	@media all and (max-width: 1199px) {
		.skew-img {
			width: 50%;
		}
		
		.skew-img:nth-child(1) {
			transform: skewX(-10deg) translateX(50px);
		}
	
		.skew-img:nth-child(2) {
			transform: skewX(-10deg) translateX(50px);
		}
		
		.skew-img:nth-child(3) {
			transform: skewX(-10deg) translateX(15px);
		}
	
		.skew-img:nth-child(4) {
			transform: skewX(-10deg) translateX(15px);
		}
		
		.markets-skew {
			transform: translateX(-50px);
		}
		
		.skew-img:nth-child(1):before {
	    	transform: scale(1.3) skewX(10deg);
		}

		.skew-img:nth-child(2):before {
			transform: scale(1.3) skewX(10deg);
		}

		.skew-img:nth-child(3):before {
			transform: scale(1.3) skewX(10deg);
		}

		.skew-img:nth-child(4):before {
			transform: scale(1.3) skewX(10deg);
		}

		.skew-text h4 {
			transform: skew(10deg);
		}
		
		.subheader {
			font-size: 3em;
		}
	}

	@media only screen and (hover: none) and (pointer: coarse) {
		.swiper-button-next {
			display: none;
		}
		.swiper-button-prev {
			display: none;
		}
	}

	@media (min-width: 1350px) {
		#content {
			margin-top: 50px !important;
		}
	}

	@media (max-width: 1349px) {
		#content {
			margin-top: 102px !important;
		}
	}
	
	@media (max-width: 800px) {
		#slides {
        	height: auto;
		}	
	}
	
	@media all and (max-width: 767px) {
		.center-button {
			position: relative;
			left: 50%;
			transform: translateX(-50%);
		}
		
		.cta-buttons {
			text-align: center;
		}
	}
	
	@media all and (max-width: 640px) {
		.skew-img:nth-child(1):before {
			transform: scale(1.3) skewX(0deg);
		}

		.skew-img:nth-child(2):before {
			transform: scale(1.3) skewX(0deg);
		}

		.skew-img:nth-child(3):before {
			transform: scale(1.3) skewX(0deg);
		}

		.skew-img:nth-child(4):before {
			transform: scale(1.3) skewX(0deg);
		}

		.skew-img:nth-child(1) {
			transform: skewX(0deg) translateX(50px);
		}

		.skew-img:nth-child(2) {
			transform: skewX(0deg) translateX(50px);
		}
		
		.skew-img:nth-child(3) {
			transform: skewX(0deg) translateX(50px);
		}
		
		.skew-img:nth-child(4) {
			transform: skewX(0deg) translateX(50px);
		}
		
		.skew-text h4 {
			transform: skew(0deg);
		}
		
		.skew-img:hover .skew-text {
			bottom: -120px;
		}
	}
	
	@media (max-width: 600px) {
		:root {
			--marquee-width: 100%;
			--marquee-height: 25vh;
			--marquee-elements-displayed: 3;
		}
		
		.marquee:before, .marquee:after { 
			width: 5rem; 
		}
	}
	
	@media all and (max-width: 575px) {
		.ny-robot {
			text-align: center;
		}
	}
	
	@media all and (max-width: 500px) {
		.skew-img {
			width: 100%;
		}
	}
		
	#element svg {
		position: absolute;
		width: 200px;
		height: 200px;
	  	top: 0%;
	  	left: 0%;
	  	margin-top: 10px;
	  	margin-left: 5vw;
		z-index: 20;

	  	animation: rotate 1s linear infinite;
	  	animation-play-state: paused;
	  	animation-delay: calc(var(--scroll) * -1s);

	  	animation-iteration-count: 1;
	  	animation-fill-mode: both;
	}

	@keyframes rotate {
		to {
			transform: rotate(360deg);
	  	}
	}

	#element {
		min-height: 200vh;
		position:absolute;
		z-index: 20;
	}
	
	@media all and (max-width: 991px) {
		#element svg {
			margin-left: 0vw;
		}
	}
	
	@media all and (max-width: 767px) {
		#element svg {
			display: none;
		}
	}
		
	@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
		@media (min-width: 768px) and (max-width: 991px) {
			.white-card {
				min-height: 320px;
			}
		}
		@media (min-width: 992px) and (max-width: 1399px) {
			.white-card {
				min-height: 420px;
			}
		}
	}
		
	.cta {
		margin-top: 60px;
		margin-bottom: 60px;
	}
	
	.robot-background {
		background-image: url("../images/robot-wide.jpg");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: top center;
		min-height: 27vw;
		border-color: #ee3333 !important;
	}
	
	.sdpsi-border {
		border-color: #ee3333 !important;
	}
		
	.button-center {
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	.btn-cta {
		background-color: #7790b0;
		border-radius: 25px;
		padding: 10px 20px;
		color: #ffffff;
		transition: 0.5s ease-out;
	}
	
	.btn-cta:hover {
		background-color: #f9fbf8;
		color: #232323;
		border: 1px solid #7790b0;
	}
	
	.btn-cta:hover svg {
		color: #ffffff;
	}
	
	.btn-cta:visited {
		color: #ffffff !important;
	}
	
	.btn-cta:hover {
		color: #7790b0 !important;
	}
	
	.btn-cta:link {
		color: #ffffff;
	}
	
	.btn-cta:hover svg {
		fill: #7790b0;
	}
	
	.btn-cta svg {
		width: 20px;
		fill: #ffffff;
	}
	
	.markets-background {
		overflow: hidden;
	}
	
	@media (max-width: 991px) {
		.light-back {
			background-color: #f9fbf8;
			box-shadow: 6px 6px 10px #00000033;
		}
	}
	
	@media (min-width: 768px) and (max-width: 991px) {
		.white-card .card-text {
			font-size: 1.5em !important;
		}
		
		.white-card .card-title {
			font-size: 1.5em !important;
		}
	}