@font-face
{
	font-family: "kiona";
	src: url("fonts/Kiona-Regular.ttf");
}
@font-face
{
	font-family: "kionaItalic";
	src: url("fonts/Kiona-Itallic.ttf");
}
@font-face
{
	font-family: "cormorantSC";
	src: url("fonts/CormorantSC-Regular.otf");
}
@font-face
{
	font-family: "cormorantSCBold";
	src: url("fonts/CormorantSC-Bold.otf");
}
@font-face
{
	font-family: "cormorantSCLight";
	src: url("fonts/CormorantSC-Light.otf");
}
@font-face
{
	font-family: "cormorantSCMedium";
	src: url("fonts/CormorantSC-Medium.otf");
}
@font-face
{
	font-family: "raleway";
	src: url("fonts/Raleway-Regular.ttf");
}
@font-face
{
	font-family: "ikaros";
	src: url("fonts/Ikaros.ttf");
}
@font-face
{
	font-family: "ikarosLight";
	src: url("fonts/Ikaros-Light.otf");
}
@font-face
{
	font-family: "ikarosRegular";
	src: url("fonts/Ikaros-Regular.otf");
}


/*-- 
Colors:

White: 		#f0f6f6;
Beige: 		#f9ede1;
Light Pink: #f3d5d7;
Dark Pink: 	#d5bcc0;
Dark blue: 	#7c8290 6b6f7a;
Dark blue: 	#717684;
Light Blue: #a1adbd;
--*/

html
{
	font-size: 62.5%;
}
body 
{
	font-size: 1.8em;
	color: #333;
	
	font-family: raleway;
	font-family: ikarosRegular;
	background-color: #fefefe;
}
html, body
{
	height: 100%;
	width: 100%;
}

/*--- Navigation ---*/
nav 
{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	width: 100%;
	
	background-color: rgba(240, 246, 246, 0.9);
	color: #666666;
	font-size: 1.8rem;
	
	height: 70px;
	line-height: 70px;
	
	text-align: right;
}
nav img
{
	position: absolute;
	top: 50%;
	left: 20px;
	
	transform: translateY(-50%);
	max-width: 220px;
	height: auto;
	padding-left: 12px;
	vertical-align: middle;
}
nav .spacer 
{
	position: relative;
	display: inline-block;
	width: 10%;
}
nav ul
{
	position: relative;
	display: inline-block;
	height: 100%;
	text-align: right;
}
#navigation 
{
	transition: all .6s ease;
}
nav li
{
	position: relative;
	display: inline-block;
	margin-right: 28px;
	
	overflow: hidden;
	cursor: pointer;
	
	font-family: ikarosRegular;
	font-size: 2.0rem;
}
nav li a 
{
	position: relative;
	display: block;
	z-index: 12;
	color: #666666;
	color: #374b66;
	transition: all .5s ease;
	font-family: ikarosRegular;
}
nav li a:hover 
{
	color: #f3d5d7;
}
nav li .underScore
{
	width: 100%;
	height: 100%;
	display: block;
	
	position: absolute; 
	left: -100%;
	top: 0;	
	z-index: 99;
	
	border-bottom: 3px solid #717684;
	transition: all .5s ease;
	z-index: 10;
}
#hamburgerMenu 
{
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	
	width: 40px;
	height: 40px;
	fill: none;
	stroke-width: 3px;
	stroke-linecap: round;
	stroke: #374b66;
	
	cursor: pointer;
	display: none;
}
#hamburgerMenu line
{
	transition: all .5s ease;
	transform-origin: 50% 50%;
}
	/* Classes to transform hamburger */
	.rotateDown 
	{
		transform-origin: top left;
		transform: translate(-10px, 11px) rotate(45deg);
	}
	.rotateUp
	{
		transform-origin: bottom left;
		transform: translate(-10px, -10px) rotate(-45deg);
	}
	.whiteOut
	{
		stroke: none;
	}
	.hideOut 
	{
		display: none;
	}

/*--- Buttons ---*/
.buttonPush
{
	display: block;
	position: relative;
	height: 60px;
	width: 276px;
	margin:30px auto 0; 
	background: radial-gradient(circle at bottom right, #f3d5d7 0%, #717684 100%);
	background-size: 200%;
	background-clip: padding-box;
	transition: all .6s ease;
	cursor: pointer;
	
	font-size: 1.6rem;
}
.buttonPush:hover
{
	background-position: right center;
	transition: all .6s ease;
	letter-spacing: 1px;
}
.buttonPush a
{
	position: absolute; 
	left: 50%;
	top: 50%;
	display: block;
	width: 266px;
	height: 50px;
	line-height: 50px;
	color: #374b66;
	transform: translate(-50%, -50%);
	background-color: #fff;
	font-size: 2.0rem;
	text-align: center;
}

/*--- Greeting Message ---*/
#greetingMessage 
{
	position: relative; 
	display: block;
	text-align: center;
	
	padding-top: 80px;
}
#greetingMessage h2
{
	position: relative; 
	display: block;
	text-align: center;
	margin-bottom: 20px;
	color: #374b66;
}
#greetingMessage img
{
	background-color: #fff;
	z-index: 90;
	position: relative;
	padding-left: 12px; 
	padding-right: 12px;
	max-height: 80px;
}
#greetingMessage hr
{
	width: 100%;
	color: #717684;
	display: block;
	position: absolute; 
	bottom: 40px;
	lefT: 50%;
	width: 60%;
	min-width: 320px;
	margin: auto;
	
	transform: translateX(-50%);
}

/*--- Footers ---*/
footer 
{
	position: relative;
	display: block;
	
	background-color: #717684;
	color: #f0f6f6;
	color: #fff;
	
	height: auto;
	width: 100%;
	
	text-align: center;
}
.footerHolder 
{
	display: flex; 
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
}
#footerForm 
{
	position: relative; 
	display: block;
	width: 500px;
	height: 400px;
	
	margin-right: 40px;
	margin-top: 40px;
}
#footerForm h2
{
	color: #f3d5d7;
	margin-bottom: 20px;
}
.formInputs 
{
	position:relative;
	display: block;
	width: 100%;
	height: auto;
	margin: 20px auto;
}
#footerForm .formInputs input[type=text], input[type=email], input[type=tel], textarea {
    border:1px solid #d5bcc0;
    padding:12px 8px;
    font-size:13px;
    color:#8f8f8f;
    width:100%;
    box-shadow:inset 0 0 8px #e5e8e7;
	
	font-family: raleway;
	outline: none;
	resize: none;
	transition: all .5s ease;
}
#footerForm .formInputs input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, textarea:focus
{
    box-shadow: 0 0 8px #f3d5d7;
}
#footerForm .formInputs input, label 
{
	text-align: left;
	display: block;
}
#footerForm .formInputs label 
{
	position: relative;
	color: #ffffff;
	font-size: 1.4rem;
	
	pointer-events: none;
}

#footerForm input[type=submit] 
{
	position: relative;
    border:none;
    color:#666;
    background: #a1adbd;
    cursor:pointer;
	text-align: center;
	font-family: kiona;
	font-size: 2.4rem;
	transition: all .5s ease;
	
	height: 40px;
	
	margin: 20px auto;
	display: block;
	
    color: #fff;
    width: 200px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	
/* 	background-image: linear-gradient(to right, #a1adbd 0%,  #f9ede1 51%, #a1adbd 100%); */
	
	background: radial-gradient(circle at 100%, #d5bcc0 0%, #a1adbd 100%);
	background-size: 180%;
	background-position: 0 0;
}

#footerForm input[type=submit]:hover {
    letter-spacing: 2px;
	background-size: 100%;
}

#footerContact 
{
	position: relative; 
	display: block;
	
	width: 400px;
	height: 100%;
	background-color: #666666;
	color: #ffffff;
	padding: 12px 30px;
	text-align: center;
	padding-bottom: 40px;
	border-bottom-right-radius: 80px;
}
#footerContact img 
{
	max-width: 360px;
	height: auto;
	margin-bottom: 40px;
}
#footerContact a 
{
	color: #f0f6f6;
}
#footerContact h1 
{
	font-size: 3.24rem;
	font-family: cormorantSCBold;
}
#footerContact h2 
{
	font-size: 2.0rem;
	font-family: kiona;
}
#footerContact h3 
{
	font-size: 3.0rem;
	font-family: kiona;
	color: #f3d5d7;
	margin-top: 40px;
}
#footerContact p 
{
	line-height: 30px;
}
#footerSocial
{
	width: 100%;
	position: relative; 
	display: block;
}
.socialIcon
{
	display: inline-block;
	position: relative; 
	vertical-align: top;
	background-color: #8e8e8e;
	width: 60px;
	height: 60px;
	text-align: center;
	transition: all .5s ease;
	border-radius: 50%;
}
.socialIcon:hover 
{
	background-color: #585858;
}
#footerSocial img 
{
	position: absolute; 
	top: 50%;
	lefT: 50%;
	transform: translate(-50%, -50%);
	width: 36px;
	height: 36px;
}
#mapSection
{
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	width: 100%;
	
	margin-top: 30px;
}
#footerBottom 
{
	text-align: center;
}
#footerBottom ul li
{
	margin: 20px 8px 0px;
	display: inline-block;
}
#footerBottom ul li a
{
	font-size: 1.6rem;
	margin: 20px;
	display: inline-block;
	color: #ffffff;
	transition: all .5s ease;
}
#footerBottom ul li a:hover
{
	letter-spacing: 2px;
}


/* --- MOBILE STYLES ---*/
@media only screen and (max-width: 800px)
{
/*--- Navigation ---*/	
	nav 
	{
		font-size: 2.0rem;
		text-align: center;
	}
	nav img
	{
		max-width: 240px;
		left: 0;
	}
	nav ul 
	{
		/* display: none; */
		margin-top: 60px;
		text-align: center;
		width: 100%;
		
		height: 0px;
		overflow: hidden;
	}
	nav li
	{
		height: 60px;
		display: block;
		margin-right: 0px;
		background-color: rgba(250, 250, 250, 0.9);
	}
	nav li .underScore
	{
		left: 0;
	}
	nav li a 
	{
		width: 50%;
		height: 100%;
		margin: auto;
	}
	#hamburgerMenu 
	{
		display: block;
	}
/*--- Greeting ---*/
	#greetingMessage img
	{
		max-height: 60px;
	}


/*--- Footer ---*/
	.footerHolder
	{
		display: block;
	}
	#footerContact 
	{
		margin-left: auto;
		margin-right: auto;
		max-width: 100%;
	}
	#mapSection
	{
		flex-direction: column;
		text-align: center;
	}	
	#footerForm
	{
		width: 90%;
		margin: 20px auto;
		display: block;
		height: auto;
	}

}/*--- up to 800px ---*/

/*--- Navigation ---*/
@media only screen and (min-width: 801px) and (max-width: 1230px)
{
	nav 
	{
		font-size: 2.0rem;
		text-align: center;
	}
	nav img
	{
		min-width: 320px;
		left: 0;
	}
	nav ul 
	{
		/* display: none; */
		margin-top: 60px;
		text-align: center;
		width: 100%;
		
		height: 0px;
		overflow: hidden;
	}
	nav li
	{
		padding: 8px 20px;
		display: block;
		margin-right: 0px;
		background-color: rgba(250, 250, 250, 0.9);
	}
	nav li .underScore
	{
		left: 50%;
		width: 50%;
		transform: translateX(-50%);
	}
	nav li a 
	{
		width: 50%;
		height: 100%;
		margin: auto;
	}
	#hamburgerMenu 
	{
		display: block;
	}
	

}/*--- min 800px up to 1200px ---*/

@media only screen and (min-width: 1201px)
{
	nav li:hover .underScore
	{
		left: 0;
	}
}/*--- min 800px up to 1200px ---*/