/******************** GENERAL ********************/                                         
body, html {                                                                                                                                                                                                                                                                                                                                                                                                                                                
	overflow-x: hidden;
	background-color: white;
}

* {
	margin: 0px auto;
	padding: 0px;
	box-sizing: border-box;
}

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

.curlyworld {
	font-family: 'Crimson Text', serif;
}

.fira {
	font-family: 'Fira Sans Condensed', sans-serif;
}

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

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

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

/* opacityShow */
.parallax-element.opacityShow {
	opacity: 0;
}

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

/* input */
input {
	font-family: 'Fira Sans Condensed', sans-serif;
	font-size: 16px;
    -webkit-appearance: none;
	background-color: transparent;
    border-radius: 0;
	border: none;
	outline: none;
}

button {
	background-color: transparent;
	border: none;
	outline: none;
}

/* placeholder */
::-webkit-input-placeholder {
   position: relative;
   top: 1px;
   font-weight: 300;
   font-size: 16px;
   font-style: italic;
   color: white;
}

::-moz-placeholder {
   position: relative;
   top: 1px;
   font-weight: 300;
   font-size: 16px;
   font-style: italic;
   color: white;
}

:-ms-input-placeholder {
   position: relative;
   top: 1px;
   font-weight: 300;
   font-size: 16px;
   font-style: italic;
   color: white;
}

:-moz-placeholder {
   position: relative;
   top: 1px;
   font-weight: 300;
   font-size: 16px;
   font-style: italic;
   color: white;
}








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

/* loader */
#Preloader img {
	display: block;
	height: 150px;
	position: relative;
	top: 50%;
	margin-top: -75px;
    animation: preload 1.5s linear infinite;
    -webkit-animation: preload 1.5s linear infinite;
}







 
/******************** NAVIGATE ANIMATION ********************/
.navigateanimation {
	display: none;
	position: fixed;
	z-index: 999999999;
	background-color: white;
}

/* overlay */
.navigateanimation.overlay {
	width: 100%;
	height: 100vh;
	top: 0px;
	bottom: 0px;
	right: 0px;
	left: 0px;
    opacity: 0;
	background-color: black;
}

/* position and dimension */
.navigateanimation.top,
.navigateanimation.bottom {
	width: 100%;
	height: 0px;
}

.navigateanimation.left,
.navigateanimation.right {
	width: 0px;
	height: 100vh;
}

.navigateanimation.top {
	top: 0px;
}

.navigateanimation.bottom {
	bottom: 0px;
}

.navigateanimation.left {
	left: 0px;
}

.navigateanimation.right {
	right: 0px;
}







 
/******************** WELCOME SECTION *********************/    
#WelcomeSection { 
	width: 100%;
	height: 400px;
	margin-top: 100px;  
	position: relative;
    background: linear-gradient(to top left, rgb(245,245,245), #ab182d);
    background-size: 400% 400%;
    -webkit-animation: gradient 7s ease infinite;
    -moz-animation: gradient 7s ease infinite;
    animation: gradient 7s ease infinite;
}

/* h1 */
#WelcomeSection h1 {
	width: 100%;
	position: absolute; 
	top: calc(50% - 55px); 
	z-index: 99;
	text-align: center;
	font-size: 50px;
	color: #ab182d;   
}

#WelcomeSection h1 span {
	color: white;
}
 
#WelcomeSection h1 span.subheader {    
    position: relative;
    bottom: 30px;
    font-size: 17px; 
    font-weight: bold;
    word-spacing: 3px; 
}

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

/* particles */
#WelcomeParticles {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 9;
	opacity: 0.15;
} 







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

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







/******************** INFO SECTION ********************/       
#InfoSection {
    width: 100%; 
    height: auto;  
}

/* cols */
#InfoSection #WelcomePars {
    width: 100%;     
    height: auto;   
    text-align: left;    
}

/* row */
#InfoSection #WelcomePars .row { 
    width: 100%;  
    height: 700px;    
    margin-top: 100px;   
}

#InfoSection #WelcomePars .row.one {
    height: 1000px;
}

/* col */
#InfoSection #WelcomePars .row .col {
    display: inline-block;    
    height: 100%; 
    position: relative; 
    float: left;   
}
  
/* img */  
#InfoSection #WelcomePars .row .col.img {
    overflow: hidden;
    width: 30%; 
}

#InfoSection #WelcomePars .row .col.img .image {
    width: 100%;
    height: calc(100% + 50px);
    position: absolute;
    top: 0px; 
    left: 0px;
}
   
#InfoSection #WelcomePars .row.one .col.img .image {
    background-image: url("../../Assets/Images/Curly101/1.jpg");
}

#InfoSection #WelcomePars .row.two .col.img .image {
    background-image: url("../../Assets/Images/Curly101/2.jpg");
}

/* cont */
#InfoSection #WelcomePars .row .col.cont {
    width: 70%;  
}
 
#InfoSection #WelcomePars .row.one .col.cont { 
    background-color: rgb(245,245,245);
    border-left: 40px solid white;  
}

#InfoSection #WelcomePars .row.two .col.cont {
    border-right: 40px solid white;
}

/* cont inner */
#InfoSection #WelcomePars .row .col.cont .continner { 
    width: 600px;
    position: absolute;
    left: calc(50% - 300px); 
}

#InfoSection #WelcomePars .row.one .col.cont .continner  { 
    top: calc(50% - 405px);
}

#InfoSection #WelcomePars .row.two .col.cont .continner  {
    top: calc(50% - 285px);  
} 

/* h1 */
#InfoSection #WelcomePars .row .col.cont h1 {
    margin-bottom: 50px; 
    padding-right: 70px;
    line-height: 1;
    font-size: 25px; 
    font-weight: bold;
    color: #AB182D; 
} 

#InfoSection #WelcomePars .row .col.cont h1.two {
    margin-top: 50px; 
}

/* p */
#InfoSection #WelcomePars .row .col.cont p {
    font-size: 17px; 
    font-weight: 300;  
    color: black;
} 

#InfoSection #WelcomePars p:not(.first) {
    margin-top: 15px; 
}   

/* a */
#InfoSection #WelcomePars .row .col.cont p a {
    font-weight: bold; 
    color: #AB182D;
    transition: 1s;
}

#InfoSection #WelcomePars .row .col.cont p a:hover {
    color: #AB182D;
} 
 

 

 
  
  
             
/******************** MF SECTION ********************/
#MFSection {
	width: 100%;
	height: 600px;
	overflow-y: hidden;    
}

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

/* map */
#MapSection #Map {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
}

/* overlay */
#MapSection .overlay {
	position: absolute;
	z-index: 9;
}

#MapSection .overlay.one {
	width: 100%;
	height: 300px;
}

#MapSection .overlay.two {
	width: 50%;
	height: 100%;
}

#MapSection #OverlayUpper {
	top: 0px;
	background: linear-gradient(to bottom, white, rgba(255,255,255,0));
}

#MapSection #OverlayLower {
	bottom: 0px;
	background: linear-gradient(to top, white, rgba(255,255,255,0));
}

#MapSection #OverlayRight  {
	right: 0px;
	background: linear-gradient(to left, white, rgba(255,255,255,0));
}

#MapSection #OverlayLeft {
	left: 0px;
	background: linear-gradient(to right, white, rgba(255,255,255,0));
}

/* footer inner */
#FooterSection #FooterInner {
	height: 84px;
	position: relative;
	top: calc(50% - 42px);
}

/* social media */
#FooterSection #SocialMedia {
	width: 100%;
	height: 50px;
	text-align: center;
}

/* box */
#FooterSection #SocialMedia .box {
	display: inline-block;
	width: 50px;
	height: 50px;
	margin: 0px 10px;
	background-color: rgb(240,240,240);
	border-radius: 100%;
	transition: 500ms;
}

#FooterSection #SocialMedia .box:hover {
	background-color: #AB182D;
	transform: rotate(360deg);
}

/* logo */
#FooterSection #SocialMedia .box img {
	width: 40px;
	height: 40px;
	margin-top: 5px;
}

/* content */
#FooterSection h2 {
	width: 100%;
	margin-top: 10px;
	text-align: center;
	font-weight: 300;
	font-size: 10px;  
	color: black;
}

#FooterSection h2 span {
	padding: 0px 5px;
}