html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {background:#fff; margin:0 0 3em 0; padding:0; font-size:1em; line-height:1.5; 
font-family: verdana, arial, helvetica, sans-serif; text-align:center; }

a:link {color:#0066cc;}
a:visited {color:#2b98eb;}
a:hover {color:#ff9933;}
a:active {color:#da0000;}
a:focus {outline: none;}

form {margin:0; padding:0;}
fieldset {border:none; padding:0; margin:0;}
fieldset label,
fieldset .label {float:left; width:12em; text-align:right; padding:0 .4em 0 0; line-height:1.75;display:block}
fieldset .formRow {padding:.3em; clear:both;}
fieldset .formRow input[type="text"],
fieldset .formRow select,
fieldset .formRow textarea {width:100%;max-width:300px; padding:.25em}
fieldset .formRow textarea {max-width:400px;}

textarea {	
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;	
    width: 100%;
    }

input.postcard {font-size:1.1em;}
select {font-size:1.25em}
input[type="submit"] {padding:.25em; min-width:8em}

textarea, input {font-size:1.25em;}

hr {border: 0; height: 1px; background:#ccc;}
img {border:none;}

#skipnav {
  position:absolute; 
  top:-10000px;
}

h1 {font-family: Playfair Display,Georgia,Times New Roman,Times,serif;}
h2, h3, h4, h5, h6, .h2, h1 span.sm {font-family: verdana, arial, helvetica, sans-serif; font-weight:normal}

h1 {font-size:300%; margin-top:0; margin-bottom:.25em; font-weight:bold}
#home h1 {font-size:250%;}
h1.h1 {margin-bottom:0; padding-bottom:0}
h2 {font-size:220%; margin-bottom: 0.25em; margin-top:0}
h3 {font-size:175%; margin-bottom:.5em;}
h4 {font-size:150%; margin-bottom:0}
h5 {font-size:125%; margin-bottom:0}
h6 {font-size:125%; margin-bottom:0}

#cities h3, #home h3 {margin-top:0}
.content h3 {color:#000}
h1 span.sm {font-size:30%;}
.sm {font-size:85%;}
.caption, .credit {color:#666;  font-family: Playfair Display,Georgia,Times New Roman,Times,serif; padding-bottom:.5em}
.lg {font-size:125%;}

h1 a, h2 a, a.h2, h3 a {text-decoration:none; margin-top:0}

h1 a:hover, h2 a:hover, h3 a:hover {text-decoration:underline; color:#ff9933}

.summary {font-size:150%}

pre {font-size:1em;}

#wrapper {padding:0; margin:0 auto; max-width:1024px; text-align:left; padding:0 1em}
* html #wrapper {width:expression(document.body.clientWidth > 1024? "1024px": "auto")}

.wrapper {padding:0; margin:0 auto; width:100%; text-align:left; clear:both}

.row, 
#mainContent, #mainContent2,
#header, 
#footer {max-width:1024px; text-align:left; margin:0 auto}

.hero {width:100%;  overflow:hidden;position: relative;}
.hero img {width:100%; height:auto;}

.crop { max-height: 450px; overflow:hidden;}
.crop img {margin: -400px 0px 0px 0px; }

#header .title {float:left; }

nav ul {float:right; padding:0; list-style-type:none;  overflow:hidden; display:inline-block;}
nav ul li {display:inline-block; float:left; }
nav ul li a {font:1em verdana, helvetica, sans-serif; padding:0 1em; text-decoration:none; display:block; height: 44px;}

#menu {background:#fff;}
.show-menu {
	text-decoration: none;
	font-size:36px;
	color: black;
	display: none;
	position:absolute;
	top:12px;
	float:left;
}
.spacer {width:44px; display:none; height:44px; float:left;}

#header input[type=checkbox]{
    display: none;
   -webkit-appearance: none;
}
#header input[type=checkbox]:checked ~ #menu{
    display: block;
}

.sitemap a {padding:.2em 0; display:inline-block}

#navigation {width:100%; padding-top:1.5em; }
#navigation strong a:link {text-decoration:none;}
#navigation strong a:hover {text-decoration:underline;}
#navigation a {line-height:2}

#footer {font-size:0.9em; clear:both; padding-top:2em; padding-bottom:3em; }
#footer .flinks a {text-decoration:none;}
#footer .flinks a:hover {color:#ff9933; text-decoration:underline; }
#footer .flinks span {font-size:1.1em; padding:0 2em 0 0; }

#home #footer {padding-top:2em;}

.crop { max-height: 375px; overflow:hidden;}
.crop img {margin: -160px 0px 0px 0px; }

.topic ul li a {line-height:2}

.none, .footerp  {display:none;}

.holidays .pad20 {min-height:55px}
.attractions a {padding:20px 0}

.profile p {margin:0 .5em 1em 0;} 

.feature {border:1px solid #cccccc; padding:0 1.5em 1em 1.5em; display:inline-block;}

.featureItem {float:left; width:22%; }
.featureItem span {font-size:0.9em; }
.featureItem img {margin-bottom:.25em; border:1px solid #ccc; width:80%; height:80%}
.featureItem a {font-size:1.25em; margin-bottom:.5em; text-decoration:none}

.didyouknow {font-size:1em; margin:1em 0 0 0; }
.didyouknow p {margin-right:2.5em}

input[type=search] {
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	font-size: 100%;
	background: #ededed url(/img/search-icon.png) no-repeat 9px center;
	border: solid 1px #ccc;
	padding: 5px 10px 5px 32px;
	width:100px;	
	-webkit-border-radius: 10em;
	-moz-border-radius: 10em;
	border-radius: 10em;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
	display: none; 
}
input[type=search]:focus {
	width: 180px;
	background-color: #fff;
	border-color: #ff9933;
	-webkit-box-shadow: 0 0 5px rgba(204,102,51,.5);
	-moz-box-shadow: 0 0 5px rgba(204,102,51,.5);
	box-shadow: 0 0 5px rgba(204,102,51,.5);
}
input:-moz-placeholder {color: #999;}
input::-webkit-input-placeholder {color: #999;}
.copyright {float:left}
.copyright a {color:#000; text-decoration:none;} 

.clear {clear:both;}
.clearL {clear:left;}
.clearR {clear:right}
.rightImg {float:right; border:1px solid #ccc; margin-left:1em; margin-bottom:.5em}
.leftImg {float:left; border:1px solid #ccc; margin-right:1em; margin-bottom:.5em}
.centerImg { border:1px solid #ccc; margin-bottom:.5em}

.left25 {width:23%; float:left; margin-right:1em;}
.left75 {width:73%; float:left}

.left20 {width:20%; float:left;} 
.left30 {width:24%; float:left; min-height:220px}

.left {float:left;}
.right {float:right;}
.center {text-align:center; margin:0 auto;}
.bottom {vertical-align:bottom;}

.textright, 
.rightAlign, 
.alignR {text-align:right}

.left25 .imgContainer img,
.col50 .imgContainer img,
.col60 .imgContainer img {width:100%; height:auto;}

.col80 {width:78%}
.col75 {width:75%;}
.col70 {width:69%;}
.col66 {width:64%;}
.col60 {width:58%;}
.col50 {width:47%; padding:0 .5em 0 0;}
.col45 {width:45%}
.col40 {width:38%}
.col35 {width:32%;}
.col33 {width:32%; padding:0 .5em 0 0;}
.col30 {width:28%;}
.col25 {width:24%; padding:0}
.col20 {width:20%;display:table}
.col18 {width:18%;}
.col15 {width:13%}
.col10 {width:10%}

ul.places li {padding:0 0 .5em 0}

#wicons {text-align:center;width:100%}
#wicons div.wicon {padding:1em .5em; margin:0 auto;  }
#wicons div.wicon a {color:black; text-decoration:none; }

.grayBox {background:#EBEFF0; padding:2em;
   -webkit-padding-start: 2em;}

.blueBox {background:#BCE6EB; padding:2em;}

.ifacts {font-size:0.9em; border:1px solid #f7bb1a; background:#FDFCEA; padding:0 1.5em;}
.ifacts2 {font-size:0.9em; border:1px solid #f7bb1a; background:#FDFCEA; padding:0 1.5em; }
.ifacts ul,
.ifacts2 ul {padding:0 0 0 1em}

.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.flag {padding:0.5em 1em 0.5em 0;}

table.friendly {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
/*  width: 100%;
  table-layout: fixed; */
}

table.friendly caption {
  margin: .5em 0 .75em;
}

table.friendly tr {
  border: 1px solid #ddd;
  padding: .35em;
}

table.friendly th {background:#E9E9E9;   padding: .625em;text-align: center;}

table.friendly td {
  padding: .625em;
  text-align: left;
}

table.bdr, img.bdr {border:1px solid #ccc;}
.bdr, tr.bdr td {border-bottom:1px solid #ccc;}

table tr td {vertical-align:top; text-align:left;}

table.numeric tr th {padding:0.5em 1em;}
table.numeric tr td {
	text-align:right; 
	padding:0.5em 1em 0.5em 0; 
	border-bottom:1px solid #dadada; 
}

.data p {border-bottom:1px solid #dadada; }
table.data th {background:#E9E9E9;}
table.data th,
table.data td {
	padding:.75em; 
	border:1px solid #dadada;
	text-align:left;
}

table.cityDetails {width:80%}
table.cityDetails tr td {padding:0.25em 0.5em 0.25em 0; font-size:1em}
table.cityDetails ul {margin:0 0 0 14px;}

img.glossary { vertical-align: middle;}
.glossary { border: 2px  #CECFCE double; background-color: #F7F3F7; padding:0 1em;}

.box { border:1px #CECFCE solid;}
.gray { color:#333333;}
.graybg { background:#ececec;}
.highlight { background-color: #efefef; }
.lgtgry {background-color: #E9E9E9;}
.medgry {background-color: #cccccc;}
.drkylw {background-color: #FBF3C3;}
.medylw {background-color: #FEF9DD;}
.lgtylw {background-color: #FFFCE9}

.sponsors {padding:0 1em;}
.sponsors img {border:1px solid #666;}
.sponsors a {text-decoration:none; color:#000;}

.sponsor {color: #f46c0c;}
.sponsorMain {font-size:0.9em; float:left; padding-right:1.2em}
.sponsorMain a {color:#0066CC;}
.sponsorMain a:hover {color:#FF9933;}

.things ul {list-style-type: none; padding:0 0 1em 0; margin:0 1em 0 0}
.things ul li {border-bottom:1px solid #cccccc; padding:.5em 0}
.things a {text-decoration:none;}
.things a:hover {text-decoration:underline;}

.pad20R {padding-right:20px} 
.pad10R {padding-right:10px;}
.pad20 {padding:20px}

.pad-5T {padding-top:.5em}
.pad1T {padding-top:1em}
.pad1B {padding-bottom:1em}
.pad2B {padding-bottom:2em}
.pad1TB {padding:.5em 0}
.pad1R {padding-right:1em}
.pad1L {padding-left:1em}
.pad1-5L {padding-left:1.5em}
.pad2L {padding-left:2em}
.pad2R {padding-right:2em}
.pad3R {padding-right:3em}

.mar10L {margin-left:10px}
.mar20L {margin-left:20px}
.mar1R {margin-right:1em}
.mar2R {margin-right:2em}
.mar1L {margin-left:1em}
.mar2L {margin-left:2em}
.mar3R {margin-right:3em}

#flags .left {font-size:0.9em; width:15%; padding-bottom:1.5em}

#maps .left {padding:1em}
.map {float:right; font-size:0.9em; padding:0 0 1.5em 1.5em; text-align:center}
#map { height:200px; width: 300px; }

.nolink {text-decoration:none;  color:#000}

ol.listings {padding-left:1.5em;}
ol.listings div {padding-top:.5em}

table.listings {width:100%}
table.listings tr td {border-bottom:1px solid #ccc; padding:1em .5em;}
table.listings tr td .left {font-size:0.9em}

.red {color:#da0000}
.good {color:green}

.oddRow {background-color:#efefef; padding:1em;}
.evenRow {padding:1em;}
.right img.rating {margin:.25em 0 .4em 0}

.lists p {padding:.25em 0; margin:0}
.lists a,
.lists li {line-height:2.5; }

table.postcard {width:99%;}
table.postcards tr td {width:33%; padding:0 1em; text-align:center}
table.postcards tr td img {border:1px solid #ccc;}

.quiz {line-height:1.75}
.clock {font-size:1.5em; line-height:2}

.block {display:block}

.bookN {padding:1em 2em; background:black; color:white}
a.bookN {text-decoration:none; color:white; font-weight:500}

.pages, pages2 {text-align:center; padding:2em 0 1em;}
.pages a {
	background-color:#ececec;
	padding:.5em 1em; 
	border:1px solid #ccc;
	text-decoration:none;
	display:inline-block
}

.pages a.on {background:none}
.pages2 a {
	padding:.5em 1em; 
	text-decoration:none;
	display:inline-block
}

div.imagetitle {position: relative;}
div.thetitle {
	border:2px solid  #fff;
        position: absolute;
        top: 50%;
        left: 50%;
    	-webkit-transform: translate(-50%, -50%, 0);
       	-moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%,- 50%);
        -o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

div.thetitle h2 {padding:.3em 0.75em; color:#fff; margin-top:0;}
.shortTitle {padding-top:2.2em}

.ecard {text-align:center;}
.ecard img {text-align:center; margin:0 auto}
#postMenu a {display:inline-block;padding:0 0 .30em 0;}
article {cursor: pointer; display:inline-block;}

.imgSection img {width:240px}
.imgSection2 img {width:267px;}
.imgSection3 img {width:400px;}

div.imgSection3, div.imgSection2, div.imgSection {position:relative}

div.sendcard {position:absolute; right:18px; bottom:8px;font-size:0.9em;}

div.sendcard2 {position:absolute;right:18px;bottom:32px;font-size:0.9em;}
div.sendcard a, div.sendcard2 a {text-decoration:none;color:#fff;}

ul.recipe {padding:0;list-style-type:none;}
ul.recipe li {border-bottom:1px solid #ccc; padding:.5em 0;}

.demogra span {font-size:1.75em;}

.line, .ln {width:100%; height:1px; border-bottom:1px solid #ccc}

.space {white-space: nowrap}

#exploring a,
#flinks a {line-height:2em; }

#message {background:#ececec; border:1px solid #cccccc; display:block; padding:0 1em 1em 1em;}
#message .button {width:200px; margin:0 auto; display:block;
 padding:1em; color:white; background:#ff9933; text-align:center; }
#message a {text-decoration:none}


/* -------------------------- Less than 1023      */
@media (max-width: 1023px) {

body {padding:0 1em 1em 1em;}

/*.hero {width:100%;height:auto; overflow:hidden;}*/

.hero img {
  object-fit: cover;
  width: 100%;
  height: 350px;
}
#header {margin:0; width:100%}

.smImgLeft {padding-right:1em}
.smImgRight {padding-left:1em}
#didyou .col25 {width:100%; clear:both;}

.left20 {width:30%;}
.left20 .imgContainer img {width:100%; height:auto}
.left30 {width:65%;}
.clearM {clear:both;}
}

/* -------------------------- landscape */

@media only screen and (min-width : 768px) and (max-width : 1024px)  and (orientation : landscape) { 

#home .col20,
#home .col25 {width:48%; display: inline-block;}

.left20 {width:30%;}
.left30 {width:65%;} 
.clearM {clear:both}
}

/* -------------------------- MVP, SVP and XSVP   */
@media (max-width: 767px) {


h1, h2, h3, h4, h5, h6 {padding-top:0; margin-top:0}
h1 {font-size:200%}
#home h1 {font-size:175%}
h2 {font-size:150%}
h3 {font-size:140%}
h4 {font-size:130%}
h5 {font-size:120%}

#header {margin-bottom:1.5em; padding:0;}
#header .title {width:80%; }
/* #header .title img {width:100%;}*/

.hero {height:300px}
.hero img {
  position: absolute;
  left: 0%;
  top: 0%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-20%,0%);
      -ms-transform: translate(-20%,0%);
          transform: translate(-10%,0%);
}

.row, #mainContent, #mainContent2 {padding-top:1em}
nav {padding-top:1.5em}

nav ul {position: static;display: none; float:none; clear:both; margin:0}
nav ul li {margin-bottom: 1px; padding:1.5em 0 0 .5em; border-bottom:1px solid #cccccc; text-align: left;}
nav  ul li, nav li a {width: 100%; font-size:100%;}
.show-menu {display:block;}
.spacer {display:block; float:left;}

.left25 {width:47%; float:left;margin-right:1em}
.col50 .imgContainer img,
.left25 .imgContainer img {width:100%;}
.padR {padding:0}
.padB {padding:1em 0 0 0;  }

.left20 {width:45%;}
.left30 {width:45%;}
.clearM {clear:both} 

.booking, .comment {display:none;}

.listings .col25 {padding-left:1.25em}

#footer .flinks {clear:both;}
#footer .flinks a {
        display: block;
        clear:both; 
        margin: 0;
        text-decoration: none;
}
#footer .left {float:left;}
#footer .flinks a {
	padding:0 .5em 0 0; 
	font-weight:normal
}

img.social {width:40px; height:40px}

fieldset .label, 
fieldset label { 
	float:none;
	 text-align:left;
}

input[type=text] {
        width:100%;
}

.ifacts {width:auto; margin:0; padding:0 0.5em}

.featureItem {
	padding:0;
	width:50%;
}
.featureItem img { width:200px; height:200px}

.feature {
	padding:0;
	border:none
}

.searchm {display:inline}

div.imagetitle {position: static;}
div.thetitle { 
	border:none;
        position:static;
        top:0;
        left:0;
    -webkit-transform: none; /* Safari and Chrome */
       -moz-transform: none; /* Firefox */
        -ms-transform: none; /* IE 9 */
         -o-transform: none; /* Opera */
            transform: none;
}
div.thetitle h2 {
	font-size:125%;
        padding-left:0;
        color:#000;
        margin-top:0;
}


.imgSection img {width:300px}
.imgContainer80 {margin:0 auto; text-align:center; width:100%}
.imgContainer80 img {width:80%; height:auto;}

.imgContainer img,
.anyimg img,
.imgSection3 img {
	width:100%; 
	height:auto;
	float:none; 
	clear:both;
}
/* 
.padL {padding-left:1em}
.padR { padding-right:1em}
*/
.shortTitle {padding-top:0}


.didyouknow p {margin:0}

.didyouknow, 
.profile, 
.feature, 
.col10, 
.col15,
.col18,
.col20,
.col25, 
.col30,
.col33, 
.col35
.col40, 
.col45,
.col50, 
.col60, 
.col66, 
.col70, 
.col75, 
.col80 {width:100%; clear:both;}

#demogra .col30 {width:45%}
#feel .col20 {width:45%}
#feel .col30 {width:45%; clear:both;}
}

/* -------------------------- for large images */
@media (max-width: 750px) {

.padL {padding-left:0}
.padR { padding-right:0}

.clearM {clear:both}

}


/* -------------mobile-friendly tables ---- */
@media (max-width: 600px) {

.left, 
.leftImg,
.right, 
.rightImg,
.left75
{clear:both; float:none; margin:0}

.left20 {width:45%; }
.left30 {width:45%;} 
.clearM {clear:both}

.left25, .left50 {width:100%; float:left;margin-right:1em}
.imgContainer img {width:100%;}

table.friendly {
    border: 0;
    width: 100%
  }

  table.friendly caption {
    font-size: 1.3em;
  }
  
  table.friendly thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table.friendly tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table.friendly td {
    border-bottom: 1px solid #ddd;
    display: block;
  }
  
  table.friendly td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    font-weight: bold;
  }
  
  table.friendly td:last-child {
    border-bottom: 0;
  }
}


/* -------------------------- SVP    */

@media (max-width: 480px) {

#wrapper {padding:0 .75em;}

h1 {font-size:150%}
h2 {font-size:130%}
h3 {font-size:120%}
h4 {font-size:110%}
h5 {font-size:100%}

#header {margin:0 0 1em 0; padding:0}

.didyouknow p {margin:0}

.row, #mainContent, #mainContent2,
#footer .copyright
.ifacts, 
.didyouknow, 
.label, label {
	float:none;
	clear:both; 
}

fieldset .label, 
fieldset label { 
	float:none;
	text-align:left;
}

.pad2R {padding:0;}

.ifacts {width:auto; margin:0; padding:0 0.5em}

.feature {padding:0; border:none; display:block;}

#footer {padding-bottom:0}
#footer .flinks {clear:both;}

#footer .flinks strong a {display: block;  clear:both;  margin: 0;  line-height:2em;text-decoration: none;}

.featureItem { 
    padding:0 .25em;
	width: 46%;
	display:table-cell;
}
.featureItem img {width:110px; height:110px}
.featureItem span {display:none}

.book,
.inPage {display:none;}
#navigation a {line-height:2em;}

.pad1L {padding-left:0}
.pad2L {padding-left:0}
.pad1R {padding-right:.5em}
.pad2R {padding-right:.5em}

div.imagetitle {position: static;}
div.thetitle { 
	border:none;
	position:static;
	top:0;
	left:0;
    -webkit-transform: none; /* Safari and Chrome */
       -moz-transform: none; /* Firefox */
        -ms-transform: none; /* IE 9 */
         -o-transform: none; /* Opera */
            transform: none;
}
div.thetitle h2 {
	font-size:125%;
        padding-left:0;
        color:#000;
        margin-top:0;
}
.ifacts2 {margin:0; padding:0 1em}

#social .left {padding-bottom:.5em}

.left20 {width:45%;}
.left30 {width:45%;}
.clearM {clear:both}

}




/* -------------------------- XSVP      */

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

}