@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600italic,600,400italic,700,700italic,800,800italic,300italic,300);

/* #Basic Styles */
body { font-size: 16px; line-height: 30px; color: #9a9a9a; font-weight: 300; font-family: 'Open Sans', sans-serif, Arial; }

/* #Typography */
h1, h2, h3, h4, h5, h6 { margin: 0 0 15px 0; font-weight: 300; color: #003e7e; letter-spacing: 0.8px; }
h1 { font-size: 28px; line-height: 34px; }
h2 { font-size: 24px; line-height: 30px; }
h3 { font-size: 22px; line-height: 26px; }
h4 { font-size: 20px; line-height: 24px; }
h5 { font-size: 18px; line-height: 22px; }
h6 { font-size: 16px; line-height: 18px; }
p { margin: 0 0 15px 0; }
img { border: 0 none; display: block; max-width: 100%; height: auto; }
ul, ol { padding: 0; margin: 0; list-style: none; }

/* #Globle Classes */
.clear { clear: both; overflow: hidden; height: 0px; }
.circle { margin: 0 auto 50px auto; height: 140px; width: 140px; border-radius: 50%; -webkit-border-radius: 50%; position: relative; overflow: hidden; }
.circle a { display: block; width: 100%; height: 100%; position: relative; z-index: 1; }

.gray:before, .gray:after, .circle.inner:before, .circle.inner:after { content: ""; margin: -47px 0 0 -47px; position: absolute; left: 50%; top: 50%; width: 95px; height: 95px; border-radius: 50%; -webkit-border-radius: 50%; box-shadow: inset 2px 2px 3px rgba(0,0,0,0.1); -webkit-box-shadow: inset 2px 2px 3px rgba(0,0,0,0.1); }
.gray:after, .circle.inner:after { box-shadow: inset -2px -2px 3px rgba(255,255,255,0.8); -webkit-box-shadow: inset -2px -2px 3px rgba(255,255,255,0.8); }

.gray { background: #f0f0ed; }
.olivedrab { background: #4d7332; }
.blue { background: #324163; }
.navyblue { background: #021826; }
.olive { background: #98a665; }
.yellow { background: #F4E205; }
.orange { background: #F24405; }
.darkcyan { background: #168387; }
.mintcream { background: #f1f0ee; }
.limegreen { background: #79c203; }
.lightblue { background: #509FB2; }
.wine { background: #40040C; }
.lightorange { background: #F28705; }
.yellowgreen { background: #98b81f; }

.line { padding: 0 10px; display: inline-block; position: relative; }
.line:before, .line:after { content: ""; position: absolute; top: 50%; width: 400px; height: 1px; background: #8ca8c5; }
.line:before { left: 100%; }
.line:after { right: 100%; }

/* #Links */
a { color: #9a9a9a; text-decoration: none; outline: 0; }
a:hover { color: #003e7e; }
a:focus { outline: none; }

/* #Buttons
================================================== */
.btn { letter-spacing: 0.9px; }
.btn:focus { outline: none!important; }

/* #Forms */
.form-control:focus::-moz-placeholder, .form-control:focus:-ms-input-placeholder, .form-control:focus::-webkit-input-placeholder { color: #4471a0; }
form p { margin-bottom: 30px; }


/* LAYOUT */
#layout { padding: 70px 0; margin: 0 auto; width: 100%; }

	/* HEADER */
	#header { padding: 15px 0; position: fixed; left: 0; top: 0; z-index: 9; width: 100%; background: #fff; }
	#header .logo { float: left; width: 30%; }
	#header .logo a { max-width: 100%; }
	#header a#opener { padding: 4px 0; position: absolute; border-top: 4px solid #4471a0; border-bottom: 4px solid #4471a0; right: 15px; top: 28px; display: none; z-index: 999; width: 35px; height: 20px; }
	#header a#opener span { display: block; height: 4px; background: #003e7e; }
	#header a#opener.active { position: fixed; border-color: #4471a0; }
	#header a#opener.active span { background: #4471a0; }

		/* NAVIGATION */
		#navigation { padding: 7px 0 0 0; float: right; width: 61%; }
		#navigation span { padding: 0 28px 0 0; display: inline-block; vertical-align: top; letter-spacing: 0.5px; margin-bottom: 20px;}
		#navigation span a { color: #9a9a9a; font-weight: 00; }
		#navigation ul li { margin-right: 46px; float: left; font-size: 16px; letter-spacing: 0.7px; }
		#navigation ul li a:hover, #navigation ul li.active a { color: #003e7e; text-decoration: none; }
		#navigation .menu { float: center; }
		#navigation .book { padding-right: 5px; float: right; }
		
	/* LANDING */
	#landing { padding: 61px 0 0; overflow: hidden; width: 100%; text-align: center; }
	#landing h1 { margin-bottom: 85px; font-size: 30px; }
	
	/* CONTACT */
	#contact { padding: 0 0 20px; overflow: hidden; width: 100%; text-align: center; }
	#contact h1 { margin-bottom: 50px; }
	#contact p { margin-bottom: 30px; text-align: left; font-size: 18px; color: #808080; }
	#contact .container { max-width: 545px; }
	#contact form { padding-top: 3px; }
	#contact span { padding-left: 30px; font-size: 11px; display: block; text-align: center; }
	#contact .row { margin: 0; overflow: hidden; }
	#contact .btn { float: right; min-width: 135px; }
	#contact.services h1 { margin-bottom: 75px; letter-spacing: 2px; }
	#contact p.center { text-align: center; }

	/* HEADDOT */
	#headdot { padding: 30px 0; margin-bottom: 35px; overflow: hidden; width: 100%; text-align: center; }
	#headdot .container { max-width: 580px; }
	#headdot .circle { margin: 0 auto; }
	
	/* FOOTER */
	#footer { padding: 12px 0; overflow: hidden; width: 100%; color: #808080; position: fixed; left: 0; bottom: 0; z-index: 9; background: #fff; }
	#footer a { color: #808080; }
	#footer a:hover { text-decoration: none; color: #003e7e; }
	#footer .email { text-align: center; }
	#footer .copyright { text-align: right; }
	
	@media only screen and (max-width: 1220px) {
	
		.container { width: auto; }
		#navigation ul li { margin-right: 43px; }
		#navigation .menu { float: center; }


	}
	
	@media only screen and (max-width: 1050px) {

		/* #navigation .menu { float: center; } */
		#header .logo {
			padding-top: 2px;
			max-width: 306px;
		}
		#navigation {
			display: -webkit-flex; /* Safari */
			display: flex;
			padding: 0px;
			width: 70%;
			max-width: 744px;
		}
		#navigation .menu {
			display: -webkit-flex; /* Safari */
			display: flex;
			order: 1;
			-webkit-justify-content: center;
			justify-content: center;
			-webkit-flex-basis: 428px; /* Safari */
			flex-basis: 428px;
			height:;
		}
		#navigation .menu ul {
			-webkit-justify-content: center;
			justify-content: center;
			margin-bottom:28px;
		}
		#navigation .menu ul li { margin-right: 10px; }
		#navigation .menu ul li:last-child { margin-right: 0px; }
		#navigation .book { 
			order: 2;
			-webkit-flex-basis: 254px; /* Safari 6.1+ */
			flex-basis: 254px;
			min-width:254px;
			padding: 0; }
		#navigation span { padding-right: 10px; }

	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		
		.circle { margin-bottom: 25px; width: 130px; height: 130px; }
		
		#layout { padding: 0; }
		#header { position: static; }
		#header .logo { padding-top: 10px; }
		#header .logo a { width: 200px; display: block; }
		#header a#opener { display: block; }
		
		#navigation { padding: 50px 0; float: none; display: none; text-align: center; width: 100%; position: fixed; left: 0; bottom: 0; width: 100%; height: 100%; z-index: 9; background: #FFF}
		#navigation .menu { float: center; }
		#navigation .menu ul li { float: none; margin-top: 20px; margin-bottom: 20px }
		#navigation .menu ul li a { color: #9a9a9a; font-weight: 400; }
		#navigation .menu ul li a:hover { font-weight: 600; }
		#navigation .book { float: none;  }
		#navigation span { padding-top: 5px; display: block; }
		#navigation .btn { margin-top: 5px; }
		
		#headdot { margin-bottom: 0px; }
		
		#landing { padding-top: 25px; }
		#landing h1 { margin-bottom: 30px; font-size: 25px; }
		
		#contact h1, #contact.services h1 { margin-bottom: 30px; }
		#contact .btn { float: none; }
		#contact span { padding: 5px 0; }
		#contact form p { text-align: center; }
		
		#footer { position: static; text-align: center; }
		#footer .copyright { text-align: center; }
	}

	@media only screen and (max-width: 479px) {
		
		.circle { width: 75px; height: 75px; }
		.gray::before, .gray::after, .circle.inner::before, .circle.inner::after { margin: -28px 0 0 -28px; width: 56px; height: 56px; }
		
	}