@charset "UTF-8";
/* CSS Document */

body {
background: #edf7fc;
margin:0 auto;
height: 100%;
color:#4876a5;
font-size:110%;
font-family:'metropolislight', "Helvetica Neue", Helvetica, Arial, sans-serif;
letter-spacing:.025em;
text-align: center;
padding: 0;
margin:0;}

p {
margin: 0 0 20px 0; line-height: 150%;}

ul {margin:0 0 20px 0; line-height: 160%;}

li {margin: 0 0 5px 0;}


a, a:link, a:visited {
	color:#c88e02;
	text-decoration: none;}

a:hover {color:#5086bc;}
a:focus, a:active {color:#91cbed;}

em, i {
	font-family:'metropolislight_italic', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style:normal;}

strong, b {
	font-family:'metropolismedium', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;}


   .container {
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      -webkit-flex-flow: row wrap;
	  -moz-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
      -o-flex-flow: row wrap;
      flex-flow: row wrap;
	  margin-left: auto;
      margin-right: auto;
   }


	@media (min-width: 1200px) {
      .container {
        width: 1200px;
        margin-left: auto;
        margin-right: auto;}
    }
	
	@media (max-width: 1250px) {
      .container {
        width: 100%;
        margin-left: 0;
        margin-right: 0;}
	}

	 
 .c1 {width: 100%;} /*header*/
 .c3 {width: 100%;} /*nav*/
 .c4 {width: 100%} /*content*/
 .c8 {width: 84%;} /*footer*/


#wrapper {
	padding:0;
	clear:both;	}

header {
	padding: 20px 0 0 0;
	margin: 0;
	background: #9fd5f3 url(images/wave-background.jpg) repeat-x center top;
	position:relative;
	background-repeat:no-repeat;
	background-position:bottom;
	background-size:cover;}
	
header nav {display:inline-block;}
	

.logo {
	width:200px;
	margin:0 15px 0 10%;
	float: left;}

.logo img {width:100%; height:auto;}


#appointment {
	width:187px;
	margin:30px 10% 0 0;
	padding: 0;
	font-family:'gilroy-light', 'robotolight', "Helvetica Neue", Helvetica, Arial, sans-serif;
	position:absolute;
	right:0;
	top:0;}
	
#appointment p, #appointment2 p, #appointment3 p {margin:0; line-height:120%;}

#appointment a, #appointment  a:link, #appointment  a:visited, #appointment2 a, #appointment2 a:link, #appointment2 a:visited, #appointment3 a, #appointment3 a:link, #appointment3 a:visited {
    background: #D7A14E;
	padding: 5px 22px;
    color: #F4EADC;
	border: #F4EADC 2px solid;
	border-radius: 20px;
    display: inline-block;
    font-weight: normal;
    text-decoration: none;}

#appointment a:hover, #appointment2 a:hover, #appointment3 a:hover {background:#bf8a3a;}
#appointment a:focus, #appointment a:active, #appointment2 a:focus, #appointment2 a:active, #appointment3 a:focus, #appointment3 a:active {background:#91cbed;}


#appointment2 {
	width:187px;
	height: 40px;
	margin: 15px 10% 25px 0;
	padding: 0;
	font-family:'gilroy-light', 'robotolight', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 120%;
	text-align: center;}

#appointment3 {
	width:187px;
	height: 40px;
	margin: 0 10% 15px 0;
	padding: 0;
	font-family:'gilroy-light', 'robotolight', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 120%;
	text-align: center;}


header h1 {
	font-family:'gilroy-light', "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align:left;
	color:#314f6d;
	text-shadow: 0 0 20px #fff;
	font-size:250%;
	padding: 0;
	margin:15px 0 5px;}
	
header h2 {
	font-family:'gilroy-light', "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align:left;
	color:#314f6d;
	text-shadow: 0 0 20px #fff;
	font-size:155%;
	margin:0;}
	
header h1 a, header h1 a:link, header h1 a:visited, header h2 a, header h2 a:link, header h2 a:visited {
	color:#5086bc; 		
	text-decoration: none;}

header h1 a:hover, header h2 a:hover {color:#5086bc;}
header h1 a:focus, header h1 a:active, header h2 a:focus, header h2 a:active {color:#91cbed;}


h1 {	
	font-family:'gilroy-light', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	margin:0 0 10px;
	font-size:180%;
	color:#4f81b4;
	line-height:100%;}
	
h2 {	
	font-family:'gilroy-light', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	margin:30px 0 10px;
	font-size:150%;
	color:#4f81b4;}

h3 {	
	font-family:'metropolislight', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	margin:0;
	font-size:100%;}
	
h4 {
	font-family:'gilroy-light', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	margin:20px 0 15px;
	font-size:125%;
	color:#4f81b4;}

h5 {
	font-family:'gilroy-light', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	margin:0 0 25px;
	font-size:110%;}

h6 {
	font-weight:normal;
	font-family:'metropolislight_italic', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:95%;
	margin: 0 0 10px;}
	
	
.note {
	font-size:90%;
	font-family:'metropolislight_italic', "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin:-10px 0 0 30px;}

	
nav {
	border-bottom:#f3dcbc 3px solid;
	padding: 0;
	margin: 15px 0 0 0;
	background:#cdebfb;
	text-align:center;
	font-family:'gilroy-light', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:95%;
	letter-spacing:1px;
	z-index:100;	}

nav:after {
	content:"";
	display:table;
	clear:both;}

nav ul {
	display: inline-block;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;}
	
nav ul li {
	margin: 0;
	display:inline-block;
	padding: 0;}

nav ul ul {
	display: none;
	position: absolute; 
	margin:0;
	text-align:left;
	top:100%;}
	
nav ul li:hover > ul {display:inherit;}
	
nav ul ul li {
	width:160px;
	display:list-item;
	position: relative;
	background-color:#FFD600;}
	
nav a, nav a:link, nav a:visited {
	display:block;
	padding:15px 15px;
	color:#4f81b4;
	font-size:130%;
	line-height:18px;
	text-decoration:none;}

nav a:hover {background-color: #afe3fc;}	
nav a:focus, nav a:active {background-color:#91cbed;}

.submenu a, .submenu a:link, .submenu a:visited {
	text-transform:none; 
	background: #bfe8fc;	}
	
.submenu a:hover {color:#fff; background: #bfe8fc;}

.menu {display:none;}
.walls {margin-left: -80px;}
.gallery {margin-left: -57px;}

	
#content {
	text-align:left;
	margin: 40px 0 0;	
	min-height:300px;
	max-width:1400px;}
	
.item_container {margin: 0 10%;}

.callout {
	font-size:95%;
	background:#daf0fc;
	padding: 25px 25px 5px 25px;}

.small {font-size:90%;}

.right {text-align:right;}

.clear {clear:both;}

.divider {
	width:80%;
	margin: 40px 10% 0;
	border-top: #D7A14E 1px solid;}

.divider2 {
	width:80%;
	margin: 20px 10%;
	border-top: #b6e1f9 1px solid;}

.photo {
	float:right;
	width:300px;
	margin:0 0 0 20px;}

.photo img {width:100%; height:auto;}


#map {margin-top:0; padding:30px 0 0;}

.googlemap {}
.googlemap iframe {}


#footer {
	border-top:#f3e0c6 3px solid;
	font-family:'gilroy-light', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 90%;
	text-align:center;
	bottom: 0;
    clear: both;
    left: 0;
	color:#4876a5;
	clear:both;
	margin:20px 0 0;
	padding:10px 8%;}
	
#footer p {margin:0;}

#footer .space {padding:0 10px; color:#D7A14E;}


	
.copyright {}

.space {padding:0 20px 0 0;}

.design {font-size:85%; float:right;}





@font-face {
    font-family: 'gilroy-light';
    src: url('fonts/gilroy-light-webfont.woff2') format('woff2'),
         url('fonts/gilroy-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'metropolislight';
    src: url('fonts/metropolis-light-webfont.woff2') format('woff2'),
         url('fonts/metropolis-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'metropolislight_italic';
    src: url('fonts/metropolis-lightitalic-webfont.woff2') format('woff2'),
         url('fonts/metropolis-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'metropolismedium';
    src: url('fonts/metropolis-medium-webfont.woff2') format('woff2'),
         url('fonts/metropolis-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}