@charset "UTF-8";


@font-face {
font-family: Raleway;
src: url("assets/Raleway-Thin.ttf");
font-weight: 100;
}

@font-face {
font-family: Raleway;
src: url("assets/Raleway-ExtraLight.ttf");
font-weight: 200;
}

@font-face {
font-family: Raleway;
src: url("assets/Raleway-Light.ttf");
font-weight: 300;
}

@font-face {
font-family: Raleway;
src: url("assets/Raleway-Regular.ttf");
font-weight: 400;
}

@font-face {
font-family: Raleway;
src: url("assets/Raleway-Medium.ttf");
font-weight: 500;
}


@font-face {
font-family: Raleway;
src: url("assets/Raleway-SemiBold.ttf");
font-weight: 600;
}

@font-face {
font-family: Raleway;
src: url("assets/Raleway-Bold.ttf");
font-weight: 700;
}

@font-face {
font-family: Raleway;
src: url("assets/Raleway-ExtraBold.ttf");
font-weight: 800;
}

@font-face {
font-family: Raleway;
src: url("assets/Raleway-Black.ttf");
font-weight: 900;
}


html {
height:100%;
width:100%;
}
 
body {
margin:0px;
width:100%;  
height:100%;
display:flex;
overflow:hidden;
}









@keyframes ac-grow-mob {
  0% {width:96px; height:64px; border-radius:6px}
  80% {width:96px; height:64px; border-radius:6px}
  90% {width:100%; height:64px; border-radius:6px}
  100% {width:100%; height:64px; border-radius:6px 6px 0px 0px}
}


@keyframes ac-wrap-grow-mob {
  0% {width:96px}
  80% {width:96px}
  90% {width:90%}
  100% {width:90%}
}


@keyframes col-grow-mob {
  0% {width:96px; height:64px}
  80% {width:96px; height:64px}
  90% {width:100%; height:64px}
  100% {width:100%; height:460px}

}

@keyframes col-grow-know-mob {
  0% {width:96px; height:64px; background-color: rgba(138, 214, 229, 0.0)}
  20% {width:96px; height:64px; background-color: rgba(138, 214, 229, 0.0)}
  40% {width:96px; height:64px; background-color: rgba(138, 214, 229, 0.0)}
  80% {width:96px; height:64px; background-color: rgba(138, 214, 229, 0.4)}
  90% {width:100%; height:64px; background-color: rgba(138, 214, 229, 0.4)}
  100% {width:100%; height:460px; background-color: rgba(138, 214, 229, 0.4)}

}

@keyframes col-grow-disc-mob {
   0% {width:96px; height:64px; background-color: rgba(138, 214, 229, 0.0)}
  30% {width:96px; height:64px; background-color: rgba(138, 214, 229, 0.0)}
  50% {width:96px; height:64px; background-color: rgba(138, 214, 229, 0.0)}
  80% {width:96px; height:64px; background-color: rgba(138, 214, 229, 0.4)}
  90% {width:100%; height:64px; background-color: rgba(138, 214, 229, 0.4)}
  100% {width:100%; height:460px; background-color: rgba(138, 214, 229, 0.4)}
}

@keyframes col-grow-create-mob {
  0% {width:96px; height:64px; background-color: rgba(138, 214, 229, 0.0)}
  40% {width:96px; height:64px; background-color: rgba(138, 214, 229, 0.0)}
  60% {width:96px; height:64px; background-color: rgba(138, 214, 229, 0.0)}
  80% {width:96px; height:64px; background-color: rgba(138, 214, 229, 0.4)}
  90% {width:100%; height:64px; background-color: rgba(138, 214, 229, 0.4)}
  100% {width:100%; height:460px; background-color: rgba(138, 214, 229, 0.4)}

}


@keyframes col-grow-bkg-mob {
  0% {width:96px; height:64px}
  80% {width:96px; height:64px}
  90% {width:100%; height:64px}
  100% {width:100%; height:64px}
}

@keyframes grow-txt-mob {
  0% {height: 0px; padding:0px; width:0px;}
  80% {height: 0px; padding:0px; width:0px;}
  90% {height: 0px; padding:0px; width: 100%;}
  100% {height: 260px; padding:10px 24px; width: calc(100% - 48px);}

}

@keyframes fadein-text-mob {
  0% {font-size: 0px; line-height: 0px; color: rgba(41, 31, 51, 0)}
  96% {font-size: 0px; line-height: 0px; color: rgba(41, 31, 51, 0)}
  100% {font-size: 13px; line-height: 26px; color: rgba(41, 31, 51, 0.9)}
}

@keyframes grow-wrap-mob {
  0% {height: 0px; width: 0px; margin: 0px;}
  80% {height: 0px;width: 0px; margin: 0px;}
  90% {height: 0px; width: 160px; margin: 0px auto;}
  100% {height: 40px; width: 160px; margin: 20px auto 40px auto;}
}

@keyframes read-cb-mob {
  0% {height: 0px; background: rgba(0,0,0,0)}
  90% {height: 0px; background: rgba(0,0,0,0)}
  100% {height: 40px; background: rgba(138, 214, 229, 0.22)}
}

@keyframes read-but-mob {
  0% {height: 0px; opacity: 0%; background: rgba(0,0,0,0)}
  90% {height: 0px; opacity: 0%; background: rgba(0,0,0,0)}
  100% {height: 40px; opacity: 100%; background-color: rgba(138, 214, 229, 0.1)}
}

@keyframes rm-fadein-mob {
 0% {opacity:0%; height:0px; width: 0px;}
  90% {opacity:0%; height:0px; width: 0px;}
  100% {opacity:100%; height: 24px; width: 122px;}
}

@keyframes rm-txt-mob {
  0% {color: rgba(41, 31, 51, 0); line-height:0px; font-size: 0px;}
  90% {color: rgba(41, 31, 51, 0); line-height:0px; font-size: 0px;}
  100% {color: rgba(41, 31, 51, 1); line-height: 24px; font-size: 12px;}
}

@keyframes rm-arrow-mob {
  0% {opacity:0%; height:0px; width: 0px;}
  90% {opacity:0%; height:0px; width: 0px;}
  100% {opacity:100%; height: 16px; width: 16px;}
}

@keyframes read-grad-mob {
  0% {height: 0px; width:0px; background: rgba(204, 226, 255, 0.0);}
  90% {height: 0px; width:0px; background: rgba(204, 226, 255, 0.0);}
  100% {height: 40px; width:160px; background: linear-gradient(
	130deg, 
	rgba(204, 226, 255, 0.08) 0%,
	rgba(157, 200, 255, 0.02) 10%,
	rgba(240, 247, 255, 0.2) 36%,
	rgba(247, 251, 255, 0.2) 70%,
	rgba(157, 200, 255, 0.04) 82%,
	rgba(204, 226, 255, 0.08) 100%
	);}
}

@keyframes header-top-mob {
0% {opacity:0%; top:40px}
20% {opacity:100%; top:40px}
60% {opacity:100%; top:40px}
80% {opacity:100%; top:0px}
100% {opacity:100%; top:0px}

}

@keyframes wyn-text-vanish-mob {
  0% {width:100%; line-height:40px; padding-top:80px; color: rgba(41, 31, 51, 0)}
  7% {width:100%; line-height:40px; padding-top:80px; color: rgba(41, 31, 51, 0)}
  21% {width:100%; line-height:40px; padding-top:80px; color: rgba(41, 31, 51, .9)}
  43% {width:100%; line-height:40px; padding-top:80px; color: rgba(41, 31, 51, .9)}
  57% {width:100%; line-height:40px; padding-top:20px; color: rgba(41, 31, 51, .9)}
   78% {width:100%; line-height:40px; padding-top:20px; color: rgba(255, 255, 255, 1)}
  86% {width:100%; line-height:40px; padding-top:20px; color: rgba(255, 255, 255, 1)}
  93% {width:100%; line-height:20px; padding-top:20px; color: rgba(255, 255, 255, 0.0)}
  100% {width:0px; line-height:0px; padding-top:0px; color: rgba(41, 31, 51, 0);}



 0% {width:100%; line-height:40px; padding-top:80px; color: rgba(41, 31, 51, 0)}
  7% {width:100%; line-height:40px; padding-top:80px; color: rgba(41, 31, 51, 0)}
  21% {width:100%; line-height:40px; padding-top:80px; color: rgba(31, 41, 51, 1)}
  43% {width:100%; line-height:40px; padding-top:80px; color: rgba(31, 41, 51, 1)}
  57% {width:100%; line-height:40px; padding-top:20px; color: rgba(31, 41, 51, 1)}
  64.3% {width:100%; line-height:40px; padding-top:20px; color: rgba(31, 41, 51, 1)}
  70% {width:100%; line-height:40px; padding-top:20px; color: rgba(143, 148, 153, 1)}
  78.5% {width:100%; line-height:40px; padding-top:20px; color: rgba(255, 255, 255, 1)}
  86% {width:100%; line-height:40px; padding-top:20px; color: rgba(255, 255, 255, 1)}
  93% {width:100%; line-height:20px; padding-top:20px; color: rgba(255, 255, 255, 0)}
  100% {width:0px; line-height:0px; padding-top:0px; color: rgba(255, 255, 255, 0);}

}



@keyframes bkg-fade {
  0% {background-color: rgba(255, 255, 255, 1)}
  82% {background-color: rgba(255, 255, 255, 1)}
  100% {background-color: rgba(255, 255, 255, 0)}
}



.bkg-kdc-white-animate {
  background-color: rgba(255, 255, 255, 0);
  height:100%;
  left: 0px;
  top: 0px;
  width: 100%;
  border: none;
  position:fixed;
  z-index:4;
 animation:bkg-fade 11s;
  animation-fill-mode:forwards;
}


.bkg-kdc-light {

background: rgba(46, 61, 77, 1);
  mix-blend-mode:color-burn;
  height:100%;
  left: 0px;
  top: 0px;
  width: 100%;
  border: none;
  position:absolute;
  isolation:isolate;
  z-index:1;

}


/*size change mobile*/



/*size change desktop*/


/*@keyframes col-grow-grad {
  0% {width:204px; height:136px}
  81% {width:204px; height:136px}
  94% {width:100%; height:136px}
  100% {width:100%; height:560px} 
  }	*/











@media (max-width : 639px ){



/*.bkg-kdc-light  {
background: conic-gradient(
    from 240deg at -10% 110%,
rgba(172, 200, 226, 0.6) 122deg,
rgba(215, 231, 247, 0.7) 128deg,
rgba(169, 208, 247, 0.7) 132deg,
rgba(184, 209, 233, 0.7) 134deg,
rgba(163, 198, 233, 0.6) 148deg,
rgba(131, 157, 185, 0.6) 168deg,
rgba(159, 185, 209, 0.6) 176deg,
rgba(199, 227, 253, 0.6) 187deg,
rgba(163, 198, 233, 0.4) 194deg,
rgba(105, 128, 151, 0.4) 200deg,
rgba(149, 200, 251, 0.4) 202deg

);
 height:100%;
  left: 0px;
  top: 0px;
  width: 100%;
  border: none;
  position:fixed;
  z-index:1;
}*/

.h1home {
width:0px;
height:0px;
position:absolute;
top:0px;
left:0px;
}

.h1home h1{
color: rgba(41, 31, 51, 0);
font-family: Raleway;
font-size: 0px;
font-style: normal;
font-weight: 100;
line-height: 0px; /* 150% */
letter-spacing: 0px;	
}

.actxt-home-light {
height: 16px; 
margin:0px;
}



.actxt-home-light h2{
color: rgba(41, 31, 51, 1);
font-family: Raleway;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 16px; /* 150% */
font-variant: small-caps;
letter-spacing: 1.6px;	
margin:0px;
}

.ac-content {
height:48px;
margin: 8px auto;
}

.logo-wrap-coming {
position: absolute;
width: 100%;
top:0px;
left:0px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
z-index: 5002;

}

.logo-text-img {
background: url("images/OIC Logo Text.png");
width:280px;
height:63px;
background-size: contain;
background-repeat: no-repeat;
}

.menu-dropdown-animation {
position:absolute;
right:0px;
top:0px;
width:60px;
height:60px;
display:flex;
flex-direction:column;
justify-content: flex-start;
align-items:flex-start;
overflow:hidden;
z-index:5100;
animation:fadein 10s;
animation-fill-mode:forwards;
}

	
.menu-dropdown-animation .menu-wrap {
position:absolute;
right:0px;
top:0px;
width:60px;
height:60px;
}
	
.menu-dropdown-animation .menu {
margin: 15px;
height: 30px;
width:30px;
background: url("images/Menu Icon 30.png");
background-size: contain; 
}
	


.page-scroll-home {
width:80%;
margin:0px auto;
display:flex;
flex-direction:column;
align-items:center;
justify-content: flex-start;
overflow-y:auto;
position:relative;
}

	
.when-you-need {
display:flex;
flex-direction:row;
justify-content: center;
align-items:flex-start;
white-space: normal;
position:relative;
/*animation:wyn-padding 10s;
animation-fill-mode:forwards;*/
}

.when-you-need p{
width:0px;
padding-top:0px;
color: rgba(41, 31, 51, 0);
align-content: center;
text-align:center;
font-family: Raleway;
font-size: 20px;
font-style: normal;
font-weight: 300;
line-height: 0px;
text-transform:uppercase;
letter-spacing: 1.92px;
animation:wyn-text-vanish-mob 14s;
animation-fill-mode:forwards;
}



.home-ac-wrap {
width:90%;
display:flex;
margin:20px 0px;
flex-direction:column;
justify-content: flex-start;
align-items:center;
white-space: normal;
position:relative;
gap:40px;
animation:ac-wrap-grow-mob 10s;
animation-fill-mode:forwards;
}

.home-KDC-col {
width:100%;
height:460px;
display:flex;
flex-direction:column;
justify-content: flex-start;
align-items:center;
animation:col-grow-mob 10s;
animation-fill-mode:forwards;
}
		
.home-KDC-colorburn {
width:100%;
height:460px;
border-radius: 6px;
background: rgba(31, 92, 153, 1);
mix-blend-mode:color-burn;
white-space: normal;
isolation: isolate;
position:absolute;
animation:col-grow-mob 10s;
animation-fill-mode:forwards;
z-index:5;
}
	
.home-KDC-glass {
width:100%;
height:460px;
border-radius: 6px;
background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.4) 7%,
    rgba(255, 255, 255, 0.45) 15%,
    rgba(255, 255, 255, 0.4) 25%,
    rgba(255, 255, 255, 0.45) 31%,
    rgba(255, 255, 255, 0.4) 37%,
    rgba(255, 255, 255, 0.35) 49%,
    rgba(255, 255, 255, 0.3) 57%,
    rgba(255, 255, 255, 0.35) 68%,
    rgba(255, 255, 255, 0.4) 79%,
    rgba(255, 255, 255, 0.35) 87%,
    rgba(255, 255, 255, 0.3) 100%
);
mix-blend-mode:hard-light;
white-space: normal;
isolation: isolate;
position:absolute;
animation:col-grow-mob 10s;
animation-fill-mode:forwards;
z-index:6;	
		
	}



.home-KDC-bkg {
width:100%;
height:460px;
display:flex;
flex-direction:column;
justify-content: flex-start;
align-items:center;
background: rgba(255, 255, 255, 0.3);
border-radius:6px;
animation:col-grow-mob 10s;
animation-fill-mode:forwards;
z-index:7;

}	

.home-KDC-gradient {
width:100%;
height:64px;
border-radius: 2px 2px 0px 0px;
mix-blend-mode: color-burn;
position:absolute;
isolation:isolate;
background: linear-gradient(
	130deg, 
	rgba(204, 226, 255, 0.08) 0%,
	rgba(157, 200, 255, 0.02) 10%,
	rgba(240, 247, 255, 0.2) 36%,
	rgba(247, 251, 255, 0.2) 70%,
	rgba(157, 200, 255, 0.04) 82%,
	rgba(204, 226, 255, 0.08) 100%
	);
box-shadow:0px -20px 40px rgba(93, 85, 104, 0.1) inset;
animation:col-grow-bkg-mob 10s;
animation-fill-mode:forwards;
z-index: 5;

}


.home-KDC-gradient:hover {
width:100%;
height:64px;
border-radius: 2px 2px 0px 0px;
mix-blend-mode: color-burn;
position:absolute;
isolation:isolate;
background: linear-gradient(
	130deg, 
	rgba(204, 226, 255, 0.08) 0%,
	rgba(157, 200, 255, 0.02) 10%,
	rgba(240, 247, 255, 0.2) 36%,
	rgba(247, 251, 255, 0.2) 70%,
	rgba(157, 200, 255, 0.04) 82%,
	rgba(204, 226, 255, 0.08) 100%
	);
box-shadow:0px -20px 40px rgba(93, 85, 104, 0.1) inset;
animation:col-grow-bkg-mob 10s;
animation-fill-mode:forwards;
z-index: 5;

}

.home-KDC-text {
width: calc(100% - 48px);
height: 260px;
padding:10px 24px;
display:flex;
margin:auto;
flex-direction:column;
justify-content: flex-start;
align-items:center;
animation:grow-txt-mob 10s;
animation-fill-mode:forwards;

}

.home-KDC-text p{
color: rgba(41, 31, 51, 0.9);
align-content: center;
font-family: Raleway;
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: 26px; /* 150% */
letter-spacing: 2.4px;
animation:fadein-text-mob 10s;
animation-fill-mode: forwards;
}		

header {
animation:header-top-mob 10s;
animation-fill-mode: forwards;
}

.logo-wrap {
animation:header-top-mob 10s;
animation-fill-mode: forwards;
}

.logo-text-wrap {
animation:header-top-mob 10s;
animation-fill-mode: forwards;
}

.ac-card-wrap {
width:100%;
height:64px;
border-radius:6px 6px 0px 0px;
animation:ac-grow-mob 10s;
animation-fill-mode:forwards;
}



.Read-more-gradient {
width: 160px;
height: 40px;
margin:0px auto;
border-radius: 2px;
mix-blend-mode: color-burn;
position:absolute;
isolation:isolate;
background: linear-gradient(
	130deg, 
	rgba(204, 226, 255, 0.08) 0%,
	rgba(157, 200, 255, 0.02) 10%,
	rgba(240, 247, 255, 0.2) 36%,
	rgba(247, 251, 255, 0.2) 70%,
	rgba(157, 200, 255, 0.04) 82%,
	rgba(204, 226, 255, 0.08) 100%
	);
z-index: 12;
animation:read-grad-mob 10s;
animation-fill-mode:forwards;
}



.ac-colorburn {
width:100%;
height:64px;
background-color:  rgba(138, 184, 229, 0.4);
border-radius:6px 6px 0px 0px;
animation:ac-grow-mob 10s;
animation-fill-mode:forwards;
z-index:9;
}
	
.ac-glass {
width:100%;
height:64px;
border-radius:6px 6px 0px 0px;
background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.4) 7%,
    rgba(255, 255, 255, 0.45) 15%,
    rgba(255, 255, 255, 0.4) 25%,
    rgba(255, 255, 255, 0.45) 31%,
    rgba(255, 255, 255, 0.4) 37%,
    rgba(255, 255, 255, 0.35) 49%,
    rgba(255, 255, 255, 0.3) 57%,
    rgba(255, 255, 255, 0.35) 68%,
    rgba(255, 255, 255, 0.4) 79%,
    rgba(255, 255, 255, 0.35) 87%,
    rgba(255, 255, 255, 0.3) 100%
);
mix-blend-mode:hard-light;
animation:ac-grow-mob 10s;
animation-fill-mode:forwards;
z-index:10;

}



.ac-sel-light {
width:100%;
height:64px;
z-index:11;
background: rgba(255, 255, 255, 0.01);
border-radius:6px 6px 0px 0px;
animation:ac-grow-mob 10s;
animation-fill-mode:forwards;
}





.banner-bkg {
animation:header-delay 10s;
animation-fill-mode:forwards;
}


.menu-dropdown-closed {
animation:fadein 10s;
animation-fill-mode:forwards;
}


.content-box-wrap {
width:82%;
min-width:300px;
border-radius: 2px;
white-space: normal;
position:relative;
background-color: rgba(255, 255, 255, 0.01);
margin:36px 0px 80px 0px;
padding:0px 0px 48px 0px;
z-index:2;
}	


.content-box-colorburn {
width:100%;
height: 100%;
border-radius: 2px;
background-color: rgba(138, 214, 229, 0.4);
mix-blend-mode: color-burn;
white-space: normal;
isolation: isolate;
position:absolute;
padding:48px auto 0px auto;
z-index:3;
}



.content-box-2 {
width:100%;
height:100%;
border-radius: 2px;
display:flex;
flex-direction:column;
justify-content: flex-start;
gap:14px;
align-items:center;
top:0px;
background: rgba(138, 214, 229, 0.1);
padding:20px 0px 44px 0px;
white-space: normal;
position:relative;
z-index:4;
}

.smaller-content-box {
width:80%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
margin: 0px auto;
gap:22px;
}



.KDC-Content-header {
display:flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 6px;
width:160px;
height:30px;
margin:0px auto;
}

.KDC-content-header-icon {
width: 30px;
height: 30px;
}

.KDC-content-header-txt {
color: var(--purple-default, #291F33);
font-family: Raleway;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 125% */
font-variant: small-caps;
letter-spacing: 2.4px;
}



.text {
color: var(--grey-by-brightness-10, #16181A);
text-align: justify;

/* Body/Small/Regular */
font-family: Raleway;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 26px; /* 216.667% */
letter-spacing: 1.92px;
}

	
	
.STPP-KDC-view-frame {
width:100%;
min-height: 600px;
max-height:640px;
/*Change height when "read more" button added back in!
min-height: 660px;
max-height:660px;*/

white-space:nowrap;
overflow-x:hidden;
margin: 0px;
background-color: rgba(255, 255, 255, 0.01);
z-index: 5;
}


.STPP-KDC-scroll-bkg {
width:100%;
min-height: 600px;
max-height:640px;
/*Change height when "read more" button added back in!
min-height: 660px;
max-height:660px;*/
border-radius:6px 6px 0px 0px;	
background-color: rgba(138, 214, 229, 0.4);
mix-blend-mode: color-burn;
position:absolute;
left:0px;
isolation:isolate;
z-index:6;
}


.STPP-KDC-scroll-frame {
min-height: 600px;
max-height:640px;
/*Change height when "read more" button added back in!
min-height: 660px;
max-height:660px;*/
border-radius:6px;
display:flex;
flex-direction:column;
justify-content:flex-start;
white-space: nowrap;
overflow-x:auto;
position:relative;
background-color: rgba(138, 214, 229, 0.1);
z-index: 7;
}


.STPP-KDC-wrap {
background-color: rgba(255, 255, 255, 0.01);

}


#Science:default {
width:100%;
min-height: 60px;
max-height:60px;
border-radius:6px 6px 0px 0px;
background-color: rgba(255, 255,255, 0.1);
}



#Science:target {
width:100%;
min-height: 420px;
max-height:420px;
/*Change height when "read more" button added back in!
min-height: 480px;
max-height:480px;*/
border-radius:6px 6px 0px 0px;

}

#Tech:default {
width:100%;
min-height: 60px;
max-height:60px;
border-radius:0px;
background-color: rgba(255, 255,255, 0.1);
}

#Tech:target {
width:100%;
min-height: 420px;
max-height:420px;
/*Change height when "read more" button added back in!
min-height: 480px;
max-height:480px;*/

border-radius:0px;
}

#Products:default {
width:100%;
min-height: 60px;
max-height:60px;
border-radius:0px;
background-color: rgba(255, 255,255, 0.1);
}

#Products:target {
width:100%;
min-height: 420px;
max-height:420px;
border-radius:0px;
}


#People:default {
width:100%;
min-height: 60px;
max-height:60px;
border-radius:0px 0px 2px 2px;
background-color: rgba(255, 255,255, 0.1);
}


#People:target {
width:100%;
min-height: 420px;
max-height:420px;
border-radius:0px 0px 2px 2px;
background-color: rgba(255, 255,255, 0.01);
}


.STPP-KDC-bkg {	
display:none;
width:100%;
border-radius: 0px 0px 0px 0px;	
background-color: rgba(138, 214, 229, 0.4);
mix-blend-mode: color-burn;
position:absolute;
left:0px;
isolation:isolate;
z-index:6;
/*box-shadow:-10px -10px 30px rgba(93, 85, 104, 0.04) inset;*/
}


.STPP-KDC-box {
width:100%;
border-radius: 0px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between;
white-space:normal;
/*background-color: rgba(159, 143, 179, 0.14);*/
z-index: 7;
top:0px;
}

.STPP-KDC-header {
width:100%;
min-height: 60px;
display:flex;
border-radius: 0px 0px 0px 0px;
flex-direction:row;
align-items:center;
justify-content:center;
position:relative;
gap:6px;
background: linear-gradient(
	130deg, 
	rgba(204, 226, 255, 0.08) 0%,
	rgba(157, 200, 255, 0.02) 10%,
	rgba(240, 247, 255, 0.2) 36%,
	rgba(247, 251, 255, 0.2) 70%,
	rgba(157, 200, 255, 0.04) 82%,
	rgba(204, 226, 255, 0.08) 100%
	);
z-index: 8;
box-shadow:0px -20px 40px rgba(93, 85, 104, 0.1) inset;

}

.STPP-KDC-header:hover {
width:100%;
min-height: 60px;
display:flex;
border-radius: 0px 0px 0px 0px;
flex-direction:row;
align-items:center;
justify-content:center;
position:relative;
gap:6px;
background: linear-gradient(
	130deg, 
	rgba(104, 126, 255, 0.08) 0%,
	rgba(57, 100, 255, 0.02) 10%,
	rgba(240, 247, 255, 0.2) 36%,
	rgba(247, 251, 255, 0.2) 70%,
	rgba(57, 100, 255, 0.04) 82%,
	rgba(104, 126, 255, 0.08) 100%
	);
z-index: 8;
box-shadow:0px -20px 40px rgba(93, 85, 104, 0.1) inset;

}


.STPP-KDC-header-colorburn {
width:100%;
height: 60px;
border-radius: 0px 0px 0px 0px;
background-color: rgba(138, 214, 229, 0.4);
/*background-color: rgba(138, 214, 229,, 0.3);*/
mix-blend-mode: color-burn;
position:absolute;
left:0px;
top:0px;
isolation:isolate;
z-index:9;
}

.STPP-KDC-header-colorburn:hover {
width:100%;
height: 60px;
border-radius: 0px 0px 0px 0px;
background-color: rgba(138, 214, 229, 0.4);
/*background-color: rgba(138, 214, 229,, 0.3);*/
mix-blend-mode: color-burn;
position:absolute;
left:0px;
top:0px;
isolation:isolate;
z-index:9;
}

.STPP-KDC-header-bkg {
width:100%;
height: 60px;
border-radius:6px 6px 0px 0px;
background-color: rgba(138, 214, 229, 0.1);
position:absolute;
left:0px;
top:0px;
z-index:10;			
}


.STPP-KDC-header-content {
position: absolute;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin:0px auto;	
gap: 0px;
}

.STPP-KDC-icon {
width: 30px;
height: 30px;
}

.STPP-KDC-headertext {
color: rgba(41, 31, 51, 1);
text-align: center;
font-family: Raleway;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 150% */
font-variant: small-caps;
letter-spacing: 2.4px;
}

.STPP-KDC-TxtReadWrap {
width:86%;
min-height:320px;
max-height:360px;
padding-top:40px;
/*Change height when "read more" button added back in!
min-height: 440px;
max-height:440px;*/
border-radius: 2px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between;
white-space:normal;
}


.STPP-KDC-txt-box {
display: flex;
flex-direction: column;
align-items: center;
align-content: flex-start;
width: 100%;
gap:30px;
height:360px;
overflow:auto;

}

.STPP-KDC-txttop {
color: rgba(41, 31, 51, 1);
align-content: center;
/* Heading/3 */
font-family: Raleway;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 30px; /* 150% */
letter-spacing: 1.92px;
padding-top:10px;
}

.STPP-KDC-txt {
color: rgba(41, 31, 51, 1);
text-align: justify;
font-family: Raleway;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 26px; /* 214.286% */
letter-spacing: 2.24px;

}
	
	
.Read-more-wrap {
position:relative;
width: 160px;
height: 40px;
margin:20px auto 40px auto;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
animation:grow-wrap-mob 10s;
animation-fill-mode:forwards;
}

.Read-more-bkg {
position:absolute;
width: 160px;
height: 40px;
border-radius: 2px;	
display:flex;
flex-direction:column;
justify-content:flex-start;
background-color: rgba(205, 228, 255, 0.1);
box-shadow: 0px 2px 3px 0px rgba(4, 4, 80, 0.35);
z-index:11;
margin: auto;

}	

	


.Read-more-colorburn {
width: 160px;
height: 40px;
border-radius: 2px;
background-color: rgba(138, 214, 229, 0.4);
mix-blend-mode: color-burn;
position:absolute;
isolation:isolate;
margin: auto;
margin: 0px auto;
animation:read-cb-mob 10s;
animation-fill-mode:forwards;
z-index: 13;
}


.Read-more-colorburn:hover {
width: 160px;
height: 40px;
border-radius: 2px;
background-color: rgba(138, 214, 229, 0.6);
mix-blend-mode: color-burn;
position:absolute;
isolation:isolate;
margin: auto;
z-index: 13;
}


.Read-more-button {
position:relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background-color: rgba(138, 214, 229, 0.1);
width: 160px;
height: 40px;
border-radius: 2px;
gap:3px;
z-index:14;
margin: 0px auto;
animation:read-but-mob 10s;
animation-fill-mode:forwards;
/*z-index:10;*/

}

.Read-more-button:hover {
margin: 0px auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background-color: rgba(138, 214, 229, 0.06);
width: 160px;
height: 40px;
border-radius: 2px;
gap:3px;
z-index:14;
}

.Read-more-content {
display: flex;
flex-direction:row;
justify-content: flex-start;
align-items: center;
gap: 3px;
width:122px;
height: 24px;
animation:rm-fadein-mob 10s;
animation-fill-mode:forwards;
}

.Read-more {
color: rgba(41, 31, 51, 1);
text-align: center;
font-family: Raleway;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
font-variant: small-caps;
letter-spacing: 1.92px;
animation:rm-txt-mob 10s;
animation-fill-mode:forwards;
z-index:15;
}

.Read-more-arrow {
	height: 16px;
	width: 16px;
	background-image: url('images/Right Arrow.png');
	background-size: contain;
animation:rm-arrow-mob 10s;
animation-fill-mode:forwards;
z-index:15;
}



	}

/*.logo-text {
animation:OICtext 10s;
animation-fill-mode:forwards;
}

@keyframes OICtext {
  0% {width:900px; height: 118px}
  82% {width:900px; height: 118px}
  100% {width:332px; height: 64px}
}

.logo-text-lg {
color: var(--purple-75-opacity, #5D5566);
font-family: Raleway;
font-size: 36px;
font-style: normal;
font-weight: 300;
line-height: 36px; 
letter-spacing: 7.92px;
animation:OICtext-lg 10s;
animation-fill-mode:forwards;
}

@keyframes OICtext-lg {
  0% {font-size: 64px; line-height: 64px; font-weight: 200; letter-spacing: 12px;}
  82% {font-size: 64px; line-height: 64px; font-weight: 200; letter-spacing: 12px;}
  100% {font-size: 36px; line-height: 36px; font-weight: 300; letter-spacing: 7.92px;}
}

.logo-text-sm {
color: var(--purple-75-opacity, #5D5566);
font-family: Raleway;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 18px; 
letter-spacing: 3.96px;
text-transform: uppercase;
animation:OICtext-sm 10s;
animation-fill-mode:forwards;
}

@keyframes OICtext-sm {
  0% {font-size: 40px; line-height: 40px; font-weight: 300; letter-spacing: 16px;}
  82% {font-size: 40px; line-height: 40px; font-weight: 300; letter-spacing: 16px;}
  100% {font-size: 18px; line-height: 18px; font-weight: 500; letter-spacing: 3.96px;}
}*/

/*.logo-o {
color: #38ACED;
font-family: Raleway;
font-size: 64px;
font-style: normal;
font-weight: 200;
line-height: 64px;
animation:logo-o 10s;
animation-fill-mode:forwards;
margin-left:400px;
}

@keyframes logo-o {
  0% {opacity:0%; font-size: 64px; line-height: 64px; font-weight: 200}
  24% {opacity:100%; font-size: 64px; line-height: 64px; font-weight: 200}
  100% {opacity:100%; font-size: 100px; line-height: 100px; font-weight: 200}
}*/


@media (min-width: 640px) and (max-width:863px) {


/*.bkg-kdc-light  {
background: conic-gradient(
    from 240deg at -10% 110%,
rgba(172, 200, 226, 0.6) 122deg,
rgba(215, 231, 247, 0.7) 128deg,
rgba(169, 208, 247, 0.7) 132deg,
rgba(184, 209, 233, 0.7) 134deg,
rgba(163, 198, 233, 0.6) 148deg,
rgba(131, 157, 185, 0.6) 168deg,
rgba(159, 185, 209, 0.6) 176deg,
rgba(199, 227, 253, 0.6) 187deg,
rgba(163, 198, 233, 0.4) 194deg,
rgba(105, 128, 151, 0.4) 200deg,
rgba(149, 200, 251, 0.4) 202deg

);
 height:100%;
  left: 0px;
  top: 0px;
  width: 100%;
  border: none;
  position:fixed;
  z-index:1;
}*/

.h1home {
width:0px;
height:0px;
position:absolute;
top:0px;
left:0px;
}

.h1home h1{
color: rgba(41, 31, 51, 0);
font-family: Raleway;
font-size: 0px;
font-style: normal;
font-weight: 100;
line-height: 0px; /* 150% */
letter-spacing: 0px;	
}


.actxt-home-light{
height:22px;
margin:0px;
}


.actxt-home-light h2{
color: rgba(41, 31, 51, 1);
font-family: Raleway;
font-size: 22px;
font-style: normal;
font-weight: 800;
line-height: 22px; /* 128.571% */
font-variant: small-caps;
letter-spacing: 2.2px;
margin:0px;
}

.ac-content {
height:54px;
margin: 27px auto;
}

.logo-text-img {
background: url("images/OIC Logo Text.png");
width:400px;
height:89px;
background-size: contain;
background-repeat: no-repeat;
z-index:8001;
}

.logo-text-wrap-coming {
position: absolute;
width: 100%;
top:0px;
left:0px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
z-index: 5003;

}


.menu-dropdown-animation .menu {
margin: 25px 26px;
height: 30px;
width:30px;
background: url("images/Menu Icon 30.png");
background-size: contain; 
}


	
.menu-dropdown-animation .menu-wrap {
position:absolute;
right:0px;
top:0px;
width:82px;
height:80px;
}



.page-scroll-home {
width:100%;
margin:0px auto;
display:flex;
flex-direction:column;
align-items:center;
justify-content: flex-start;
overflow-y:auto;
position:relative;
}


.when-you-need {
display:flex;
flex-direction:row;
justify-content: center;
align-items:flex-start;
white-space: normal;
position:relative;
}


.when-you-need p{
width:0px;
padding-top:0px;
color: rgba(41, 31, 51, 0);
align-content: center;
text-align:center;
font-family: Raleway;
font-size: 24px;
font-style: normal;
font-weight: 300;
line-height: 0px;
text-transform:uppercase;
letter-spacing: 1.92px;
animation:wyn-text-vanish-tabsm 14s;
animation-fill-mode:forwards;
}




.home-ac-wrap {
width:56%;
display:flex;
margin:40px auto;
flex-direction:column;
justify-content: flex-start;
align-items:center;
gap:40px;
white-space: normal;
position:relative;
animation:ac-wrap-grow-tabsm 10s;
animation-fill-mode:forwards;
}



.home-KDC-col {
width:100%;
height:488px;
display:flex;
flex-direction:column;
justify-content: flex-start;
align-items:center;
animation:col-grow-tabsm 10s;
animation-fill-mode:forwards;
}
	
		
.home-KDC-colorburn {
width:100%;
height:488px;
border-radius: 6px;
background: rgba(31, 92, 153, 1);
mix-blend-mode:color-burn;
white-space: normal;
isolation: isolate;
position:absolute;
animation:col-grow-tabsm 10s;
animation-fill-mode:forwards;
z-index:5;
}
	
.home-KDC-glass {
width:100%;
height:488px;
border-radius: 6px;
background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.4) 7%,
    rgba(255, 255, 255, 0.45) 15%,
    rgba(255, 255, 255, 0.4) 25%,
    rgba(255, 255, 255, 0.45) 31%,
    rgba(255, 255, 255, 0.4) 37%,
    rgba(255, 255, 255, 0.35) 49%,
    rgba(255, 255, 255, 0.3) 57%,
    rgba(255, 255, 255, 0.35) 68%,
    rgba(255, 255, 255, 0.4) 79%,
    rgba(255, 255, 255, 0.35) 87%,
    rgba(255, 255, 255, 0.3) 100%
);
mix-blend-mode:hard-light;
white-space: normal;
isolation: isolate;
position:absolute;
animation:col-grow-tabsm 10s;
animation-fill-mode:forwards;
z-index:6;	
		
	}





.home-KDC-bkg {
width:100%;
height:488px;
display:flex;
flex-direction:column;
justify-content: flex-start;
align-items:center;
background: rgba(255, 255, 255, 0.3);
border-radius:6px;
animation:col-grow-bkg-tabsm 10s;
animation-fill-mode:forwards;
z-index:7;

}	



.home-KDC-gradient {
width:100%;
height:108px;
border-radius:6px 6px 0px 0px;
mix-blend-mode: color-burn;
position:absolute;
isolation:isolate;
background: linear-gradient(
	130deg, 
	rgba(204, 226, 255, 0.08) 0%,
	rgba(157, 200, 255, 0.02) 10%,
	rgba(240, 247, 255, 0.2) 36%,
	rgba(247, 251, 255, 0.2) 70%,
	rgba(157, 200, 255, 0.04) 82%,
	rgba(204, 226, 255, 0.08) 100%
	);
box-shadow:0px -20px 40px rgba(93, 85, 104, 0.1) inset;
animation:ac-cb-tabsm 10s;
animation-fill-mode:forwards;
z-index: 5;

}





.home-KDC-text {
width: calc(100% - 80px);
height: 280px;
padding:20px 40px;
display:flex;
margin:auto;
flex-direction:column;
justify-content: flex-start;
align-items:center;
animation:grow-txt-tabsm 10s;
animation-fill-mode:forwards;

}

.home-KDC-text p{
color: rgba(41, 31, 51, 0.9);
align-content: center;
font-family: Raleway;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 28px; /* 150% */
letter-spacing: 2.4px;
animation:fadein-text-tabsm 10s;
animation-fill-mode: forwards;
}		


header {
animation:header-top-tabsm 10s;
animation-fill-mode: forwards;
}

.logo-wrap {
animation:header-top-tabsm 10s;
animation-fill-mode: forwards;
}

.logo-text-wrap {
animation:header-top-tabsm 10s;
animation-fill-mode: forwards;
}


.ac-card-wrap {
width:100%;
height:108px;
border-radius:6px 6px 0px 0px;
animation:ac-wrap 10s;
animation-fill-mode:forwards;
}


.Read-more-wrap {
animation:grow-wrap-tabsm 10s;
animation-fill-mode:forwards;
}



.Read-more-gradient {
width: 200px;
height: 40px;
margin:0px auto;
border-radius: 2px;
mix-blend-mode: color-burn;
position:absolute;
isolation:isolate;
background: linear-gradient(
	130deg, 
	rgba(204, 226, 255, 0.08) 0%,
	rgba(157, 200, 255, 0.02) 10%,
	rgba(240, 247, 255, 0.2) 36%,
	rgba(247, 251, 255, 0.2) 70%,
	rgba(157, 200, 255, 0.04) 82%,
	rgba(204, 226, 255, 0.08) 100%
	);
z-index: 12;
animation:read-grad-tabsm 10s;
animation-fill-mode:forwards;
}







.ac-colorburn {
width:100%;
height: 108px;
background-color:  rgba(138, 184, 229, 0.4);
border-radius:6px 6px 0px 0px;
animation:ac-cb-tabsm 10s;
animation-fill-mode:forwards;
z-index:9;
}


.ac-glass {
width:100%;
height:108px;
border-radius:6px 6px 0px 0px;
background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.4) 7%,
    rgba(255, 255, 255, 0.45) 15%,
    rgba(255, 255, 255, 0.4) 25%,
    rgba(255, 255, 255, 0.45) 31%,
    rgba(255, 255, 255, 0.4) 37%,
    rgba(255, 255, 255, 0.35) 49%,
    rgba(255, 255, 255, 0.3) 57%,
    rgba(255, 255, 255, 0.35) 68%,
    rgba(255, 255, 255, 0.4) 79%,
    rgba(255, 255, 255, 0.35) 87%,
    rgba(255, 255, 255, 0.3) 100%
);
mix-blend-mode:hard-light;
animation:ac-cb-tabsm 10s;
animation-fill-mode:forwards;
z-index:10;

}



.ac-sel-light {
width:100%;
z-index:11;
background: rgba(255, 255, 255, 0.1);
border-radius:6px 6px 0px 0px;
animation:ac-grow-tabsm 10s;
animation-fill-mode:forwards;
}












.banner-bkg {
animation:header-delay 10s;
animation-fill-mode:forwards;
}





.menu-dropdown-animation {
position:absolute;
right:0px;
top:0px;
width:82px;
height:80px;
display:flex;
flex-direction:column;
justify-content: flex-start;
align-items:flex-start;
overflow:hidden;
z-index:5100;
animation:fadein 10s;
animation-fill-mode:forwards;
}

.menu-dropdown-closed {
animation:fadein 10s;
animation-fill-mode:forwards;
}

	

.content-box-wrap {
width:100%;
border-radius: 2px;
white-space: normal;
position:relative;
background-color: rgba(255, 255, 255, 0.01);
margin:52px 0px 80px 0px;
padding:0px 0px 42px 0px;
z-index:2;
}	


.content-box-colorburn {
width:100%;
height: 100%;
border-radius: 2px;
background-color: rgba(138, 214, 229, 0.4);
mix-blend-mode: color-burn;
white-space: normal;
isolation: isolate;
position:absolute;
padding:42px auto 0px auto;
z-index:3;
}



.content-box-2 {
width:100%;
height:100%;
border-radius: 2px;
display:flex;
flex-direction:column;
justify-content: flex-start;
gap:40px;
align-items:center;
top:0px;
background: rgba(138, 214, 229, 0.1);
padding:26px 0px 8px 0px;
white-space: normal;
position:relative;
z-index:4;
}

.smaller-content-box {
width:84%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
margin: 0px auto;
gap:20px;
}



.KDC-Content-header {
display:flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
gap: 6px;
width:190px;
height:40px;
margin:0px auto;
}

.KDC-content-header-icon {
width: 40px;
height: 40px;
}

.KDC-content-header-txt {
top:2px;
color: var(--purple-default, #291F33);
font-family: Raleway;
font-size: 28px;
font-style: normal;
font-weight: 800;
line-height: 36px;
font-variant: small-caps;
letter-spacing: 2.8px;

}



.text {
width:100%;
height: auto;
margin: 0px auto;
position:inherit;
color: rgba(22, 24, 26, 1);
text-align: left;
font-family: Raleway;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 222.222% */
letter-spacing: 2.88px;
}

.STPP-KDC-view-frame {
width:100%;
min-height:580px;
max-height:580px;
white-space:nowrap;
overflow:hidden;
margin: 0px;
}

.STPP-KDC-scroll-bkg {
width:inherit;
min-height: 540px;
max-height:540px;
border-radius:6px 6px 0px 0px;	
background-color: rgba(138, 214, 229, 0.4);
mix-blend-mode: color-burn;
position:absolute;
isolation:isolate;
z-index:6;
}

.STPP-KDC-scroll-frame {
min-height: 540px;
max-height:540px;
display:flex;
flex-direction:row;
justify-content:flex-start;
align-items:flex-start;
gap:40px;
white-space: nowrap;
overflow-x:auto;
overflow-y:hidden;
position:relative;
left:0px;
}


.STPP-KDC-wrap {
min-width: 360px;
min-height: 540px;
max-height:540px;
border-radius:6px;
position:relative;
background-color: rgba(255, 255, 255, 0.01);
z-index: 5;
/*box-shadow:10px 0px 30px rgba(93, 85, 104, 0.04) inset;*/
}

.STPP-KDC-bkg {	
min-width: 360px;
min-height: 540px;
max-height:540px;
border-radius: 2px;
background-color: rgba(138, 214, 229, 0.4);
mix-blend-mode: color-burn;
position:absolute;
left:0px;
top:0px;
isolation:isolate;
z-index:6;
/*box-shadow:-10px -10px 30px rgba(93, 85, 104, 0.04) inset;*/
}




.STPP-KDC-box {
min-width: 360px;
max-height: 540px;
min-height: 540px;
border-radius: 2px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
gap:14px;
white-space:normal;
background-color: rgba(138, 214, 229, 0.1);
/*background-color: rgba(159, 143, 179, 0.14);*/
z-index: 7;
}




.STPP-KDC-header {
width: 360px;
min-height: 80px;
display:flex;
border-radius:6px 6px 0px 0px;
flex-direction:row;
align-items:center;
justify-content:center;
position:relative;
gap:6px;
background: linear-gradient(
	130deg, 
	rgba(204, 226, 255, 0.08) 0%,
	rgba(157, 200, 255, 0.02) 10%,
	rgba(240, 247, 255, 0.2) 36%,
	rgba(247, 251, 255, 0.2) 70%,
	rgba(157, 200, 255, 0.04) 82%,
	rgba(204, 226, 255, 0.08) 100%
	);
z-index: 8;
box-shadow:0px -20px 40px rgba(93, 85, 104, 0.1) inset;

}


.STPP-KDC-header-colorburn {
min-width: 360px;
height: 80px;
border-radius:6px 6px 0px 0px;
background-color: rgba(138, 214, 229, 0.4);
/*background-color: rgba(138, 214, 229,, 0.3);*/
mix-blend-mode: color-burn;
position:absolute;
left:0px;
top:0px;
isolation:isolate;
z-index:9;
}

.STPP-KDC-header-bkg {
min-width: 360px;
height: 80px;
border-radius:6px 6px 0px 0px;
background-color: rgba(138, 214, 229, 0.1);
position:absolute;
left:0px;
top:0px;
z-index:10;			
}


.STPP-KDC-header-content {
position: absolute;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin:0px auto;	
gap: 4px;
}

.STPP-KDC-icon {
width: 40px;
height: 40px;
}

.STPP-KDC-headertext {
color: rgba(41, 31, 51, 1);
text-align: center;
font-family: Raleway;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 36px; /* 150% */
font-variant: small-caps;
letter-spacing: 2.4px;
}

.STPP-KDC-TxtReadWrap {
width:320px;
min-height: 360px;
max-height:360px;
/*Change height when "read more" button added back in!
min-height: 420px;
max-height:420px;*/
border-radius: 2px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between;
white-space:normal;
}


.STPP-KDC-txt-box {
display: flex;
flex-direction: column;
align-items: center;
align-content: flex-start;
gap:30px;
height:360px;

}

.STPP-KDC-txttop {
color: rgba(41, 31, 51, 1);
align-content: center;
/* Heading/3 */
font-family: Raleway;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 30px; /* 150% */
letter-spacing: 1.92px;
padding-top:10px;
}

.STPP-KDC-txt {
color: #291F33;
text-align: left;

/* Body/Medium */
font-family: Raleway;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 26px; /* 214.286% */
letter-spacing: 2.24px;

}
	
	
.Read-more-wrap {
position:relative;
width: 200px;
height: 40px;
display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:center;
margin:0px auto 20px auto;

}

.Read-more-bkg {
position:absolute;
width: 200px;
height: 40px;
border-radius: 2px;	
display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:center;
background-color: rgba(205, 228, 255, 0.1);
box-shadow: 0px 2px 3px 0px rgba(4, 4, 80, 0.35);
z-index:11;

}	

.Read-more-wrap:hover .Read-more-bkg {
position:absolute;
width: 200px;
height: 40px;
border-radius: 2px;	
display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:center;
background-color: rgba(205, 228, 255, 0.01);
box-shadow: 0px 2px 3px 0px rgba(4, 4, 80, 0.35);
z-index:11;

}


.Read-more-colorburn {
width: 200px;
height: 40px;
border-radius: 2px;
background-color: rgba(138, 214, 229, 0.4);
mix-blend-mode: color-burn;
position:absolute;
isolation:isolate;
animation:read-cb-tabsm 10s;
animation-fill-mode:forwards;
z-index:13;
}

.Read-more-wrap:hover .Read-more-colorburn {
width: 200px;
height: 40px;
border-radius: 2px;
background-color: rgba(138, 214, 229, 0.6);
mix-blend-mode: color-burn;
position:absolute;
isolation:isolate;
margin: 0px auto;
z-index: 13;
}



.Read-more-button {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background-color: rgba(138, 214, 229, 0.1);
width: 200px;
height: 40px;
border-radius: 2px;
gap:3px;
animation:read-but-tabsm 10s;
animation-fill-mode:forwards;
z-index:14;
}

.Read-more-wrap:hover .Read-more-button {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background-color: rgba(138, 214, 229, 0.06);
width: 200px;
height: 40px;
border-radius: 2px;
gap:3px;
z-index:14;
}




.Read-more-content {
display: flex;
flex-direction:row;
justify-content: flex-start;
align-items: center;
gap: 3px;
width:140px;
height: 24px;
animation:rm-fadein-tabsm 10s;
animation-fill-mode:forwards;
}

.Read-more {
color:rgba(41, 31, 51, 1);
text-align: center;

/* Action/Regular */
font-family: Raleway;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */
font-variant: small-caps;
letter-spacing: 1.92px;
animation:rm-txt-tabsm 10s;
animation-fill-mode:forwards;
	z-index:15;
}

.Read-more-arrow {
	height: 20px;
	width: 20px;
	background-image: url('images/Right Arrow.png');
	background-size: contain;
	animation:rm-arrow-tabsm 10s;
animation-fill-mode:forwards;
	z-index:15;
}


	}


@keyframes ac-grow-tabsm {
  0% {width:162px; height:108px; border-radius:6px}
  80% {width:162px; height:108px; border-radius:6px}
  90% {width:100%; height:108px; border-radius:6px}
  100% {width:100%; height:108px; border-radius:6px 6px 0px 0px}
}

@keyframes ac-cb-tabsm {
  0% {width:162px; height:108px; border-radius:6px}
  80% {width:162px; height:108px; border-radius:6px}
  90% {width:100%; height:108px; border-radius:6px}
  100% {width:100%; height:108px; border-radius:6px 6px 0px 0px}
}

@keyframes ac-wrap-grow-tabsm {
  0% {width:162px; height:108px}
  80% {width:162px; height:108px}
  88% {width:56%; height:108px}
  100% {width:56%; height:auto}
}

@keyframes col-grow-tabsm {
  0% {width:162px; height:108px; max-height:108px}
  80% {width:162px; height:108px; max-height:108px}
  90% {width:100%; height:108px; max-height:108px}
  100% {width:100%; height:488px;}

}

@keyframes col-grow-bkg-tabsm {
  0% {width:162px; height:108px; max-height:108px}
  80% {width:162px; height:108px; max-height:108px}
  90% {width:100%; height:108px; max-height:108px}
  100% {width:100%; height:488px;}
}

@keyframes grow-txt-tabsm {
  0% {height: 0px; padding:0px; width:0px;}
  80% {height: 0px; padding:0px; width:0px;}
  90% {height: 0px; padding:0px; width: 100%;}
  100% {height: 280px; padding:20px 40px; width: calc(100% - 80px);}

}


@keyframes fadein-text-tabsm {
  0% {font-size: 0px; line-height: 0px; color: rgba(41, 31, 51, 0)}
  96% {font-size: 0px; line-height: 0px; color: rgba(41, 31, 51, 0)}
  100% {font-size: 14px; line-height: 28px; color: rgba(41, 31, 51, 0.9)}
}

@keyframes grow-wrap-tabsm {
  0% {height: 0px; width: 0px; margin:0px;}
  80% {height: 0px; width: 0px; margin:0px;}
  90% {height: 0px; width: 200px; margin:0px auto;}
  100% {height: 40px; width: 200px; margin:0px auto 20px auto;}
}


@keyframes read-grad-tabsm {
  0% {height: 0px; width:0px; background: rgba(204, 226, 255, 0.0);}
  90% {height: 0px; width:0px; background: rgba(204, 226, 255, 0.0);}
  100% {height: 40px; width:200px; background: linear-gradient(
	130deg, 
	rgba(204, 226, 255, 0.08) 0%,
	rgba(157, 200, 255, 0.02) 10%,
	rgba(240, 247, 255, 0.2) 36%,
	rgba(247, 251, 255, 0.2) 70%,
	rgba(157, 200, 255, 0.04) 82%,
	rgba(204, 226, 255, 0.08) 100%
	);}
}

@keyframes read-cb-tabsm {
  0% {height: 0px; background: rgba(0,0,0,0)}
  90% {height: 0px; background: rgba(0,0,0,0)}
  100% {height: 40px; background-color: rgba(138, 214, 229, 0.22)}
}

@keyframes read-but-tabsm {
  0% {height: 0px; opacity: 0%; background: rgba(0,0,0,0)}
  90% {height: 0px; opacity: 0%; background: rgba(0,0,0,0)}
  100% {height: 40px; opacity: 100%; background-color: rgba(138, 214, 229, 0.1)}
}


@keyframes rm-fadein-tabsm {
 0% {opacity:0%; height:0px; width: 0px;}
  90% {opacity:0%; height:0px; width: 0px;}
  100% {opacity:100%; height: 24px; width: 140px;}
}

@keyframes rm-txt-tabsm {
  0% {color: rgba(41, 31, 51, 0); line-height:0px; font-size: 0px;}
  90% {color: rgba(41, 31, 51, 0); line-height:0px; font-size: 0px;}
  100% {color: rgba(41, 31, 51, 1); line-height: 24px; font-size: 16px;}
}

@keyframes rm-arrow-tabsm {
  0% {opacity:0%; height:0px; width: 0px;}
  90% {opacity:0%; height:0px; width: 0px;}
  100% {opacity:100%; height: 20px; width: 20px;}
}

@keyframes header-top-tabsm {
0% {opacity:0%; top:40px}
20% {opacity:100%; top:40px}
60% {opacity:100%; top:40px}
80% {opacity:100%; top:0px}
100% {opacity:100%; top:0px}

}

@keyframes wyn-text-vanish-tabsm {
 0% {width:400px; line-height:40px; padding-top:100px; color: rgba(41, 31, 51, 0)}
  7% {width:400px; line-height:40px; padding-top:100px; color: rgba(41, 31, 51, 0)}
  21% {width:400px; line-height:40px; padding-top:100px; color: rgba(31, 41, 51, 1)}
  43% {width:400px; line-height:40px; padding-top:100px; color: rgba(31, 41, 51, 1)}
  57% {width:400px; line-height:40px; padding-top:0px; color: rgba(31, 41, 51, 1)}
  64.3% {width:400px; line-height:40px; padding-top:0px; color: rgba(31, 41, 51, 1)}
  70% {width:400px; line-height:40px; padding-top:0px; color: rgba(143, 148, 153, 1)}
  78.5% {width:400px; line-height:40px; padding-top:0px; color: rgba(255, 255, 255, 1)}
  86% {width:400px; line-height:40px; padding-top:0px; color: rgba(255, 255, 255, 1)}
  93% {width:400px; line-height:40px; padding-top:0px; color: rgba(255, 255, 255, 0)}
  100% {width:0px; line-height:0px; padding-top:0px; color: rgba(255, 255, 255, 0);}

}
  





@media (min-width: 864px) and (max-width:1279px) {


/*.bkg-kdc-light  {
background: conic-gradient(
    from 240deg at -10% 110%,
rgba(172, 200, 226, 0.6) 122deg,
rgba(215, 231, 247, 0.7) 128deg,
rgba(169, 208, 247, 0.7) 132deg,
rgba(184, 209, 233, 0.7) 134deg,
rgba(163, 198, 233, 0.6) 148deg,
rgba(131, 157, 185, 0.6) 168deg,
rgba(159, 185, 209, 0.6) 176deg,
rgba(199, 227, 253, 0.6) 187deg,
rgba(163, 198, 233, 0.4) 194deg,
rgba(105, 128, 151, 0.4) 200deg,
rgba(149, 200, 251, 0.4) 202deg

);
 height:100%;
  left: 0px;
  top: 0px;
  width: 100%;
  border: none;
  position:fixed;
  z-index:1;
}*/


.h1home {
width:0px;
height:0px;
position:absolute;
top:0px;
left:0px;
}

.h1home h1{
color: rgba(41, 31, 51, 0);
font-family: Raleway;
font-size: 0px;
font-style: normal;
font-weight: 100;
line-height: 0px; /* 150% */
letter-spacing: 0px;	
}


.actxt-home-light {
height: 22px;
margin:0px;
}

.actxt-home-light h2{
color: rgba(41, 31, 51, 1);
font-family: Raleway;
font-size: 22px;
font-style: normal;
font-weight: 800;
line-height: 22px; /* 128.571% */
font-variant: small-caps;
letter-spacing: 2.2px;
margin:0px;
}


.ac-content {
height:54px;
margin: 27px auto;
}

.logo-text-img {
background: url("images/OIC Logo Text.png");
width:400px;
height:89px;
background-size: contain;
background-repeat: no-repeat;

}

.logo-text-wrap-coming {
position: absolute;
width: 100%;
top:0px;
left:0px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
z-index: 5003;

}


.menu-dropdown-animation .menu {
margin: 25px 26px;
height: 30px;
width:30px;
background: url("images/Menu Icon 30.png");
background-size: contain; 
}


	
.menu-dropdown-animation .menu-wrap {
position:absolute;
right:0px;
top:0px;
width:82px;
height:80px;
}



.page-scroll-home {
width: calc(100% - 120px);
min-height:100%;
margin:0px;
padding:0px 60px;
display:flex;
flex-direction:column;
align-items:center;
justify-content: flex-start;
overflow-y:auto;
position:relative;
}


.when-you-need {
display:flex;
flex-direction:row;
justify-content: center;
align-items:flex-start;
white-space: normal;
position:relative;
}


.when-you-need p{
width:0px;
padding-top:0px;
color: rgba(41, 31, 51, 0);
align-content: center;
text-align:center;
font-family: Raleway;
font-size: 24px;
font-style: normal;
font-weight: 300;
line-height: 0px;
text-transform:uppercase;
letter-spacing: 1.92px;
animation:wyn-text-vanish-tab 14s;
animation-fill-mode:forwards;
}




.home-ac-wrap {
width: calc(100% - 120px);
display:flex;
margin:40px 0px;
flex-direction:row;
justify-content: space-around;
align-items:flex-start;
white-space: normal;
position:relative;
animation:ac-wrap-grow-tab 10s;
animation-fill-mode:forwards;
}



.home-KDC-col {
width:28%;
height:512px;
display:flex;
flex-direction:column;
justify-content: flex-start;
align-items:center;
animation:col-grow-tab 10s;
animation-fill-mode:forwards;
}
	
		
.home-KDC-colorburn {
width:28%;
height:512px;
border-radius: 6px;
background: rgba(31, 92, 153, 1);
mix-blend-mode:color-burn;
white-space: normal;
isolation: isolate;
position:absolute;
animation:col-grow-tab 10s;
animation-fill-mode:forwards;
z-index:5;
}
	
.home-KDC-glass {
width:28%;
height:512px;
border-radius: 6px;
background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.4) 7%,
    rgba(255, 255, 255, 0.45) 15%,
    rgba(255, 255, 255, 0.4) 25%,
    rgba(255, 255, 255, 0.45) 31%,
    rgba(255, 255, 255, 0.4) 37%,
    rgba(255, 255, 255, 0.35) 49%,
    rgba(255, 255, 255, 0.3) 57%,
    rgba(255, 255, 255, 0.35) 68%,
    rgba(255, 255, 255, 0.4) 79%,
    rgba(255, 255, 255, 0.35) 87%,
    rgba(255, 255, 255, 0.3) 100%
);
mix-blend-mode:hard-light;
white-space: normal;
isolation: isolate;
position:absolute;
animation:col-grow-tab 10s;
animation-fill-mode:forwards;
z-index:6;	
		
	}





.home-KDC-bkg {
width:100%;
height:512px;
display:flex;
flex-direction:column;
justify-content: flex-start;
align-items:center;
	background: rgba(255, 255, 255, 0.3);
border-radius:6px;
animation:col-grow-bkg-tab 10s;
animation-fill-mode:forwards;
z-index:7;

}	



.home-KDC-gradient {
width:28%;
height:108px;
border-radius:6px 6px 0px 0px;
mix-blend-mode: color-burn;
position:absolute;
isolation:isolate;
background: linear-gradient(
	130deg, 
	rgba(204, 226, 255, 0.08) 0%,
	rgba(157, 200, 255, 0.02) 10%,
	rgba(240, 247, 255, 0.2) 36%,
	rgba(247, 251, 255, 0.2) 70%,
	rgba(157, 200, 255, 0.04) 82%,
	rgba(204, 226, 255, 0.08) 100%
	);
box-shadow:0px -20px 40px rgba(93, 85, 104, 0.1) inset;
animation:ac-cb-tab 10s;
animation-fill-mode:forwards;
z-index: 5;

}





.home-KDC-text {
width: calc(100% - 40px);
height: 304px;
padding:20px;
display:flex;
margin:auto;
flex-direction:column;
justify-content: flex-start;
align-items:center;
animation:grow-txt-tab 10s;
animation-fill-mode:forwards;

}

.home-KDC-text p{
color: rgba(41, 31, 51, 0.9);
align-content: center;
font-family: Raleway;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 28px; /* 150% */
letter-spacing: 2.4px;
animation:fadein-text-tab 10s;
animation-fill-mode: forwards;
}		


header {
animation:header-top-tab 10s;
animation-fill-mode: forwards;
}

.logo-wrap {
animation:header-top-tab 10s;
animation-fill-mode: forwards;
}

.logo-text-wrap {
animation:header-top-tab 10s;
animation-fill-mode: forwards;
}


.ac-card-wrap {
width:100%;
height:108px;
border-radius:6px 6px 0px 0px;
animation:ac-wrap 10s;
animation-fill-mode:forwards;
}


.Read-more-wrap {
animation:grow-wrap-tab 10s;
animation-fill-mode:forwards;
}



.Read-more-gradient {
width: 200px;
height: 40px;
margin:0px auto;
border-radius: 2px;
mix-blend-mode: color-burn;
position:absolute;
isolation:isolate;
background: linear-gradient(
	130deg, 
	rgba(204, 226, 255, 0.08) 0%,
	rgba(157, 200, 255, 0.02) 10%,
	rgba(240, 247, 255, 0.2) 36%,
	rgba(247, 251, 255, 0.2) 70%,
	rgba(157, 200, 255, 0.04) 82%,
	rgba(204, 226, 255, 0.08) 100%
	);
z-index: 12;
animation:read-grad-tab 10s;
animation-fill-mode:forwards;
}







.ac-colorburn {
width:28%;
height: 108px;
background-color:  rgba(138, 184, 229, 0.4);
  -webkit-backdrop-filter: blur(600px);
  backdrop-filter: blur(600px);
border-radius:6px 6px 0px 0px;
animation:ac-cb-tab 10s;
animation-fill-mode:forwards;
z-index:9;
}



.ac-glass {
width:28%;
height:108px;
border-radius:6px 6px 0px 0px;
background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.4) 7%,
    rgba(255, 255, 255, 0.45) 15%,
    rgba(255, 255, 255, 0.4) 25%,
    rgba(255, 255, 255, 0.45) 31%,
    rgba(255, 255, 255, 0.4) 37%,
    rgba(255, 255, 255, 0.35) 49%,
    rgba(255, 255, 255, 0.3) 57%,
    rgba(255, 255, 255, 0.35) 68%,
    rgba(255, 255, 255, 0.4) 79%,
    rgba(255, 255, 255, 0.35) 87%,
    rgba(255, 255, 255, 0.3) 100%
);
mix-blend-mode:hard-light;
animation:ac-cb-tab 10s;
animation-fill-mode:forwards;
z-index:10;

}





.ac-sel-light {
width:100%;
z-index:11;
background: rgba(255, 255, 255, 0.3);
border-radius:6px 6px 0px 0px;
animation:ac-grow-tab 10s;
animation-fill-mode:forwards;
}













.banner-bkg {
animation:header-delay 10s;
animation-fill-mode:forwards;
}





.menu-dropdown-animation {
position:absolute;
right:0px;
top:0px;
width:82px;
height:80px;
display:flex;
flex-direction:column;
justify-content: flex-start;
align-items:flex-start;
overflow:hidden;
z-index:5100;
animation:fadein 10s;
animation-fill-mode:forwards;
}

.menu-dropdown-closed {
animation:fadein 10s;
animation-fill-mode:forwards;
}

	

.content-box-wrap {
width:100%;
border-radius: 2px;
white-space: normal;
position:relative;
background-color: rgba(255, 255, 255, 0.01);
margin:52px 0px 80px 0px;
padding:0px 0px 42px 0px;
z-index:2;
}	


.content-box-colorburn {
width:100%;
height: 100%;
border-radius: 2px;
background-color: rgba(138, 214, 229, 0.4);
mix-blend-mode: color-burn;
white-space: normal;
isolation: isolate;
position:absolute;
padding:42px auto 0px auto;
z-index:3;
}



.content-box-2 {
width:100%;
height:100%;
border-radius: 2px;
display:flex;
flex-direction:column;
justify-content: flex-start;
gap:40px;
align-items:center;
top:0px;
background: rgba(138, 214, 229, 0.1);
padding:26px 0px 8px 0px;
white-space: normal;
position:relative;
z-index:4;
}

.smaller-content-box {
width:84%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
margin: 0px auto;
gap:20px;
}



.KDC-Content-header {
display:flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
gap: 6px;
width:190px;
height:40px;
margin:0px auto;
}

.KDC-content-header-icon {
width: 40px;
height: 40px;
}

.KDC-content-header-txt {
top:2px;
color: var(--purple-default, #291F33);
font-family: Raleway;
font-size: 28px;
font-style: normal;
font-weight: 800;
line-height: 36px;
font-variant: small-caps;
letter-spacing: 2.8px;

}



.text {
width:100%;
height: auto;
margin: 0px auto;
position:inherit;
color: rgba(22, 24, 26, 1);
text-align: left;
font-family: Raleway;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 222.222% */
letter-spacing: 2.88px;
}

.STPP-KDC-view-frame {
width:100%;
min-height:580px;
max-height:580px;
white-space:nowrap;
overflow:hidden;
margin: 0px;
}

.STPP-KDC-scroll-bkg {
width:inherit;
min-height: 540px;
max-height:540px;
border-radius:6px 6px 0px 0px;	
background-color: rgba(138, 214, 229, 0.4);
mix-blend-mode: color-burn;
position:absolute;
isolation:isolate;
z-index:6;
}

.STPP-KDC-scroll-frame {
min-height: 540px;
max-height:540px;
display:flex;
flex-direction:row;
justify-content:flex-start;
align-items:flex-start;
gap:40px;
white-space: nowrap;
overflow-x:auto;
overflow-y:hidden;
position:relative;
left:0px;
}


.STPP-KDC-wrap {
min-width: 360px;
min-height: 540px;
max-height:540px;
border-radius:6px;
position:relative;
background-color: rgba(255, 255, 255, 0.01);
z-index: 5;
/*box-shadow:10px 0px 30px rgba(93, 85, 104, 0.04) inset;*/
}

.STPP-KDC-bkg {	
min-width: 360px;
min-height: 540px;
max-height:540px;
border-radius: 2px;
background-color: rgba(138, 214, 229, 0.4);
mix-blend-mode: color-burn;
position:absolute;
left:0px;
top:0px;
isolation:isolate;
z-index:6;
/*box-shadow:-10px -10px 30px rgba(93, 85, 104, 0.04) inset;*/
}




.STPP-KDC-box {
min-width: 360px;
max-height: 540px;
min-height: 540px;
border-radius: 2px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
gap:14px;
white-space:normal;
background-color: rgba(229, 229, 255, 0.1);
/*background-color: rgba(159, 143, 179, 0.14);*/
z-index: 7;
}




.STPP-KDC-header {
width: 360px;
min-height: 80px;
display:flex;
border-radius:6px 6px 0px 0px;
flex-direction:row;
align-items:center;
justify-content:center;
position:relative;
gap:6px;
background: linear-gradient(
	130deg, 
	rgba(204, 226, 255, 0.08) 0%,
	rgba(157, 200, 255, 0.02) 10%,
	rgba(240, 247, 255, 0.2) 36%,
	rgba(247, 251, 255, 0.2) 70%,
	rgba(157, 200, 255, 0.04) 82%,
	rgba(204, 226, 255, 0.08) 100%
	);
z-index: 8;
box-shadow:0px -20px 40px rgba(93, 85, 104, 0.1) inset;

}


.STPP-KDC-header-colorburn {
min-width: 360px;
height: 80px;
border-radius:6px 6px 0px 0px;
background-color: rgba(138, 214, 229, 0.4);
/*background-color: rgba(138, 214, 229,, 0.3);*/
mix-blend-mode: color-burn;
position:absolute;
left:0px;
top:0px;
isolation:isolate;
z-index:9;
}

.STPP-KDC-header-bkg {
min-width: 360px;
height: 80px;
border-radius:6px 6px 0px 0px;
background-color: rgba(138, 214, 229, 0.1);
position:absolute;
left:0px;
top:0px;
z-index:10;			
}


.STPP-KDC-header-content {
position: absolute;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin:0px auto;	
gap: 4px;
}

.STPP-KDC-icon {
width: 40px;
height: 40px;
}

.STPP-KDC-headertext {
color: rgba(41, 31, 51, 1);
text-align: center;
font-family: Raleway;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 36px; /* 150% */
font-variant: small-caps;
letter-spacing: 2.4px;
}

.STPP-KDC-TxtReadWrap {
width:320px;
min-height: 360px;
max-height:360px;
/*Change height when "read more" button added back in!
min-height: 420px;
max-height:420px;*/
border-radius: 2px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between;
white-space:normal;
}


.STPP-KDC-txt-box {
display: flex;
flex-direction: column;
align-items: center;
align-content: flex-start;
gap:30px;
height:360px;

}

.STPP-KDC-txttop {
color: rgba(41, 31, 51, 1);
align-content: center;
/* Heading/3 */
font-family: Raleway;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 30px; /* 150% */
letter-spacing: 1.92px;
padding-top:10px;
}

.STPP-KDC-txt {
color: #291F33;
text-align: left;

/* Body/Medium */
font-family: Raleway;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 26px; /* 214.286% */
letter-spacing: 2.24px;

}
	
	
.Read-more-wrap {
position:relative;
width: 200px;
height: 40px;
display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:center;
margin:0px auto 20px auto;

}

.Read-more-bkg {
position:absolute;
width: 200px;
height: 40px;
border-radius: 2px;	
display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:center;
background-color: rgba(205, 228, 255, 0.1);
box-shadow: 0px 2px 3px 0px rgba(4, 4, 80, 0.35);
z-index:11;

}	

.Read-more-wrap:hover Read-more-bkg {
position:absolute;
width: 200px;
height: 40px;
border-radius: 2px;	
display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:center;
background-color: rgba(205, 228, 255, 0.01);
box-shadow: 0px 2px 3px 0px rgba(4, 4, 80, 0.35);
z-index:11;

}


.Read-more-colorburn {
width: 200px;
height: 40px;
border-radius: 2px;
background-color: rgba(138, 214, 229, 0.4);
mix-blend-mode: color-burn;
position:absolute;
isolation:isolate;
animation:read-cb-tab 10s;
animation-fill-mode:forwards;
z-index:13;
}

.Read-more-wrap:hover .Read-more-colorburn {
width: 200px;
height: 40px;
border-radius: 2px;
background-color: rgba(138, 214, 229, 0.6);
mix-blend-mode: color-burn;
position:absolute;
isolation:isolate;
margin: 0px auto;
z-index: 13;
}



.Read-more-button {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background-color: rgba(138, 214, 229, 0.1);
width: 200px;
height: 40px;
border-radius: 2px;
gap:3px;
animation:read-but-tab 10s;
animation-fill-mode:forwards;
z-index:14;
}

.Read-more-wrap:hover .Read-more-button {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background-color: rgba(138, 214, 229, 0.06);
width: 200px;
height: 40px;
border-radius: 2px;
gap:3px;
z-index:14;
}


.Read-more-content {
display: flex;
flex-direction:row;
justify-content: flex-start;
align-items: center;
gap: 3px;
width:140px;
height: 24px;
animation:rm-fadein-tab 10s;
animation-fill-mode:forwards;

}

.Read-more {
color:rgba(41, 31, 51, 1);
text-align: center;

/* Action/Regular */
font-family: Raleway;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */
font-variant: small-caps;
letter-spacing: 1.92px;
animation:rm-txt-tab 10s;
animation-fill-mode:forwards;
	z-index:15;
}

.Read-more-arrow {
	height: 20px;
	width: 20px;
	background-image: url('images/Right Arrow.png');
	background-size: contain;
	animation:rm-arrow-tab 10s;
animation-fill-mode:forwards;
	z-index:15;
}




	}



/*size change tablet*/
@keyframes ac-grow-tab {
  0% {width:162px; height:108px; border-radius:6px}
  80% {width:162px; height:108px; border-radius:6px}
  90% {width:100%; height:108px; border-radius:6px}
  100% {width:100%; height:108px; border-radius:6px 6px 0px 0px}
}

@keyframes ac-cb-tab {
  0% {width:162px; height:108px; border-radius:6px}
  80% {width:162px; height:108px; border-radius:6px}
  90% {width:28%; height:108px; border-radius:6px}
  100% {width:28%; height:108px; border-radius:6px 6px 0px 0px}
}

@keyframes ac-wrap-grow-tab {
  0% {width:530px; height:108px; justify-content: space-between}
  80% {width:530px; height:108px; justify-content: space-between}
  88% {width:100%; height:108px; justify-content: space-around}
  100% {width:100%; height:auto; justify-content: space-around}
}

@keyframes col-grow-tab {
  0% {width:162px; height:108px; max-height:108px}
  80% {width:162px; height:108px; max-height:108px}
  90% {width:28%; height:108px; max-height:108px}
  100% {width:28%; height:512px;}

}

@keyframes col-grow-bkg-tab {
  0% {width:162px; height:108px; max-height:108px}
  80% {width:162px; height:108px; max-height:108px}
  90% {width:100%; height:108px; max-height:108px}
  100% {width:100%; height:512px;}
}

@keyframes grow-txt-tab {
  0% {height: 0px; padding:0px; width:0px;}
  80% {height: 0px; padding:0px; width:0px;}
  90% {height: 0px; padding:0px; width: 100%;}
  100% {height: 304px; padding:20px; width: calc(100% - 40px);}

}


@keyframes fadein-text-tab {
  0% {font-size: 0px; line-height: 0px; color: rgba(41, 31, 51, 0)}
  96% {font-size: 0px; line-height: 0px; color: rgba(41, 31, 51, 0)}
  100% {font-size: 13px; line-height: 26px; color: rgba(41, 31, 51, 0.9)}
}

@keyframes grow-wrap-tab {
  0% {height: 0px; width: 0px; margin:0px;}
  80% {height: 0px; width: 0px; margin:0px;}
  90% {height: 0px; width: 200px; margin:0px auto;}
  100% {height: 40px; width: 200px; margin:0px auto 20px auto;}
}


@keyframes read-grad-tab {
  0% {height: 0px; width:0px; background: rgba(204, 226, 255, 0.0);}
  90% {height: 0px; width:0px; background: rgba(204, 226, 255, 0.0);}
  100% {height: 40px; width:200px; background: linear-gradient(
	130deg, 
	rgba(204, 226, 255, 0.08) 0%,
	rgba(157, 200, 255, 0.02) 10%,
	rgba(240, 247, 255, 0.2) 36%,
	rgba(247, 251, 255, 0.2) 70%,
	rgba(157, 200, 255, 0.04) 82%,
	rgba(204, 226, 255, 0.08) 100%
	);}
}

@keyframes read-cb-tab {
  0% {height: 0px; background: rgba(0,0,0,0)}
  90% {height: 0px; background: rgba(0,0,0,0)}
  100% {height: 40px; background-color: rgba(138, 214, 229, 0.22)}
}

@keyframes read-but-tab {
  0% {height: 0px; opacity: 0%; background: rgba(0,0,0,0)}
  90% {height: 0px; opacity: 0%; background: rgba(0,0,0,0)}
  100% {height: 40px; opacity: 100%; background-color: rgba(138, 214, 229, 0.1)}
}


@keyframes rm-fadein-tab {
 0% {opacity:0%; height:0px; width: 0px;}
  90% {opacity:0%; height:0px; width: 0px;}
  100% {opacity:100%; height: 24px; width: 140px;}
}

@keyframes rm-txt-tab {
  0% {color: rgba(41, 31, 51, 0); line-height:0px; font-size: 0px;}
  90% {color: rgba(41, 31, 51, 0); line-height:0px; font-size: 0px;}
  100% {color: rgba(41, 31, 51, 1); line-height: 24px; font-size: 16px;}
}

@keyframes rm-arrow-tab {
  0% {opacity:0%; height:0px; width: 0px;}
  90% {opacity:0%; height:0px; width: 0px;}
  100% {opacity:100%; height: 20px; width: 20px;}
}

@keyframes header-top-tab {
0% {opacity:0%; top:60px}
20% {opacity:100%; top:60px}
60% {opacity:100%; top:60px}
80% {opacity:100%; top:0px}
100% {opacity:100%; top:0px}

}

@keyframes wyn-text-vanish-tab {
 0% {width:400px; line-height:40px; padding-top:140px; color: rgba(41, 31, 51, 0)}
  7% {width:400px; line-height:40px; padding-top:140px; color: rgba(41, 31, 51, 0)}
  21% {width:400px; line-height:40px; padding-top:140px; color: rgba(31, 41, 51, 1)}
  43% {width:400px; line-height:40px; padding-top:140px; color: rgba(31, 41, 51, 1)}
  57% {width:400px; line-height:40px; padding-top:40px; color: rgba(31, 41, 51, 1)}
  64.3% {width:400px; line-height:40px; padding-top:40px; color: rgba(31, 41, 51, 1)}
  70% {width:400px; line-height:40px; padding-top:40px; color: rgba(143, 148, 153, 1)}
  78.5% {width:400px; line-height:40px; padding-top:40px; color: rgba(255, 255, 255, 1)}
  86% {width:400px; line-height:40px; padding-top:40px; color: rgba(255, 255, 255, 1)}
  93% {width:400px; line-height:40px; padding-top:40px; color: rgba(255, 255, 255, 0)}
  100% {width:0px; line-height:0px; padding-top:0px; color: rgba(255, 255, 255, 0);}

}






@media (min-width : 1280px ){



/*.bkg-kdc-light  {
background: conic-gradient(
    from 240deg at 0% 120%,
rgba(172, 200, 226, 0.6) 122deg,
rgba(215, 231, 247, 0.7) 128deg,
rgba(169, 208, 247, 0.7) 132deg,
rgba(184, 209, 233, 0.7) 134deg,
rgba(163, 198, 233, 0.6) 148deg,
rgba(131, 157, 185, 0.6) 168deg,
rgba(159, 185, 209, 0.6) 176deg,
rgba(199, 227, 253, 0.6) 187deg,
rgba(163, 198, 233, 0.4) 194deg,
rgba(105, 128, 151, 0.4) 200deg,
rgba(149, 200, 251, 0.4) 202deg

);
 height:100%;
  left: 0px;
  top: 0px;
  width: 100%;
  border: none;
  position:fixed;
  z-index:1;
}*/

.h1home {
width:0px;
height:0px;
position:absolute;
top:0px;
left:0px;
}

.h1home h1{
color: rgba(41, 31, 51, 0);
font-family: Raleway;
font-size: 0px;
font-style: normal;
font-weight: 100;
line-height: 0px; /* 150% */
letter-spacing: 0px;	
}


.actxt-home-light   {
height:28px;
margin:0px;
}	

.actxt-home-light h2{
color: rgba(41, 31, 51, 1);
font-family: Raleway;
font-size: 28px;
font-style: normal;
font-weight: 800;
line-height:28px; /* 128.571% */
font-variant: small-caps;
letter-spacing: 2.8px;
margin:0px;
}

.ac-content {
height:70px;
margin: 33px auto;
}


.logo-text-wrap-coming {
position: absolute;
width: 100%;
top:0px;
left:0px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;


}

.menu-dropdown-animation {
position:absolute;
right:6px;
top:0px;
width:66px;
height:92px;
display:flex;
flex-direction:column;
justify-content: flex-start;
align-items:flex-start;
overflow:hidden;
animation:fadein 10s;
animation-fill-mode:forwards;
opacity:100%;
z-index: 5100;
}
	
.menu-dropdown-animation .menu-wrap {
position:absolute;
right:0px;
width:66px;
height:60px;
}	
	

.menu-dropdown-animation .menu {
margin: 18px 18px 12px 18px;
height: 30px;
width:30px;
background: url("images/Menu Icon 30.png");
background-size: contain; 
}

.page-scroll-home {
width: calc(100% - 160px);
max-width:1600px;
min-height:100%;
margin:0px auto;
padding: 0px 80px;
display:flex;
flex-direction:column;
align-items:center;
justify-content: flex-start;
overflow-y:auto;
position:relative;
}	
	
	
	
.when-you-need {
display:flex;
flex-direction:row;
justify-content: center;
align-items:flex-start;
white-space: normal;
position:relative;
/*animation:wyn-padding 10s;
animation-fill-mode:forwards;*/
}

.when-you-need p{
width:0px;
padding-top:0px;
color: rgba(41, 31, 51, 0);
align-content: center;
text-align:center;
font-family: Raleway;
font-size: 28px;
font-style: normal;
font-weight: 300;
line-height: 0px;
text-transform:uppercase;
letter-spacing: 1.92px;
animation:wyn-text-vanish 14s;
animation-fill-mode:forwards;
}

.home-ac-wrap {
width:100%;
display:flex;
margin:40px 0px;
flex-direction:row;
justify-content: space-around;
align-items:flex-start;
white-space: normal;
position:relative;
animation:ac-wrap-grow 10s;
animation-fill-mode:forwards;
}

.home-KDC-col {
width:30%;
height:560px;
display:flex;
flex-direction:column;
justify-content: flex-start;
align-items:center;
animation:col-grow 10s;
animation-fill-mode:forwards;
}
		
.home-KDC-colorburn {
width:30%;
height:560px;
border-radius: 6px;
background: rgba(31, 92, 153, 1);
mix-blend-mode: color-burn;
white-space: normal;
isolation: isolate;
position:absolute;
animation:col-grow 10s;
animation-fill-mode:forwards;
z-index:5;
}
	
.home-KDC-glass {
width:30%;
height:560px;
border-radius: 6px;
background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.4) 7%,
    rgba(255, 255, 255, 0.45) 15%,
    rgba(255, 255, 255, 0.4) 25%,
    rgba(255, 255, 255, 0.45) 31%,
    rgba(255, 255, 255, 0.4) 37%,
    rgba(255, 255, 255, 0.35) 49%,
    rgba(255, 255, 255, 0.3) 57%,
    rgba(255, 255, 255, 0.35) 68%,
    rgba(255, 255, 255, 0.4) 79%,
    rgba(255, 255, 255, 0.35) 87%,
    rgba(255, 255, 255, 0.3) 100%
);
mix-blend-mode:hard-light;
white-space: normal;
isolation: isolate;
position:absolute;
animation:col-grow-mob 10s;
animation-fill-mode:forwards;
z-index:6;	
		
	}

.home-KDC-bkg {
width:100%;
height:560px;
display:flex;
flex-direction:column;
justify-content: flex-start;
align-items:center;
background: rgba(255, 255, 255, 0.01);
border-radius:6px;
animation:col-grow-bkg 10s;
animation-fill-mode:forwards;
z-index:7;

}	

.home-KDC-gradient {
width:100%;
height:100%;
border-radius:6px 6px 0px 0px;
mix-blend-mode: color-burn;
position:absolute;
isolation:isolate;
background: linear-gradient(
	130deg, 
	rgba(204, 226, 255, 0.08) 0%,
	rgba(157, 200, 255, 0.02) 10%,
	rgba(240, 247, 255, 0.2) 36%,
	rgba(247, 251, 255, 0.2) 70%,
	rgba(157, 200, 255, 0.04) 82%,
	rgba(204, 226, 255, 0.08) 100%
	);
box-shadow:0px -20px 40px rgba(93, 85, 104, 0.1) inset;
animation:col-grow-bkg 10s;
animation-fill-mode:forwards;
z-index: 5;

}

.home-KDC-text {
width: calc(100% - 80px);
height: 324px;
padding:10px 40px;
display:flex;
margin:auto;
flex-direction:column;
justify-content: flex-start;
align-items:center;
animation:grow-txt 10s;
animation-fill-mode:forwards;

}

.home-KDC-text p{
color: rgba(41, 31, 51, 0.9);
align-content: center;
font-family: Raleway;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 30px; /* 150% */
letter-spacing: 2.4px;
animation:fadein-text 10s;
animation-fill-mode: forwards;
}		

header {
animation:header-top 10s;
animation-fill-mode: forwards;
}

.logo-wrap {
animation:header-top 10s;
animation-fill-mode: forwards;
}

.logo-text-wrap {
animation:header-top 10s;
animation-fill-mode: forwards;
}

.ac-card-wrap {
width:100%;
border-radius:6px 6px 0px 0px;
animation:ac-wrap 10s;
animation-fill-mode:forwards;
}

.Read-more-wrap {
animation:grow-wrap 10s;
animation-fill-mode:forwards;
}

.Read-more-gradient {
width: 200px;
height: 40px;
margin:0px auto;
border-radius: 2px;
mix-blend-mode: color-burn;
position:absolute;
isolation:isolate;
background: linear-gradient(
	130deg, 
	rgba(204, 226, 255, 0.08) 0%,
	rgba(157, 200, 255, 0.02) 10%,
	rgba(240, 247, 255, 0.2) 36%,
	rgba(247, 251, 255, 0.2) 70%,
	rgba(157, 200, 255, 0.04) 82%,
	rgba(204, 226, 255, 0.08) 100%
	);

animation:read-grad 10s;
animation-fill-mode:forwards;
	z-index:12;
}

.ac-colorburn {
width:100%;
height:136px;
background-color:  rgba(138, 184, 229, 0.4);
mix-blend-mode:color-burn;
border-radius:6px 6px 0px 0px;
animation:ac-cb-grow 10s;
animation-fill-mode:forwards;
z-index:9;
}




.ac-glass {
width:100%;
height:136px;
border-radius:6px 6px 0px 0px;
background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.4) 7%,
    rgba(255, 255, 255, 0.45) 15%,
    rgba(255, 255, 255, 0.4) 25%,
    rgba(255, 255, 255, 0.45) 31%,
    rgba(255, 255, 255, 0.4) 37%,
    rgba(255, 255, 255, 0.35) 49%,
    rgba(255, 255, 255, 0.3) 57%,
    rgba(255, 255, 255, 0.35) 68%,
    rgba(255, 255, 255, 0.4) 79%,
    rgba(255, 255, 255, 0.35) 87%,
    rgba(255, 255, 255, 0.3) 100%
);
mix-blend-mode:hard-light;
animation:ac-cb-grow 10s;
animation-fill-mode:forwards;
z-index:10;

}

.ac-sel-light {
z-index:11;
background:linear-gradient( 
	120deg, 
	rgba(255, 255, 255, 0.2) 0%, 
	rgba(255, 255, 255, 0.3) 25%, 
	rgba(255, 255, 255, 0.2) 50%, 
	rgba(255, 255, 255, 0.3) 75%, 
	rgba(255, 255, 255, 0.2) 100% 
	);
border-radius:6px 6px 0px 0px;
animation:ac-sel-grow 10s;
animation-fill-mode:forwards;
}







.banner-bkg {
animation:header-delay 10s;
animation-fill-mode:forwards;
}


.menu-dropdown-closed {
animation:fadein 10s;
animation-fill-mode:forwards;
}




/*.logo-text {
animation:OICtext 10s;
animation-fill-mode:forwards;
}

@keyframes OICtext {
  0% {width:900px; height: 118px}
  82% {width:900px; height: 118px}
  100% {width:332px; height: 64px}
}

.logo-text-lg {
color: var(--purple-75-opacity, #5D5566);
font-family: Raleway;
font-size: 36px;
font-style: normal;
font-weight: 300;
line-height: 36px; 
letter-spacing: 7.92px;
animation:OICtext-lg 10s;
animation-fill-mode:forwards;
}

@keyframes OICtext-lg {
  0% {font-size: 64px; line-height: 64px; font-weight: 200; letter-spacing: 12px;}
  82% {font-size: 64px; line-height: 64px; font-weight: 200; letter-spacing: 12px;}
  100% {font-size: 36px; line-height: 36px; font-weight: 300; letter-spacing: 7.92px;}
}

.logo-text-sm {
color: var(--purple-75-opacity, #5D5566);
font-family: Raleway;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 18px; 
letter-spacing: 3.96px;
text-transform: uppercase;
animation:OICtext-sm 10s;
animation-fill-mode:forwards;
}

@keyframes OICtext-sm {
  0% {font-size: 40px; line-height: 40px; font-weight: 300; letter-spacing: 16px;}
  82% {font-size: 40px; line-height: 40px; font-weight: 300; letter-spacing: 16px;}
  100% {font-size: 18px; line-height: 18px; font-weight: 500; letter-spacing: 3.96px;}
}*/

/*.logo-o {
color: #38ACED;
font-family: Raleway;
font-size: 64px;
font-style: normal;
font-weight: 200;
line-height: 64px;
animation:logo-o 10s;
animation-fill-mode:forwards;
margin-left:400px;
}

@keyframes logo-o {
  0% {opacity:0%; font-size: 64px; line-height: 64px; font-weight: 200}
  24% {opacity:100%; font-size: 64px; line-height: 64px; font-weight: 200}
  100% {opacity:100%; font-size: 100px; line-height: 100px; font-weight: 200}
}*/


.contact-header {
animation:fadein 10s;
animation-fill-mode: forwards;	
}

.about-header {
animation:fadein 10s;
animation-fill-mode: forwards;	
}



.content-box-wrap {
margin-top:70px;
width:100%;
border-radius: 2px;
white-space: normal;
position:relative;
background-color: rgba(255, 255, 255, 0.01);
margin:70px 0px 140px 0px;
padding:0px 0px 68px 0px;
z-index:2;
}	


.content-box-colorburn {
width:100%;
height: 100%;
border-radius: 2px;
background-color: rgba(138, 214, 229, 0.4);
mix-blend-mode: color-burn;
white-space: normal;
isolation: isolate;
position:absolute;
padding:68px auto 0px auto;
z-index:3;
}



.content-box-2 {
width:100%;
height:100%;
border-radius: 2px;
display:flex;
flex-direction:column;
justify-content: flex-start;
gap:40px;
align-items:center;
top:0px;
background: rgba(138, 214, 229, 0.1);
padding:60px 0px 8px 0px;
white-space: normal;
position:relative;
z-index:4;
}

.smaller-content-box {
width:83.33%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
margin: 0px auto;
gap:40px;
}



.KDC-Content-header {
display:flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 6px;
width:190px;
height:40px;
margin:0px auto;
}

.KDC-content-header-icon {
width: 40px;
height: 40px;
}

.KDC-content-header-txt {
top: 2px;
color: var(--purple-default, #291F33);
font-family: Raleway;
font-size: 28px;
font-style: normal;
font-weight: 800;
line-height: 36px; /* 128.571% */
font-variant: small-caps;
letter-spacing: 2.8px;

}



.text {
width:100%;
height: auto;
margin: 0px auto;
position:inherit;
color: rgba(22, 24, 26, 1);
text-align: justify;
font-family: Raleway;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 222.222% */
letter-spacing: 2.88px;
}

.STPP-KDC-view-frame {
width:100%;
min-height: 560px;
max-height:560px;
white-space:nowrap;
overflow-x:hidden;
margin: 0px auto;
}


STPP-KDC-scroll-bkg {
display:none;
width:100%;
min-height: 540px;
max-height:540px;
border-radius:6px 6px 0px 0px;	
background-color: rgba(138, 214, 229, 0.4);
mix-blend-mode: color-burn;
position:absolute;
left:0px;
isolation:isolate;
z-index:6;
}

.STPP-KDC-scroll-frame {
min-height: 540px;
max-height:540px;
display:flex;
flex-direction:row;
justify-content:flex-start;
gap:40px;
white-space: nowrap;
overflow-x:auto;
position:relative;
}


.STPP-KDC-wrap {
min-width: 360px;
min-height: 540px;
max-height:540px;
border-radius:6px;
position:relative;
/*	background-image: url("images/STPP-KDC all.png");*/
/*background: linear-gradient(
	160deg, 
	rgba(205, 228, 255, 0.16) 10%,
	rgba(255, 255, 255, 0.1) 26%,
	rgba(255, 255, 255, 0.2) 68%,
	rgba(157, 200, 255, 0.16) 82%,
	rgba(157, 200, 255, 0.21) 100%
	);*/
background-color: rgba(255, 255, 255, 0.01);
z-index: 5;
/*box-shadow:10px 0px 30px rgba(93, 85, 104, 0.04) inset;*/
}

.STPP-KDC-bkg {	
min-width: 360px;
min-height: 540px;
max-height:540px;
border-radius: 2px;
background-color: rgba(138, 214, 229, 0.4);
mix-blend-mode: color-burn;
position:absolute;
left:0px;
top:0px;
isolation:isolate;
z-index:6;
/*box-shadow:-10px -10px 30px rgba(93, 85, 104, 0.04) inset;*/
}




.STPP-KDC-box {
min-width: 360px;
max-height: 540px;
min-height: 540px;
border-radius: 2px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between;
white-space:normal;
background-color: rgba(138, 214, 229, 0.1);
/*background-color: rgba(159, 143, 179, 0.14);*/
z-index: 7;
}




.STPP-KDC-header {
width: 360px;
min-height: 80px;
display:flex;
border-radius:6px 6px 0px 0px;
flex-direction:row;
align-items:center;
justify-content:center;
position:relative;
gap:6px;
background: linear-gradient(
	130deg, 
	rgba(204, 226, 255, 0.08) 0%,
	rgba(157, 200, 255, 0.02) 10%,
	rgba(240, 247, 255, 0.2) 36%,
	rgba(247, 251, 255, 0.2) 70%,
	rgba(157, 200, 255, 0.04) 82%,
	rgba(204, 226, 255, 0.08) 100%
	);
z-index: 8;
box-shadow:0px -20px 40px rgba(93, 85, 104, 0.1) inset;

}


.STPP-KDC-header-colorburn {
min-width: 360px;
height: 80px;
border-radius:6px 6px 0px 0px;
background-color: rgba(138, 214, 229, 0.4);
/*background-color: rgba(138, 214, 229,, 0.3);*/
mix-blend-mode: color-burn;
position:absolute;
left:0px;
top:0px;
isolation:isolate;
z-index:9;
}

.STPP-KDC-header-bkg {
min-width: 360px;
height: 80px;
border-radius:6px 6px 0px 0px;
background-color: rgba(138, 214, 229, 0.1);
position:absolute;
left:0px;
top:0px;
z-index:10;			
}


.STPP-KDC-header-content {
position: absolute;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin:0px auto;	
gap: 4px;
}

.STPP-KDC-icon {
width: 40px;
height: 40px;
}

.STPP-KDC-headertext {
color: rgba(41, 31, 51, 1);
text-align: center;
font-family: Raleway;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 36px; /* 150% */
font-variant: small-caps;
letter-spacing: 2.4px;
}

.STPP-KDC-TxtReadWrap {
width: 320px;
min-height: 380px;
max-height:380px;
/*Change height when "read more" button added back in!
min-height: 460px;
max-height:460px;*/
border-radius: 2px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
white-space:normal;
}

.STPP-KDC-txt-box {
display: flex;
flex-direction: column;
align-items: center;
align-content: flex-start;
gap:30px;
height:380px;

}

.STPP-KDC-txttop {
color: rgba(41, 31, 51, 1);
align-content: center;
font-family: Raleway;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 30px; /* 150% */
letter-spacing: 1.92px;
padding-top:10px;
}

.STPP-KDC-txt {
color: #291F33;
text-align: justify;
font-family: Raleway;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 26px; /* 214.286% */
letter-spacing: 2.24px;

}
	
	
.Read-more-wrap {
position:relative;
width: 200px;
height: 40px;
display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:center;
margin:0px auto 40px auto;

}

.Read-more-bkg {
position:absolute;
width: 200px;
height: 40px;
border-radius: 2px;	
display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:center;
background-color: rgba(205, 228, 255, 0.1);
box-shadow: 0px 2px 3px 0px rgba(4, 4, 80, 0.35);
z-index:11;

}	


.Read-more-bkg:hover {
position:absolute;
width: 200px;
height: 40px;
border-radius: 2px;	
display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:center;
background-color: rgba(205, 228, 255, 0.01);
box-shadow: 0px 2px 3px 0px rgba(4, 4, 80, 0.35);
z-index:11;

}

.Read-more-colorburn {
width: 200px;
height: 40px;
border-radius: 2px;
background-color: rgba(138, 214, 229, 0.4);
mix-blend-mode: color-burn;
position:absolute;
isolation:isolate;
margin: 0px auto;
animation:read-cb 10s;
animation-fill-mode:forwards;
z-index:13;
}


.Read-more-colorburn:hover {
width: 200px;
height: 40px;
border-radius: 2px;
background-color: rgba(138, 214, 229, 0.6);
mix-blend-mode: color-burn;
position:absolute;
isolation:isolate;
margin: 0px auto;
z-index: 13;
}

.Read-more-button {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background-color: rgba(138, 214, 229, 0.1);
width: 200px;
height: 40px;
border-radius: 2px;
gap:3px;
animation:read-but 10s;
animation-fill-mode:forwards;
z-index:14;
}

.Read-more-button:hover {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background-color: rgba(138, 214, 229, 0.06);
width: 200px;
height: 40px;
border-radius: 2px;
gap:3px;
z-index:14;
}


.Read-more-content {
display: flex;
flex-direction:row;
justify-content: flex-start;
align-items: center;
gap: 3px;
width:140px;
height: 24px;
animation:rm-fadein 10s;
animation-fill-mode:forwards;

}

.Read-more {
color:rgba(41, 31, 51, 1);
text-align: center;
font-family: Raleway;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */
font-variant: small-caps;
letter-spacing: 1.92px;
animation:rm-txt 10s;
animation-fill-mode:forwards;
	z-index:15;
}

.Read-more-arrow {
	height: 20px;
	width: 20px;
	background-image: url('images/Right Arrow.png');
	background-size: contain;
	animation:rm-arrow 10s;
animation-fill-mode:forwards;
	z-index:15;
}







	
	
}

@keyframes ac-cb-grow 
{0% {width:204px; height:136px; border-radius:6px}
  80% {width:204px; height:136px; border-radius:6px}
  90% {width:100%; height:136px; border-radius:6px}
  100% {width:100%; height:100%; border-radius:6px 6px 0px 0px}
}

@keyframes ac-wrap-grow {
  0% {width:656px; height:136px; justify-content: space-between}
  80% {width:656px; height:136px; justify-content: space-between}
  90% {width:100%; height:136px; justify-content: space-around}
  100% {width:100%; height:auto; justify-content: space-around}
}

@keyframes col-grow {
  0% {width:204px; height:136px}
  80% {width:204px; height:136px}
  90% {width:30%; height:136px}
  100% {width:30%; height:560px}

}

@keyframes col-grow-bkg {
  0% {width:204px; height:136px}
  80% {width:204px; height:136px}
  90% {width:100%; height:136px}
  100% {width:100%; height:560px}
}

@keyframes grow-txt {
  0% {height: 0px; padding:0px; width:0px;}
  80% {height: 0px; padding:0px; width:0px;}
  90% {height: 0px; padding:0px; width: 100%;}
  100% {height: 324px; padding:10px 40px; width: calc(100% - 80px);}

}

@keyframes fadein-text {
  0% {font-size: 0px; line-height: 0px; color: rgba(41, 31, 51, 0)}
  96% {font-size: 0px; line-height: 0px; color: rgba(41, 31, 51, 0)}
  100% {font-size: 16px; line-height: 30px; color: rgba(41, 31, 51, 0.9)}
}

@keyframes grow-wrap {
  0% {height: 0px; width: 0px; margin: 0px;}
  80% {height: 0px;width: 0px; margin: 0px;}
  90% {height: 0px; width: 320px; margin: 0px auto;}
  100% {height: 40px; width: 320px; margin: 0px auto 40px auto;}
}

@keyframes read-cb {
  0% {height: 0px; background: rgba(0,0,0,0)}
  90% {height: 0px; background: rgba(0,0,0,0)}
  100% {height: 40px; background-color: rgba(138, 214, 229, 0.22)}
}

@keyframes read-but {
  0% {height: 0px; opacity: 0%; background: rgba(0,0,0,0)}
  90% {height: 0px; opacity: 0%; background: rgba(0,0,0,0)}
  100% {height: 40px; opacity: 100%; background-color: rgba(138, 214, 229, 0.1)}
}

@keyframes header-top {
0% {opacity:0%; top:60px}
20% {opacity:100%; top:60px}
60% {opacity:100%; top:60px}
80% {opacity:100%; top:0px}
100% {opacity:100%; top:0px}

}

@keyframes wyn-text-vanish {
  0% {width:400px; line-height:40px; padding-top:140px; color: rgba(41, 31, 51, 0)}
  7% {width:400px; line-height:40px; padding-top:140px; color: rgba(41, 31, 51, 0)}
  21% {width:400px; line-height:40px; padding-top:140px; color: rgba(31, 41, 51, 1)}
  43% {width:400px; line-height:40px; padding-top:140px; color: rgba(31, 41, 51, 1)}
  57% {width:400px; line-height:40px; padding-top:40px; color: rgba(31, 41, 51, 1)}
  64.3% {width:400px; line-height:40px; padding-top:40px; color: rgba(31, 41, 51, 1)}
  70% {width:400px; line-height:40px; padding-top:40px; color: rgba(143, 148, 153, 1)}
  78.5% {width:400px; line-height:40px; padding-top:40px; color: rgba(255, 255, 255, 1)}
  86% {width:400px; line-height:40px; padding-top:40px; color: rgba(255, 255, 255, 1)}
  93% {width:400px; line-height:40px; padding-top:40px; color: rgba(255, 255, 255, 0)}
  100% {width:0px; line-height:0px; padding-top:0px; color: rgba(255, 255, 255, 0);}

}

@keyframes read-grad {
  0% {height: 0px; width:0px; background: rgba(204, 226, 255, 0.0);}
  90% {height: 0px; width:0px; background: rgba(204, 226, 255, 0.0);}
  100% {height: 40px; width:200px; background: linear-gradient(
	130deg, 
	rgba(204, 226, 255, 0.08) 0%,
	rgba(157, 200, 255, 0.02) 10%,
	rgba(240, 247, 255, 0.2) 36%,
	rgba(247, 251, 255, 0.2) 70%,
	rgba(157, 200, 255, 0.04) 82%,
	rgba(204, 226, 255, 0.08) 100%
	);}
}

@keyframes rm-fadein {
 0% {opacity:0%; height:0px; width: 0px;}
  90% {opacity:0%; height:0px; width: 0px;}
  100% {opacity:100%; height: 24px; width: 140px;}
}

@keyframes rm-txt {
  0% {color: rgba(41, 31, 51, 0); line-height:0px; font-size: 0px;}
  90% {color: rgba(41, 31, 51, 0); line-height:0px; font-size: 0px;}
  100% {color: rgba(41, 31, 51, 1); line-height: 24px; font-size: 16px;}
}

@keyframes rm-arrow {
  0% {opacity:0%; height:0px; width: 0px;}
  90% {opacity:0%; height:0px; width: 0px;}
  100% {opacity:100%; height: 20px; width: 20px;}
}