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

.logo {margin:0 15px 0 20px;}

header h1 {margin:10px 0 5px;}

nav {padding: 0;}
	
nav ul {vertical-align: top;}
nav:hover ul {margin-top:0;}
nav ul li {display:none; margin: 0;}  
nav:hover li {display:block; list-style: outside none none;}
nav ul ul {margin-left:150px;}
	  
nav ul ul li {
	float:none;
	display:list-item;
	position: relative;
	margin-left:0;}
	
nav a, nav a:link, nav a:visited {padding:11px 15px; margin:0 auto 0 0;} 
  
 .menu {display:inline-block;}	
	
#appointment {
	font-size:95%;
	width:auto; 
	margin:130px 20px 0 0;
	float:right;}

#content {margin: 30px 0 0;}
.item_container {margin: 0 30px;}

 .googlemap {
        position: relative;
        padding-bottom: 75%; /* 4:3 ratio*/
        height: 0;
        overflow: hidden;}

.googlemap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;}


@media (max-width: 730px) {
header h1 {
	font-size:240%; 
	margin:5px 0 5px;}
	
header h2 {
	font-size:145%;
	margin: 0 0 10px 0;}
	
.logo {width:20%;}
	
#appointment {margin:115px 20px 0 0;}
}


@media (max-width: 700px) {
header h1 {
	font-size:230%; 
	margin:5px 0 5px;}
	
header h2 {
	font-size:135%;
	margin: 0 0 10px 0;}
	
#appointment {margin:105px 20px 0 0;}
}


@media (max-width: 650px) {
header h1 {font-size:215%;}
header h2 {font-size:125%;}

.photo {
	float:none;
	width:50%;
	margin:0 25% 20px;}
}


@media (max-width: 560px) {
.logo {float:none; margin:0 35%;}

header h1, header h2 {text-align:center;}
header h1 {margin:0;}

#appointment {margin:10px 10px 0 0;}
	
.photo {width:60%; margin:0 20% 20px;}
}


@media (max-width: 435px) {
.logo {width:25%;}
header h1 {font-size:200%;}
header h2 {font-size:115%;}

.photo {width:70%; margin:0 15% 20px;}
}


@media (max-width: 385px) {
.logo {margin:0 33%;}
	
header h1 {font-size:180%;}
header h2 {font-size:125%;}
	
#appointment {font-size:92%;}
}


@media (max-width: 360px) {
header h1 {font-size:170%;}
header h2 {font-size:125%;}
}