* {
    box-sizing: border-box;
}

/* Reset */
div, span, article, aside, footer, header, hgroup, nav, section,
h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li, 
table, tr, th, td, tbody, tfoot, thead {
	vertical-align: baseline;
	background: transparent;
	}

img.map, map area{
    outline: none; border:0;
}

.section-img		{ width:3vw; height:3vw; }

.read-more		{ padding:.8vw 2.6vw; border:1px #666 solid; border-radius:2px }


h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike { text-decoration:none;}

ol, ul {  }


/* Global */




/* End Reset */
_______________________________________________________________________________________________________________________________

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

/* Headings */
h1, h2, h3, h4, h5, h6 { }

h1 {font-family: 'Lato', sans-serif;
	font-size: 3.6vw;
	font-style: normal; margin-left:-3vw;
	color: #808080;
	font-weight: 300;
	text-align: center;
	text-decoration: none; padding-top:2.0vw;
}
h1.size {font-size:2.5vw; margin-left:auto; margin-right:auto; color:#ba7975}
h1 a:focus			{outline: none; }
h1 a:link			{ color: #808080;   }
h1 a:visited		{color: #808080;  }
h1 a:active		{ outline: none;}
	

	
h2 {font-family: 'Lato', sans-serif;
	font-size: 2.1vw; line-height:2vw;
	color:#ba7975;
	 padding-top:0vw;
	font-weight: 300; 
	text-align: left;
}
h2.margen 		{ 	margin-right:1vw; margin-left:1vw;
}

h2.margen-top 		{
	padding-top:5vw;
}	
h3 {font-family: "EB Garamond 12", serif ;
	font-size:1.1vw; line-height:1.8vw; margin-right:0px;
	 margin-left:3vw; margin-top:2vw; margin-bottom:2vw;
	font-style: italic;
	color: #B9B9B9;
	text-align: left;
	word-spacing: normal;
	text-decoration: none;
	letter-spacing: normal;
	font-weight: 300;
	}
	
h3.centre {text-align:center;}	

h4 { font-family: 'Lato', sans-serif;
	font-size: 1.2vw;
	color: #666; 
	font-weight: 400; margin-bottom:0vw;
	text-align: left;
	text-decoration: none;}
 
h5 { font-family: Arial, Helvetica, sans-serif;
	font-size: 10px; 
	font-style: normal; margin-right:70px;
	color:#921d2e; 
	line-height:20px;
	text-align: right; 
	text-decoration: none;
	font-weight:400;}
	
h5 a:link			{ color: #921d2e;   }

h5 a:visited		{ color: #921d2e;  }
h5 a:active		{ outline: none;}

h5 outline-width: {0; }
h5 a:focus			{outline: none;}


h5 a:hover     	{ color: #808080; }

h6 { font-family: 'Lato', sans-serif;
	font-size: 0.9vw; margin-bottom:0vw; 
	color:#ba7975; line-height: 0.6vw;
	font-weight: 400;
	text-align: left; margin-top:-0.5vw;
	text-decoration: none;padding-right:6vw;
 padding-left:7vw;}
 
 h6 a:link			{color:#ba7975;}
h6 a:hover     	{ color: #808080; }

p   {font-family: 'Lato', sans-serif;
	font-size:1.2vw; line-height:1.6vw; margin-right:0px;
	 margin-left:0px; margin-top:0px;
	
	font-style: normal;
	color: #808080;
	text-align: justify;
	word-spacing: normal;
	text-decoration: none;
	letter-spacing: normal;
	font-weight: 300;
	}
	
p.margen3 		{
	margin-right:0vw;
	margin-left:0vw;
	text-align: left;
}
.bold {font-family: 'Lato', sans-serif,; font-weight:400; margin-bottom:-10px;}

.bold-red {font-family: 'Lato', sans-serif,; color:#ba7975; font-size:1.5vw;}
.red {color:#ba7975;}
.centre2 {text-align:center; margin-right:0; margin-left:0;}	
p.margen 		{ 	margin-right:1vw; margin-left:1vw;
}

p.margen-box2 		{ 	margin-right:4vw; margin-left:6vw;
}
p.margen-left 		{ margin-right:0vw; margin-left:0vw;}
.margen {margin-right:1vw; margin-left:1vw;}

p a:link			{ color: #808080; font-weight: 400;   }

p a:visited		{ color:#436753; }
p a:active		{ outline: none;}

p outline-width: {0; }
p a:focus			{outline: none;}


p a:hover     	{ color: #000; }

map > area,
map > area:active,
map > area:focus {outline: none; border:0; }


/* Navigation */

.dl-menuwrapper button {display:none; visibility:hidden;}
#dl-menu { box-sizing: border-box;
	background-color: rgba(109,41,36,.95); 
	position: absolute;
	top: 0px; left: 0px;
	padding-top: 0px; padding-bottom:0; padding-right:0; padding-left:0;
	width: 100%; z-index:100;
}

#dl-menu::after { content:''; display: block; clear: both; }

#dl-menu ul { list-style: none; margin: 0; padding: 0px;  }

#dl-menu ul li:hover { background-color: #6d504d; }
#dl-menu ul li:hover > ul { display: block; }

#dl-menu ul li a { font-family: "Open Sans Light", sans-serif; font-weight:400; font-size:0.75vw; 	word-spacing:.8em;
	display: inline-block;
	color: #fff;
	padding: .5vw 1.5vw;
	text-decoration: none;
	width: 100%;
	position: relative;}


#dl-menu ul li a:visited { color: #fff; }

#dl-menu ul li a:hover { background-color: #9f8585; border-bottom: thin #FFF solid; }

#dl-menu ul ul { position: absolute; top: 100%; background-color: #667d8b; display: none; z-index: 200; }

#dl-menu ul ul li { position: relative; }

#dl-menu ul ul ul { left: 100%; top: 0px; width: 100%; z-index: 999; }




/* top-level */

#dl-menu > ul { padding-left:20%; }
#dl-menu > ul > li { float: left; }
#dl-menu > ul > li > a { width: auto; }


#dl-menu a[aria-haspopup="true"]::after {
	content: '';
	display: block; width: 0px; height: 0px;
	position: absolute;
	top: 16px; right: 15px;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 4px solid #fff;
}

#dl-menu > ul > li > a[aria-haspopup="true"]::after {
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid #fff;
	left: 20px; right: auto;
	bottom: 6px; top: auto;
}





		/* End Site Navigation */

/* Divs */

html, body { height:100%; position:0px; border:0px; margin:0px; }
#wrapper { height:auto; width:100%;}
#pic { 
  width:86vw; margin-top:0.1vw; height:80%; padding-left:21vw;} 
  	
#boxleft { 
  width:21%; margin-top:0.1vw;
  height:80%; float:left;} 
  
#box-centre {margin-top:0.1vw;
  width:42%; 
  height:80%; float:left;}
  
#box-right { 
  width:37%; margin-right:0%; margin-top:0.1vw;
  height:80%; float:left;}

#box-full {background-color:#CCC;
  width:100%; background-repeat:no-repeat;
  height:auto; float:left;}

#gallery-box { width:60%; height:auto; margin-left:auto; margin-right:auto;}	


#footer {width:589px; margin-left:180px; float:left;
		margin-top:0px; /* negative value of footer height */
		height:0px; clear:both; 	text-align:center; color:#fff; background-color:#DFE8EE; }

form ol { list-style-type:none; }

form 	{ text-align:left; margin:0vw;	}

label 	{box-sizing: border-box;
	float: left;
	width: 10.5vw;
	margin-top:.4vw; 
	text-align:left; margin-left:5vw;
	display:block;
	background:none;
	font-weight:normal;
	font-family: Arial, Helvetica, sans-serif;
	font-size: .8vw;
	color:#921d2e;}
	
button { font-size:.7vw; background-color: #E0E6E9; font-family: Arial, Helvetica, sans-serif;}	
	
submit	{ background:none;  	}

input 	{
		width: 16vw; margin:0 0 .8vw .5vw;
		border:.1vw #bbb solid; padding:.3vw; background:none; 
		}
		
input:focus, textarea:focus	{ background-color: #F0F0F0 }

textarea {
		width: 16vw; height: 7vw; margin:0 0 1vw .5vw;
		border:.1vw #bbb solid; padding:.3vw; background:none; 
		}

select { margin-bottom:3vw; }
	
.month { margin-left:10vw;	}

.submit {
		width:90vw; height:2vw;
		margin-left:16vw;
		font-size:.6vw;
		}
	
@media screen and (max-width: 1024px) { #dl-menu > ul { padding-left:13%; }
h2 {	font-size: 2.3vw; line-height:2vw;
	}
	#boxleft {   width:15%; } 
 #box-centre {width:40%; }  
 #dl-menu ul li a { font-size: 1.1vw;}
#box-right { 
  width:17.5%; } 
p{font-size:1.5vw; line-height:1.8vw;}
#pic { 
  width:100vw; margin-top:0.1vw; height:80%; padding-left:15vw;}
h3 {font-size:1.5vw; line-height:2.4vw;	}
}


@media screen and (max-width: 1280px) {#dl-menu > ul { padding-left:13%; }
h2 {	font-size: 2.7vw; line-height:2vw;}
	#boxleft {   width:15%; } 
 #box-centre {width:58%; }  
 #dl-menu ul li a { font-size: 1.1vw;}
#box-right {   width:17.5%; } 
p{font-size:1.45vw; line-height:2vw;}
#pic { 
  width:100vw; margin-top:0.1vw; height:80%; padding-left:15vw;} 
h3 {font-size:1.5vw; line-height:2.4vw;	}
}


@media screen and (max-width: 825px) {#box-centre {width:40%; }  #dl-menu ul li a { font-size: 1.3vw;}
p{font-size:1.3vw; line-height:1.8vw; }}


@media screen and (max-width: 760px) {#dl-menu > ul { padding-left:13%; }
h2 {	font-size: 2.7vw; line-height:2vw;
	}
	#boxleft {   width:15%; } 
 #box-centre {width:58%; }  
 #dl-menu ul li a { font-size: 1.1vw;}
#box-right { 
  width:17.5%; } 
p{font-size:1.5vw; line-height:1.8vw;}
#pic { 
  width:100vw; margin-top:0.1vw; height:80%; padding-left:15vw;}}
  
  @media screen and (max-width: 736px) {#dl-menu > ul { padding-left:13%; }
h2 {	font-size: 2.7vw; line-height:2vw;	}

h3 {font-size:1.8vw; line-height:2.8vw;	}v
	#boxleft {   width:15%; } 
 #box-centre {width:58%; }  
 #dl-menu ul li a { font-size: 1.1vw;}
#box-right { 
  width:17.5%; } 
p{font-size:1.6vw; line-height:2.2vw;}
#pic { 
  width:100vw; margin-top:0.1vw; height:80%; padding-left:15vw;}
  h1 {	font-size: 3.9vw;}

@media screen and (max-width: 625px) {#box-centre {width:40%; }  #dl-menu ul li a { font-size: 1.3vw;}
p{font-size:1.3vw; line-height:1.8vw; }}


@media screen and (max-width: 425px) {#box-centre {width:40%; }  #dl-menu ul li a { font-size: 1.3vw;}
p{font-size:1.3vw; line-height:1.8vw; }}




/* Box Shadows */

.box-shadow.top 			{ box-shadow: 0 -4px 2px -2px rgba(0,0,0,0.4); }
.box-shadow.right 			{ box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4); }
.box-shadow.bottom 			{ box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4); }
.box-shadow.left 			{ box-shadow: -4px 0 2px -2px rgba(0,0,0,0.4); }

.box-shadow-top-right-hard	{ box-shadow: -5px -5px #888; }
.box-shadow-top-right-soft 	{ box-shadow: -5px -5px 5px #888; }
.box-shadow-all-hard		{ box-shadow: 0 0 5px #888; }
.box-shadow-all-soft		{ box-shadow: 0 0 5px 5px #888; }

.emphasize-dark 			{ box-shadow: 0 0 5px 2px rgba(0,0,0,.35); }
.emphasize-light 			{ box-shadow: 0 0 0 10px rgba(255,255,255,.25); }
.emphasize-inset 			{ box-shadow: inset 0 0 7px 4px rgba(255,255,255,.5); }
.emphasize-border 			{ box-shadow: inset 0 0 0 7px rgba(255,255,255,.5);  }


/* Border styles */

.embossed-light 		{ border: 1px solid rgba(0,0,0,0.1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); }
.embossed-heavy 		{ border: 1px solid rgba(0,0,0,0.1); box-shadow: inset 0 2px 3px rgba(255,255,255,0.3), inset 0 -2px 3px rgba(0,0,0,0.3), 0 1px 1px rgba(255,255,255,0.9);	}

.gradient-light-linear 	{ background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); }
.gradient-dark-linear 	{ background-image: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0)); }
.gradient-light-radial 	{ background-image: radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0)); }
.gradient-dark-radial 	{ background-image: radial-gradient(center 0, circle farthest-corner, rgba(0,0,0,0.15), rgba(0,0,0,0)); }	

.light-rounded 		{ border-radius: 3px; }
.heavy-rounded 		{ border-radius: 8px; }
.full-rounded 			{ border-radius: 50%; }
.barrel-rounded 		{ border-radius: 20px/60px; }


.date			{ font-weight:bold; color:#BF6000; font-size:0.8vw; margin-bottom:-1vw; }

hr  {
  border: 0; 
  border-top: 1px solid #8c8c8c;
  border-bottom: 1px solid #fff;
}
/*body {
	// basic styles
}

@media all and (max-width: 600px) {
	body {
		// extra styles for mobile
	}
}

@media all and (min-width: 600px) {
	body {
		// extra styles for desktop
	}
}



/*@media (max-width: 699px) and (min-width: 520px) {
  @viewport {
    width: 640px;
  }
}

@viewport {
    width: device-width;
    zoom: .5;
  }
  
 @viewport {
    width: 980px;
    min-zoom: 0.25;
    max-zoom: 5;
    orientation: landscape;
}
\This example sets the viewport to at least 320px, but otherwise match window width if it is wider than 320px. Note that it is enough to set the width as the height will be resolved from the width when auto.

@viewport {
    width: 320px auto;
}

<meta name="viewport" content="initial-scale=1.0">

translates into:

@viewport {
    zoom: 1.0;
    width: extend-to-zoom;
}

@viewport {
    zoom: 2.0;
    width: auto;
    height: extend-to-zoom 100%;
}
@-ms-viewport{
    width: device-width
}
 
  */
  
  
