/******************** GENERAL ADJUSTMENTS ********************/                                                                                                            
body, html {                                                                                                                                                                                                                                                                                                                                          
	overflow-x: hidden;
	background-color: #CB3CFF;
}
  
* {                 
	margin: 0px auto;
	padding: 0px;
	box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, p, a { 
	font-family: 'Montserrat', sans-serif;
}

/* link */ 
a, a:hover {
	text-decoration: none;
} 

/* background image */
.background {
	background-size: cover;
	background-position: 50% 50%;
} 

/* fill-parent */ 
.fill-parent {
	width: 100%;
	height: 100%; 
}  

/* cursor */
.typewritercursor { 
    font-weight: 100 !important; 
    position: relative !important;
    bottom: 2px !important;
    left: 5px !important;
	animation: cursorblink 1s step-end infinite; 
}
  





  
       
/******************** PRELOADER ********************/  
/* overlay */
#PreloadNavigateOverlay {
    width: 100%;
    height: 100vh;	
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 99999999; 
	background-color: #0A1026;
} 

/* dvh */
@supports (height: 100dvh) {
    #PreloadNavigateOverlay { height: 100dvh; }
}  

/* circle overlay */
#PreloadNavigate {   
    position: fixed;
	top: 50%;
	left: 50%;
    z-index: 999999999;
	background-color: #0A1026;
	border-radius: 100%;
}

/* loader */
#LoaderContainer { 
	width: 80px;
	height: 80px; 
	position: fixed;
	top: calc(50% - 40px);
	left: calc(50% - 40px);   
    z-index: 9999999999; 
}

/* inner */ 
#LoaderInner {  
    width: 80px;
	height: 80px; 
	animation: preloadpulsate 2s linear infinite;
}

/* spinner */
#LoaderContainer .spin {
	position: absolute;
	border: 2px solid transparent; 
	border-radius: 100%;
}

#LoaderContainer #SpinnerOne {  
	width: 80px; 
	height: 80px; 
	top: calc(50% - 40px); 
	left: calc(50% - 40px);
	border-top-color: #CB3CFF;
	border-bottom-color: #CB3CFF;
    animation: spinclockwise 1s linear infinite; 
}

#LoaderContainer #SpinnerTwo { 
	width: 50px;
	height: 50px;
	top: calc(50% - 25px);
	left: calc(50% - 25px);
	border-right-color: white;
    animation: spincounterclockwise 1s linear infinite; 
}

#LoaderContainer #SpinnerThree {
	width: 20px;
	height: 20px;
	top: calc(50% - 10px);
	left: calc(50% - 10px);
	border-right-color: #CB3CFF;
	border-left-color: #CB3CFF;
    animation: spinclockwise 5s linear infinite; 
}

#LoaderContainer #SpinnerFour {
	width: 4px;
	height: 4px;
	top: calc(50% - 2px);
	left: calc(50% - 2px); 
	background-color: #CB3CFF;
}







 
/******************** NAVIGATION ********************/        


/****** HAM ******/
#Hamburger {  
   width: 44px;
   height: 50px;
   padding-top: 18px; 
   position: fixed;
   top: 30px;
   left: 30px;  
   z-index: 9999999; 
   cursor: pointer;    
   background: linear-gradient(to bottom right, #CB3CFF 20%, #7F25FB 68%);
   clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); 
   transition: 1s;
}

/* ham active */
#Hamburger.active {  
   left: 103px; 
   transform: rotate(360deg);
}
 
/* inner */
#Hamburger .inner-el {
	opacity: 0;  
	transition: 1000ms; 
} 

#Hamburger .inner-el.first {
	opacity: 1;  
}

/* inner active */   
#Hamburger.active .inner-el {
	opacity: 1;  
}
 
#Hamburger.active .inner-el.first {
	opacity: 0 !important; 
}

/* bar */
#Hamburger .bar { 
   width: 20px;	
   height: 4px;
   margin-top: 3px; 
   background-color: white;
}

#Hamburger .bar:nth-child(1) {
   margin-top: 2px;
}

/* close */
#Hamburger #Close {
	width: 100%;
	position: absolute;
	top: 13px;
	text-align: center;
	font-weight: 900;
	font-size: 20px;
	color: white;
}

/* hover */ 
#Hamburger:hover {
	opacity: 0.3;
}


/****** NAV ******/   
#Navigation { 
   display: none;  
   width: 250px; 
   height: 100vh;
   position: fixed;
   top: 0px;
   left: 0px;
   z-index: 999999;
   opacity: 0;    
   background-color: #0E1737; 
   border-right: 1px solid #232942;
}     

/* dvh */
@supports (height: 100dvh) {
    #Navigation { height: 100dvh; }
}  

/* social */
#Navigation #Social {
	width: 100%;
	height: 50px;
	padding: 0px 0px; 
	position: absolute;
	top: 30px;
    opacity: 0; 
    transition: 500ms; 	
}

#Navigation #Social.active {
	padding: 0px 30px;     
	opacity: 1; 
}

/* social - img */
#Navigation #Social img {
	display: block;
	width: 44px;
	height: 50px;  
	padding: 12.5px;
	object-fit: contain; 
	cursor: pointer;  
	background-color: #232942;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); 
} 

#Navigation #Social #IG {
	float: left;
} 

#Navigation #Social #FB {
	float: right;
}

/* links */ 
#NavigationInner { 
	width: 100%;
	height: calc(100% - 170px);
	position: absolute;
	top: 110px;
	left: 0px;
	overflow-y: scroll;
	border-top: 1px solid #232942;
} 

/* links - scroll */ 
#NavigationInnerScroll {
	width: 100%;
	height: auto;
	padding-top: 50px;
	padding-bottom: 200px;
	padding-left: 30px;
	text-align: left;
}
 
/* links - p */ 
#NavigationInner p { 
    margin-top: 25px; 
    padding-left: 30px;
    position: relative;
    opacity: 0;
    cursor: pointer; 
	line-height: 1; 
    font-size: 18px; 
    font-weight: 900; 
    color: white;
	transform: translate(0px, 50px);
    transition: 1s;
}

#NavigationInner p.display {
	opacity: 1;
	transform: translate(0px, 0px);
}

/* links - p - span */ 
#NavigationInner p span {
	position: absolute;
	bottom: 2px;
	left: 0px;
	opacity: 1;
	font-size: 9px;
	font-weight: 300;
	color: #CB3CFF;
}

/* links - p - hover */ 
#NavigationInner p:hover {
	opacity: 0.3;
}

/* footer */
#Navigation #Footer {
	width: 100%;
	padding: 20px 0px 17px;
	position: absolute;
	bottom: 0px;
	left: 0px;
	text-align: center;
	word-spacing: 3px;
	font-size: 9px;
	font-weight: 300;
	border-top: 1px solid #232942;
	color: #6E7595;
} 
 
/* overlay */
#NavigationOverlay {
	display: none;
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 99999;
    opacity: 0;	  
	background-color: rgba(10, 16, 38, 0.9); 
}

/* dvh */
@supports (height: 100dvh) {
    #NavigationOverlay { height: 100dvh; }
}  



 



/******************** SECTION NAVIGATION *********************/                     

 
/****** EXTEND BODY ******/ 
#ScrollBodySection {
    height: 300000px;
    width: 100%; 
    position: relative;
} 

#ScrollBodyCenter {
    width: 100%;
    height: 2px;
    position: absolute;
    top: calc(50% - 1px);
    left: 0px;                
}


/****** SLIDERS & CONT SECS ******/   
.animatesec {
    width: 100%;
    height: 100vh; 
    position: fixed;
    top: 100vh;
    left: 0px;
}

/* dvh */
@supports (height: 100dvh) {
    .animatesec { 
    	height: 100dvh; 
    	top: 100dvh;
    }
}  

/* content */
.animatesec.cont {
     z-index: 99;
     overflow: hidden;
} 

.animatesec.cont.active {
    top: 0px;
} 
     
/* slider */
.animatesec.slider {
    z-index: 999; 
}

#SecNavOne {
    background-color: #0A1026;
}

#SecNavTwo {
    background-color: #0E1737;   
}


/****** NAV LOGO ******/ 
#NavLogo {
    width: auto;
    height: 50px;
    top: 30px; 
    right: 30px;
    position: fixed; 
    z-index: 9999;
}


/****** DOT ******/ 
#DotNavigation {   
	width: 144px;   
    height: 16px;
	position: fixed;
	bottom: 30px;     
	left: 30px;
	z-index: 9999;  
}
 
/* dot */
#DotNavigation .container {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: 16px;
	float: left;
	cursor: pointer;
	border: 1px solid white;
	border-radius: 100%;
	transition: 300ms;   
} 
	
#DotNavigation .container:nth-child(1) {
	margin-left: 0px;
} 
 
/* inner */ 
#DotNavigation .container .inner {
	width: 6px;
	height: 6px;
	margin-top: 4px;
	background-color: white;
	border-radius: 100%; 
	transform: scale(2.5);
	transition: 500ms;    
}  
 
/* active */ 
#DotNavigation .container.active {  
	border: 1px solid #CB3CFF;
}
 
#DotNavigation .container.active .inner {
	background-color: #CB3CFF;  
	transform: scale(1);  
}

/* inactive hover */ 
#DotNavigation .container:not(.active):hover {
	opacity: 0.3;
} 


/****** SCROLL GIF ******/ 
/* scroll gif */
#ScrollGif {
    display: block;
    width: 70px;
    height: auto;
    position: fixed;
    bottom: 10px;
    left: calc(50% - 35px);
    z-index: 9999;
    transition: 500ms;
}  


/****** SECTION HEADER ******/ 
#SecHeader {
    width: 144px;        
    height: 50px;
    padding-top: 25px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    text-align: center;
    font-weight: 900;
    font-size: 14px;
    color: white;
    border-bottom: 1px solid #CB3CFF;
}








/******************** INFO MODAL *********************/     
#InfoModal {                
	width: 100%;
	height: 100vh;   
	position: fixed;
	top: 0px;
	left: 0px;
    z-index: 9999999999; 
	opacity: 0;
	pointer-events: none; 
	background-color: rgba(10, 16, 38, 0.9);   
	transition: 1s;
}

#InfoModal.active {
	opacity: 1;
	pointer-events: auto;
}

/* dvh */
@supports (height: 100dvh) {
    #InfoModal { height: 100dvh; }
}  

/* inner */
#InfoModal #InfoModalInner {
	width: 650px;
	height: 100%;
	position: absolute;
	top: 0px;
	right: -600px;
	opacity: 0;
	background-color: #0E1737;
	border-left: 1px solid #232942;
	transition: 350ms; 
}

#InfoModal #InfoModalInner.active {
	right: 0px;
	opacity: 1;
}

/* close */
#InfoModal #InfoModalClose {
	width: 50px;
	height: 70px;
	padding-top: 17.5px;
	position: absolute;
	top: 0px;
	right: 35px;
	z-index: 3;
	cursor: pointer;
	background: linear-gradient(to bottom right, #CB3CFF 20%, #7F25FB 68%);
	text-align: center;
	font-size: 25px;
	font-weight: 900;
	border-bottom-right-radius: 25px;
	border-bottom-left-radius: 25px;
	color: white;
	transition: 1s;
}

#InfoModal #InfoModalClose:hover {
	opacity: 0.3;
}

/* header */
#InfoModal #InfoModalHeader {
	width: 100%;
	height: auto;
	padding: 70px;
	padding-right: 120px;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 2;
	background-color: #0E1737;
	border-bottom: 1px solid #232942; 
}

/* header - h2 */
#InfoModal #InfoModalHeader h2 {
	font-size: 7px;
	font-weight: 300;
	color: #CB3CFF;
}

#InfoModal #InfoModalHeader h2 span {
	padding-left: 10px;
	font-weight: bold;
}

/* header - h1 */
#InfoModal #InfoModalHeader h1 {
	margin-top: 15px;
    word-spacing: 10px;  
	line-height: 1; 
    font-size: 35px;
    font-weight: 900;
    color: white;
}  

/* content */
#InfoModal #InfoModalContent {
	width: 100%;
	position: absolute;
	left: 0px;
	z-index: 1;
	overflow-y: scroll;
}

/* content - inner */
#InfoModal #InfoModalContentInner {
	width: 100%;
	height: auto;
	padding: 10px 70px 300px; 
}

/* content - inner - h2 */
#InfoModal #InfoModalContentInner h2 {
	margin-top: 70px;
	font-size: 7px;
	font-weight: 300;
	color: #CB3CFF;
}

#InfoModal #InfoModalContentInner h2 span {
	padding-left: 10px;
	font-weight: bold;
}

/* content - inner - p */
#InfoModal #InfoModalContentInner p {
	margin-top: 20px;
	word-spacing: 1px;
	line-height: 1.5;
	font-size: 15px;
	font-weight: 400;
	color: #6E7595;
}

/* animation - fade */
#InfoModal .imc-animation.fade {
	opacity: 0;
	transition: 2250ms;
}

#InfoModal .imc-animation.fade.active {
	opacity: 1;
}
 
/* animation - translate */ 
#InfoModal .imc-animation.translate {
	opacity: 0;
	transform: translate(0px, 25px);
	transition: 750ms;
}

#InfoModal .imc-animation.translate.active {
	opacity: 1;
	transform: translate(0px, 0px);
}








/******************** WELCOME SECTION *********************/       
/* layout */   
#WelcomeSection .layout {
    position: absolute;
    top: 0px;
    left: 0px;
}

/* image */
#WelcomeSection #WelcomeImage {
    z-index: 1;
    background-image: url("../../Assets/Video/bg_1.gif"); 
}

/* overlay */
#WelcomeSection #WelcomeOverlay { 
	z-index: 2; 
	opacity: 0.925;
	background-color: #0A1026;  
}  

/* content */
#WelcomeSection #WelcomeContent {
	width: 550px;
	height: auto;
	position: absolute;
	top: calc(50% - 150px);
	left: calc(50% - 275px);
	z-index: 3;
    text-align: center;
}

/* content - h2 */
#WelcomeSection #WelcomeContent h2 {
	font-size: 8px;
	font-weight: 300;
	color: #CB3CFF;
}

#WelcomeSection #WelcomeContent h2 span {
	padding-left: 10px;
	font-weight: bold;
}

/* content - h1 */
#WelcomeSection #WelcomeContent h1 {
	margin-top: 35px;
    word-spacing: 10px;  
	line-height: 1; 
    font-size: 50px;
    font-weight: 900;
    color: white;
}

/* content - divider */
#WelcomeSection #WelcomeContent #WelcomeContentDivider {
	width: 100%;
	height: 1px;
	margin: 40px 0px 40px;
	background-color: #232942;    
}

/* content - p */
#WelcomeSection #WelcomeContent p {
	word-spacing: 2px;
	line-height: 1.5;
	font-size: 17px;
	font-weight: 300;
	color: #6E7595;
}

#WelcomeSection #WelcomeContent p span,
#WelcomeSection #WelcomeContent p strong {
	color: #CB3CFF;
}

#WelcomeSection #WelcomeContent p span {
	padding-left: 2px;
	font-weight: bold;
}

#WelcomeSection #WelcomeContent p strong {
	padding-left: 1px;
	font-weight: 300;
}

/* animation */
#WelcomeSection .ws-animation {
	opacity: 0;
	transform: translate(0px, 50px);
	transition: 1s; 
}

#WelcomeSection .ws-animation.active {
	opacity: 1;
	transform: translate(0px, 0px);
}








/******************** SERVICES SECTION *********************/     
/* layout */       
#ServicesSection .layout {
    position: absolute;
    top: 0px;
    left: 0px;
}

/* image */
#ServicesSection #ServicesSectionImage {
    z-index: 1;
    background-image: url("../../Assets/Video/bg_2.gif");  
}

/* overlay */
#ServicesSection #ServicesSectionOverlay { 
	z-index: 2;   
	background-color: rgba(10, 16, 38, 0.925);   
}  

/* col */
#ServicesSection #ServicesSectionOverlay .col {
    display: inline-block;
    width: 33.333%; 
    height: 100%; 
    position: relative;
    float: left;
    overflow: hidden; 
    cursor: pointer;
    transition: 1s; 
}

#ServicesSection #ServicesSectionOverlay .col.a {
    border-right: 1px solid #232942;
}

#ServicesSection #ServicesSectionOverlay .col.c {
    border-left: 1px solid #232942; 
}

/* col - cont */
#ServicesSection #ServicesSectionOverlay .col .cont {
     position: absolute;
     top: calc(50% - 50px); 
     z-index: 2;
}

#ServicesSection #ServicesSectionOverlay .col.a .cont {
     left: 30px;
     padding-left: 30px;
     text-align: left;
}

#ServicesSection #ServicesSectionOverlay .col.b .cont {
     width: 100%;
     left: 0px;
     text-align: center; 
}

#ServicesSection #ServicesSectionOverlay .col.c .cont {
     right: 30px;
     padding-right: 30px;
     text-align: right;
}

/* col - cont - h2 */
#ServicesSection #ServicesSectionOverlay .col h2 {
	width: 100%;
	position: absolute;
	bottom: -58px;
	z-index: -1;
	opacity: 0.4;  
	font-size: 150px;
	font-weight: 100;
	color: #232942;  
}

#ServicesSection #ServicesSectionOverlay .col.a .cont h2 {
	left: -7px;
}

#ServicesSection #ServicesSectionOverlay .col.c .cont h2 {
	right: -7px;
}

/* col - cont - h1 */
#ServicesSection #ServicesSectionOverlay .col h1 {
	 word-spacing: 5px;
     line-height: 1.3;
     font-size: 22.5px;
     font-weight: 900;
     color: white;  
}

#ServicesSection #ServicesSectionOverlay .col h1 span {
	color: #CB3CFF; 
}

/* hoverdiv */
#ServicesSection #ServicesSectionOverlay .col .hoverdiv {
     width: 100%;
     height: 100%;
     position: absolute;
     left: -100%;
     z-index: 1;
     background-color: #0E1737;
     transition: 350ms;
}

/* hover */
#ServicesSection #ServicesSectionOverlay .col:hover {
    background-color: #0E1737;
}

#ServicesSection #ServicesSectionOverlay .col:hover .hoverdiv {
    left: 100%;
}

/*
#ServicesSection #ServicesSectionOverlay .col:hover h1 {
    color: #CB3CFF !important;  
}
*/  

/* animation */
#ServicesSection .ss-animation {
	opacity: 0;
	transform: translate(0px, 25px);
	transition: 1s;
}

#ServicesSection .ss-animation.active {
	opacity: 1;
	transform: translate(0px, 0px);
}








/******************** CASE STUDIES SECTION *********************/                   
#CaseStudiesSection {                              
    background-color: #0A1026;
}

/* col */
#CaseStudiesSection .col {   
     display: inline-block;
     width: 50%;
     height: 100%;
     position: relative;
     float: left;  
}

/* col - header */
#CaseStudiesSection .col.header {
    background-image: url("../../Assets/Images/case_studies.png"); 
    background-size: contain !important;
}

/* col - header - h1 */
#CaseStudiesSection .col.header h1 {
	width: 700px;
	height: 40px;
	position: absolute;
	top: calc(50% - 25px);
	left: calc(50% - 350px);
	text-align: center;
	word-spacing: 10px;
	line-height: 1;
	font-size: 40px;
	font-weight: 900;
	color: rgba(110, 117, 149, 0.25);
	transform: rotate(90deg); 
}
   
/* col - cont - outer */
#CaseStudiesSection .col.cont .continner {
    width: 500px;
    height: auto;
    position: absolute;
    left: calc(50% - 250px);    
    transition: 750ms;   
}

/* col - cont - slide */
#CaseStudiesSection .col.cont .continner .continnerslide {
	width: 100%;
	height: auto;
	position: absolute;
	top: 0px;
	left: 0px;
	opacity: 0;
	pointer-events: none;
    text-align: left;  
    transition: 750ms;
	transform: translate(0px, -25px); 
}

#CaseStudiesSection .col.cont .continner .continnerslide.slideactive {
	opacity: 1; 
	pointer-events: auto;
	transform: translate(0px, 0px);
}

/* col - cont - slide - subheader */
#CaseStudiesSection .col.cont .continner h2 {
	font-size: 8px;
	font-weight: 300;
	color: #CB3CFF;
}

#CaseStudiesSection .col.cont .continner h2 span {
	padding-left: 10px;
	font-weight: bold;
}

/* col - cont - slide - header */
#CaseStudiesSection .col.cont .continner h1 {
	margin-top: 25px;
    word-spacing: 10px;  
	line-height: 1; 
    font-size: 40px;
    font-weight: 900;
    color: white;
}

/* col - cont - slide - divider */
#CaseStudiesSection .col.cont .continner .contdivider {
	width: 100%;
	height: 1px;
	margin-top: 30px;
	background-color: #232942;
}

/* col - cont - slide - p */
#CaseStudiesSection .col.cont .continner p {
	margin-top: 30px;
	line-height: 1.5;
	font-size: 15px;
	font-weight: 300;
	color: #6E7595; 
}

/* col - cont - controls */
#CaseStudiesSection #CaseStudiesControls {
	width: 100%;
	height: 40px;
	position: absolute;
	bottom: 0px;
	left: 0px;
}

/* col - cont - controls - read more btn */
#CaseStudiesSection #CaseStudiesControls h3 {
	display: inline-block;
	width: auto;
	height: 40px;
	margin-right: 50px;
	padding: 11px 30px 0px;
	vertical-align: top;
	cursor: pointer;
	background: linear-gradient(to bottom right, #CB3CFF 20%, #7F25FB 68%);
	word-spacing: 5px; 
	font-size: 15px;
	font-weight: 900;
	border-radius: 20px;
	color: #0A1026;  
}

#CaseStudiesSection #CaseStudiesControls h3:hover {
	opacity: 0.3;
}

/* col - cont - controls - dots */
#CaseStudiesSection #CaseStudiesControls .case-study-dot {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 10px;
	position: relative;
	top: 10px;
	vertical-align: top; 
	cursor: pointer;
	border: 1px solid #6E7595;
	border-radius: 100%;  
}

#CaseStudiesSection #CaseStudiesControls .case-study-dot.dotactive,
#CaseStudiesSection #CaseStudiesControls .case-study-dot:not(.dotactive):hover {
	background-color: white;
	border: 1px solid white;
}
 
/* animations - fade */
#CaseStudiesSection .cs-animation.fade {
	opacity: 0;
	transition: 3500ms;
}

#CaseStudiesSection .cs-animation.fade.active {
	opacity: 1;
}

/* animations - translate */
#CaseStudiesSection .cs-animation.translate {
	opacity: 0;
	transform: translate(0px, 25px);
	transition: 750ms;
}

#CaseStudiesSection .cs-animation.translate.active {
	opacity: 1;
	transform: translate(0px, 0px);
}
 







/******************** TEAM SECTION ********************/
#TeamSection {  
	background-color: #0A1026; 
}

/* brain */
#TeamSection #TeamBrainWrapper {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
	opacity: 0.05;
	background-color: black; 
}

#TeamSection #TeamBrainWrapper #TeamBrain { 
    width: 400px;
	height: 400px;
	position: absolute;
	top: calc(50% - 200px);
	left: calc(50% - 200px);
}

/* particles */
#TeamSection #TeamParticles {
	position: absolute;
	top: 0px;
	left: 0px; 
	z-index: 2; 
}

/* column */
#TeamSection #TeamColumn {
	width: 33.3333%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 33.3333%;    
	z-index: 3;
	border-right: 1px solid #232942;
	border-left: 1px solid #232942; 
}

/* content */
#TeamSection #TeamContent {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 4; 
}

/* content - h1 */
#TeamSection #TeamContent h1 {
	width: 100%; 
	position: absolute;
	top: calc(50% - 12px);
	left: 0px;
	opacity: 0;
	text-align: center;
	word-spacing: 10px;
	font-size: 20px;
	font-weight: 900;
	color: #CB3CFF;
	transform: rotate(90deg);
	transition: 1s;
}

#TeamSection #TeamContent h1 strong {
	color: white;
}

#TeamSection #TeamContent h1 span {
	position: relative;
	bottom: 1.5px;
	font-weight: 300;
}

#TeamSection #TeamContent h1.active {
	opacity: 1;
}

/* controls */  
#TeamSection .team-control {
	width: auto;
	height: 50px; 
	position: absolute; 
	top: calc(50% - 25px);
	z-index: 5;
    cursor: pointer;	
    transition: 1s;
}

#TeamSection .team-control.left {
	left: calc(16.66665% - 30px);
	transform: rotate(90deg);
}

#TeamSection .team-control.right {
	right: calc(16.66665% - 30px);
	transform: rotate(-90deg);
}

#TeamSection .team-control:hover {
	opacity: 0.2 !important;
}

/* animations */
#TeamSection .ts-animation {
	opacity: 0;
	transition: 3s;
}

#TeamSection .ts-animation.active {
	opacity: 1;
}






 

/******************** FOOTER SECTION ********************/                     
#FooterSection {                            
	background-color: #0A1026;
}

/* col */
#FooterSection .col {  
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0px; 
	z-index: 1;
}      

/* map */
#FooterSection .col.one {
	left: 0px; 
}

/* map - overlay */
#FooterSection #ContactSection .overlay {   
	position: absolute;
	z-index: 2;
	pointer-events: none;
}

#FooterSection #ContactSection .overlay.one {
	width: 100%;
	height: 50%;    
}

#FooterSection #ContactSection .overlay.two {
	width: 50%;
	height: 100%;
	top: 0px;
}

#FooterSection #ContactSection #OverlayUpper {
	top: 0px;
	background: linear-gradient(to bottom, rgb(10, 16, 38), transparent);
}

#FooterSection #ContactSection #OverlayLower {
	bottom: 0px;
	background: linear-gradient(to top, rgb(10, 16, 38), transparent);
}

#FooterSection #ContactSection #OverlayRight  {
	right: 0px;
	background: linear-gradient(to left, rgb(10, 16, 38), transparent);
}

#FooterSection #ContactSection #OverlayLeft {
	left: 0px;
	background: linear-gradient(to right, rgb(10, 16, 38), transparent); 
}

/* info */
#FooterSection .col.two {
	right: 0px;  
	z-index: 3;
	background-color: #0A1026; 
}

/* info - inner */
#FooterSection #InfoInner {
	width: 300px;
	height: auto;
	position: absolute;  
	top: calc(50% - 200px);     
	left: calc(50% - 150px);
	text-align: center;  
}

/* info - inner - btn */
#FooterSection #InfoInner h1 {
    width: 90px;
    height: 100px;
    position: relative;
    cursor: pointer; 
	background: linear-gradient(to bottom right, #CB3CFF 20%, #7F25FB 68%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); 
    transition: 1s;    
}

#FooterSection #InfoInner h1 span.text {
	width: 100%;
	position: absolute;
	top: calc(50% - 5px);
	left: 0px;
	z-index: 2; 
	text-align: center;
	font-size: 10px;
	font-weight: 900;
	color: white;
	transform: rotate(60deg);
}

#FooterSection #InfoInner h1 span.polygon {
	width: 90px;
	height: 100px;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
	background-color: #0A1026;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); 
	transform: scale(0.95); 
}

#FooterSection #InfoInner h1:hover {
	opacity: 0.3;
}

/* info - inner - contact info */
#FooterSection #InfoInner h2 {
	width: 100%;  
	text-align: center; 
	line-height: 1;  
	font-size: 10px; 
	color: #6E7595;
}

#FooterSection #InfoInner h2.one {
	margin-top: 75px;
	word-spacing: 3px;  
	font-weight: 400;
}

#FooterSection #InfoInner h2.two {
	font-weight: 900;
}

#FooterSection #InfoInner h2.two span {
	padding: 0px 10px;
	position: relative;
	bottom: 2px;
	font-weight: 400; 
} 

/* info - inner - divider */
#FooterSection #InfoInner #Divider {
	width: 300px;      
	height: 1px;
	margin: 15px auto 15px;
	background-color: #232942;
}

/* info - inner - socials */
#FooterSection #InfoInner #Socials {
	width: 100%;
	height: 50px;
	margin-top: 75px;
}

#FooterSection #InfoInner #Socials a {
	display: inline-block;
	width: 50px;
	height: 50px; 
	margin: 0px 15px;
	border: 1px solid #232942;
	border-radius: 100%;
	transition: 1s; 
} 

#FooterSection #InfoInner #Socials a:hover { 
    opacity: 0.2; 
}

#FooterSection #InfoInner #Socials a img {
	width: 100%;
	height: 100%; 
	padding: 15px;
}

/* animations - fade */
.fs-animation.fade {
	opacity: 0;
	transition: 3500ms;
}

.fs-animation.fade.active {
	opacity: 1;
}

/* animations - translate */
.fs-animation.translate {
	opacity: 0;
	transform: translate(0px, 50px);
	transition: 1s;
}

.fs-animation.translate.active {
	opacity: 1;
	transform: translate(0px, 0px);
}








/***********************************************************/
/******************** START MOBILE CODE ********************/                     
/***********************************************************/




 

 

/******************** NAVIGATION ********************/      

/********* 750px *********/
@media (max-width: 750px) { 

/****** HAM ******/
#Hamburger {  
   width: 36px;
   height: 40px;  
   padding-top: 13.5px;  
   top: 15px;
   left: 15px;  
}

/* ham active */
#Hamburger.active {  
   left: 107px; 
}

/* bar */
#Hamburger .bar { 
   width: 15px;	
   height: 3px;    
}

/* close */
#Hamburger #Close {
	top: 11px;
	font-size: 15px;
}  


/****** NAV ******/  
/* social */
#Navigation #Social {
	height: 40px;
	top: 15px;
}

/* social - img */
#Navigation #Social img {
	width: 36px;
	height: 40px;  
	padding: 10.5px;    
}  

/* links */ 
#NavigationInner { 
	height: calc(100% - 130px);
	top: 70px;
}
}






 
 
/******************** SECTION NAVIGATION *********************/            
                                                            
/********* 750px *********/
@media (max-width: 750px) {  
 
/****** NAV LOGO ******/ 
#NavLogo {
    height: 40px;
    top: 15px;
    right: 15px;
}


/****** DOT ******/   
#DotNavigation {   
	width: 90px;   
    height: 10px;
	bottom: 25px;     
	left: 15px;    
}

/* dot */
#DotNavigation .container {
	width: 10px;
	height: 10px;
	margin-left: 10px; 
}
 
/* inner */ 
#DotNavigation .container .inner {
    width: 4px;
    height: 4px;
	margin-top: 2px;
	transform: scale(2.1);
}  


/****** SCROLL GIF ******/ 
/* scroll gif */
#ScrollGif {
    width: 50px;
    bottom: 12px;
    left: calc(50% - 25px);
}


/****** SECTION HEADER ******/  
#SecHeader {
    width: 90px;         
    height: 30px;
    padding-top: 16px;
    bottom: 25px;
    right: 15px;
    font-size: 7px;
}
}   







 
/******************** INFO MODAL *********************/     

/********* 750px *********/
@media (max-width: 750px) {   
/* inner */
#InfoModal #InfoModalInner {
	width: 330px;
	right: -330px;
}

/* close */
#InfoModal #InfoModalClose {
	width: 40px;
	height: 50px;
	padding-top: 12px;
	right: 20px;
	font-size: 20px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
}

/* header */
#InfoModal #InfoModalHeader {
	padding: 40px;
	padding-right: 80px;
}

/* header - h2 */
#InfoModal #InfoModalHeader h2 {
	font-size: 6px;
}

/* header - h1 */
#InfoModal #InfoModalHeader h1 {
    font-size: 25px;
    word-spacing: 0px;  
}   

/* content - inner */
#InfoModal #InfoModalContentInner {
	padding: 5px 40px 300px; 
}

/* content - inner - h2 */
#InfoModal #InfoModalContentInner h2 {
	margin-top: 40px;
	font-size: 6px;
}

/* content - inner - p */
#InfoModal #InfoModalContentInner p {
	margin-top: 15px;
	font-size: 13px;
}
}

  






/******************** WELCOME SECTION *********************/   
              
/********* 750px *********/
@media (max-width: 750px) {                                                               
/* content */
#WelcomeSection #WelcomeContent {
	width: 330px;
	top: calc(50% - 130px);
	left: calc(50% - 165px);
}

/* content - h2 */
#WelcomeSection #WelcomeContent h2 {
	font-size: 7px;
}

/* content - h1 */
#WelcomeSection #WelcomeContent h1 {
	margin-top: 30px;
    font-size: 40px;
}

/* content - divider */
#WelcomeSection #WelcomeContent #WelcomeContentDivider {
	margin: 34px 0px 34px;
}

/* content - p */
#WelcomeSection #WelcomeContent p {
	word-spacing: 1px; 
	font-size: 16px;
}
}








/******************** SERVICES SECTION *********************/                 
   
/********* 1350px *********/ 
@media (max-width: 1350px) {   
/* col - cont */ 
#ServicesSection #ServicesSectionOverlay .col .cont {
	 width: 400px !important; 
     left: calc(50% - 202px) !important;
     text-align: center !important;
     transform: rotate(90deg);
}

#ServicesSection #ServicesSectionOverlay .col.a .cont {
     padding-left: 0px;
}

#ServicesSection #ServicesSectionOverlay .col.c .cont { 
     padding-right: 0px;
	 right: auto; 
}

/* col - cont - h2 */
#ServicesSection #ServicesSectionOverlay .col.a .cont h2 {
	left: 0px;
}

#ServicesSection #ServicesSectionOverlay .col.c .cont h2 {
	right: 0px;
}

/* animation */
#ServicesSection .ss-animation {
	transform: translate(25px, 0px);  
}
}   

/********* 750px *********/ 
@media (max-width: 750px) {   
/* col - cont */ 
#ServicesSection #ServicesSectionOverlay .col .cont {
     top: calc(50% - 30px); 
     left: calc(50% - 199px) !important;
}

/* col - cont - h2 */
#ServicesSection #ServicesSectionOverlay .col h2 {
	bottom: -42.5px; 
	font-size: 100px;
}

/* col - cont - h1 */
#ServicesSection #ServicesSectionOverlay .col h1 {
	 word-spacing: 3px;
     font-size: 14px;
} 
}








/******************** CASE STUDIES SECTION *********************/       
   
/********* 1200px *********/ 
@media (max-width: 1200px) {         
/* col - cont - outer */
#CaseStudiesSection .col.cont .continner {  
    width: 400px;  
    left: calc(50% - 200px);   
} 
}

/********* 1000px *********/ 
@media (max-width: 1000px) {           
/* col - cont - outer */
#CaseStudiesSection .col.cont .continner {  
    width: 330px;   
    left: calc(50% - 165px);    
}

/* col - cont - slide - subheader */
#CaseStudiesSection .col.cont .continner h2 {
	font-size: 7px;   
}

/* col - cont - slide - header */
#CaseStudiesSection .col.cont .continner h1 {
    font-size: 35px;   
}

/* col - cont - slide - p */
#CaseStudiesSection .col.cont .continner p {
	font-size: 14px;   
}

/* col - cont - controls - read more btn */
#CaseStudiesSection #CaseStudiesControls h3 {
	margin-right: 30px;   
	padding: 11.5px 30px 0px;   
	font-size: 14px;   
}

/* col - cont - controls - dots */
#CaseStudiesSection #CaseStudiesControls .case-study-dot {
	margin-right: 8px;    
}
}

/********* 750px *********/ 
@media (max-width: 750px) {         
/* col */
#CaseStudiesSection .col {   
     display: block;   
     width: 100%;   
     position: absolute;   
     top: 0px;   
     left: 0px;   
     float: none;   
}

/* col - header */
#CaseStudiesSection .col.header {
	z-index: 1;   
}

/* col - header - h1 */
#CaseStudiesSection .col.header h1 {
	display: none;   
}

/* col - cont */
#CaseStudiesSection .col.cont {
	z-index: 2;   
}   

/* col - cont - slide - subheader */
#CaseStudiesSection .col.cont .continner h2 {
	font-size: 6px;   
}

/* col - cont - slide - header */
#CaseStudiesSection .col.cont .continner h1 {
	margin-top: 20px;   
    font-size: 30px;   
}

/* col - cont - slide - divider */
#CaseStudiesSection .col.cont .continner .contdivider {
	margin-top: 22.5px;   
}

/* col - cont - slide - p */
#CaseStudiesSection .col.cont .continner p {
	margin-top: 22.5px;   
	line-height: 1.4;   
	font-size: 13px;   
}

/* col - cont - controls */
#CaseStudiesSection #CaseStudiesControls {
	height: 30px;   
}

/* col - cont - controls - read more btn */
#CaseStudiesSection #CaseStudiesControls h3 {
	height: 30px;   
	margin-right: 25px;   
	padding: 7.5px 25px 0px;   
	font-size: 13px;   
	border-radius: 15px;      
}

/* col - cont - controls - dots */
#CaseStudiesSection #CaseStudiesControls .case-study-dot {
	width: 15px;   
	height: 15px;   
	top: 7.5px;   
}
}








/******************** TEAM SECTION ********************/ 
 
/********* 750px *********/
@media (max-width: 750px) {  
/* brain */
#TeamSection #TeamBrainWrapper #TeamBrain { 
    width: 300px;
	height: 300px;
	top: calc(50% - 150px);
	left: calc(50% - 150px);
} 

/* content - h1 */
#TeamSection #TeamContent h1 {
	width: calc(100% + 100px);       
	left: -50px;
	font-size: 15px;
}

#TeamSection #TeamContent h1 span {
	bottom: 1px;
}

/* controls */  
#TeamSection .team-control {
	height: 40px; 
	top: calc(50% - 20px);
}

#TeamSection .team-control.left {
	left: calc(16.66665% - 20px);
}

#TeamSection .team-control.right {
	right: calc(16.66665% - 20px);
}
}
 







/******************** FOOTER SECTION ********************/      
         
/********* 750px *********/ 
@media (max-width: 750px) {  
/* col */
#FooterSection .col {
	width: 100%;
}      

/* map */
#FooterSection .col.one {
	height: calc(35% + 25px);
}

/* info */
#FooterSection .col.two {
	top: auto; 
	bottom: 0px;
	height: 65%;
}

/* info - inner */
#FooterSection #InfoInner {
	top: calc(50% - 160px);     
}

/* info - inner - btn */
#FooterSection #InfoInner h1 {
    width: 70px;
    height: 80px;
}

#FooterSection #InfoInner h1 span.text { 
	font-size: 8px;
}

#FooterSection #InfoInner h1 span.polygon {
	width: 70px;
	height: 80px;
}

/* info - inner - contact info */ 
#FooterSection #InfoInner h2.one {
	margin-top: 52.5px;  
}

/* info - inner - divider */
#FooterSection #InfoInner #Divider {
	margin: 10px auto 10px;
}

/* info - inner - socials */
#FooterSection #InfoInner #Socials {
	height: 40px;
	margin-top: 50px;
}

#FooterSection #InfoInner #Socials a {
	width: 40px;
	height: 40px; 
	margin: 0px 12.5px;
} 

#FooterSection #InfoInner #Socials a img {
	padding: 12.5px;
}
}








/********************************************************************************/   
/******************** ANIMATIONS ********************/   
/********************************************************************************/  








/********************* PRELOAD *********************/    
/* outer */                     
@-webkit-keyframes preloadpulsate {      
    0% {  
	    -webkit-transform: scale(0.8);
		opacity: 1;
	}
	50% {
		-webkit-transform: scale(1);
		opacity: 0.1;
	}
	100% {
	    -webkit-transform: scale(0.8);
		opacity: 1;	
	}
}
 
@keyframes preloadpulsate {
    0% { 
	    transform: scale(0.8);
		opacity: 1;
	}
	50% {
		transform: scale(1);
		opacity: 0.1; 
	}
	100% {
	    transform: scale(0.8);
		opacity: 1;
	}
}

/* clockwise */
@-webkit-keyframes spinclockwise {      
    to { 
	    -webkit-transform: rotate(360deg);
	}
}

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

/* counter clockwise */
@-webkit-keyframes spincounterclockwise {      
    to { 
	    -webkit-transform: rotate(-360deg);
	}
}

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







/********************* CURSOR *********************/
@keyframes cursorblink {
  from, to { 
     color: transparent; 
  }
  50% { 
     color: #CB3CFF;
  }
}

@-webkit-keyframes cursorblink {
  from, to { 
     color: transparent; 
  }
  50% { 
     color: #CB3CFF; 
  }
}