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

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

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

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

/* loadfade */
.loadfade {
	opacity: 0;
	transition: 1000ms;  
} 

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

/* opacityShow */
.parallax-element.opacityShow {
	opacity: 0;
}
 
/* animate parallax */
.parallax-element.animate {
	transition: 3s; 
} 

/* cursor */
.typewritercursor { 
    font-weight: 100; 
	animation: cursorblink 1s step-end infinite;
}
  





  
       
/******************** PRELOADER ********************/  
#PreloadNavigate {   
    position: fixed;
	top: 50%;
	left: 50%;
    z-index: 9999999999;
	background-color: black;
	border-radius: 100%;
}

/* container */
#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: rgb(250,250,250);
	border-bottom-color: rgb(250,250,250); 
    animation: spinclockwise 1s linear infinite; 
}

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

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

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

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







 
/******************** NAVIGATION ********************/   
#Navigation { 
   display: none; 
   width: 350px; 
   height: 350px;
   position: fixed;
   top: calc(50% - 175px);
   left: calc(50% - 175px);    
   z-index: 99999999;
   opacity: 0;    
   border-top: 1px solid white; 
   border-bottom: 1px solid white;  
   transform: rotate(45deg); 
}      

/* inner */ 
#NavigationInner { 
	width: 150px;
	height: 100%;     
	text-align: center;   
	transform: rotate(-45deg); 
} 

/* links */
#NavigationInner .links {
	width: 100%;
	position: absolute;
	cursor: pointer;  
}
 
#NavigationInner .links.one {
	top: 40px;
}

#NavigationInner .links.two {
	bottom: 40px;
}
 
/* links p */ 
#NavigationInner .links p { 
    margin-top: 5px;
	font-variant: small-caps;
    font-weight: bold;
    font-size: 18px;
	line-height: 1; 
    color: black; 
}

#NavigationInner .links p:nth-child(1) {
    margin-top: 0px; 
}  

/* social */
#Navigation #Social {
	width: 100%;
	height: 40px;
	padding: 0px 80px; 
	position: absolute;
	top: calc(50% - 20px);
    opacity: 0; 
	transform: rotate(-45deg); 
    transition: 500ms; 	
}

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

/* a */ 
#Navigation a {
	display: block;
	width: 40px;
	height: 40px;  
	cursor: pointer;  
	background-color: white; 
	transform: rotate(45deg); 
} 

/* IG */
#Navigation #IG {
	float: left;
} 
 
/* FB */
#Navigation #FB {
	float: right;
}
 
/* img */ 
#Navigation a img { 
	width: 100%;
	height: 100%;
	transform: rotate(-45deg);
}  
 
/* overlay */
#NavigationOverlay {
	display: none;
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 999999;
    opacity: 0;	  
	background: rgb(225,225,225);
}
       





 
          
/******************** PRIMARY CONTROLS ********************/ 
  

/****** HAM ******/
#Hamburger {  
   width: 65px;
   height: 65px;
   padding-top: 22.5px; 
   position: fixed;
   top: 35px;
   left: 35px;  
   z-index: 999999999; 
   cursor: pointer;      
   transform: rotate(45deg);       
}

/* ham active */
#Hamburger.active { 
   top: calc(50% - 32.5px) !important;
   left: calc(50% - 32.5px) !important; 
   transform: rotate(405deg);            
}
 
/* 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: 25px;	
   height: 4px;
   margin-top: 4px;
   border: 1px solid black;      
}

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

/* close */
#Hamburger #Close {
	width: 100%;
	position: absolute;
	top: 16px;
	text-align: center;
	font-weight: 300;
	font-size: 30px;
	color: black;  
}


/****** TYPE ******/ 
#NavTypewriter {   
	position: fixed;
	top: 60px;  
	left: 135px;  
	z-index: 99999;      
	font-size: 13px;
	font-weight: 300;  
	color: black;
}   


/****** DOT ******/ 
#DotNavigation {   
	width: 16px;   
    height: 130px;
	position: fixed;
	bottom: 25px;     
	left: 59px;
	z-index: 99999;  
}

/* dot */
#DotNavigation .container {
	display: block;
	width: 16px;
	height: 16px;
	margin-top: 20px; 
	cursor: pointer;
	border: 1px solid rgb(225,225,225);
	border-radius: 100%;
	transition: 300ms; 
} 
	
#DotNavigation .container:nth-child(1) {
	margin-top: 0px;
} 
 
/* inner */ 
#DotNavigation .container .inner {
	width: 6px;
	height: 6px;
	margin-top: 4px;
	background-color: rgb(225,225,225);   
	border-radius: 100%; 
	transform: scale(2.5);
	transition: 500ms;    
}  
 
/* active */ 
#DotNavigation .container.active {  
	border: 1px solid black; 
	border-radius: 0%;   
	transform: rotate(45deg);  
}
 
#DotNavigation .container.active .inner {
	background-color: black;   
	border-radius: 0%;  
	transform: scale(1);  
}

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






  
                      
/******************** VERTICAL DIVIDER ********************/   
.vertical-divider { 
	width: 100%; 
	height: 200px; 
	padding-top: 25px;    
}

.vertical-divider .divider {
	width: 2px;
	height: 75px;  
	background-color: rgb(225,225,225); 
}








/********************************************************************************/   
/******************** MOBILE ********************/   
/********************************************************************************/  

 






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

/********* 900px *********/
@media (max-width: 900px) { 
#Navigation {    
   width: 250px; 
   height: 250px; 
   top: calc(50% - 125px);
   left: calc(50% - 125px); 
}       

/* links */
#NavigationInner .links.one {
	top: 15px;
}

#NavigationInner .links.two {
	bottom: 15px;
}
 
/* links p */ 
#NavigationInner .links p { 
    margin-top: 3px;
    font-size: 14px; 
} 
 
/* social */
#Navigation #Social { 
	height: 30px;
	padding: 0px 50px;
	top: calc(50% - 15px);  
}

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

/* a */ 
#Navigation a { 
	width: 30px;
	height: 30px;   
}   
}







 
/******************** PRIMARY CONTROLS ********************/     
                                                            
/********* 900px *********/
@media (max-width: 900px) {  

/****** HAM ******/
#Hamburger {  
   top: 35px;
   left: 5px;  
}


/****** TYPE ******/ 
#NavTypewriter {   
    display: none;
}


/****** DOT ******/
#DotNavigation {   
	width: 10px;  
    height: 80px; 
    left: 34px;
    bottom: 20px;  
}

/* dot */
#DotNavigation .container {
	width: 10px;
	height: 10px;
	margin-top: 12px; 
} 

/* inner */ 
#DotNavigation .container .inner {
	width: 4px;
	height: 4px;
	margin-top: 2px;  
} 
}  
   






               
/******************** VERTICAL DIVIDER ********************/     
 
/********* 900px *********/
@media (max-width: 900px) { 
.vertical-divider {  
	height: 150px; 
	padding-top: 30px;   
}

.vertical-divider .divider { 
	height: 45px;  
}   
}