/* General CSS settings */

/* ************************************************************************************************************************************************************** */
/* Site-wide settings */
/* ************************************************************************************************************************************************************** */

h1 { font-size: medium; font-weight: bold; text-align: left; display: inline;
}

h2 { font-size: medium;
}

.mainpanelM { width: 855px; margin-left: auto; margin-right: auto; background-image: url(/images.system/backgrnd.jpg); }

.panelbody { color: #000000; background: #C0C0C0; background-image: url(/images.system/weave.gif);
}

.textblock { width: 97%; margin: 5px;}

/*.centre > div, .center > table { margin-left: auto; margin-right: auto;
}*/

/* Underline for links */
a:link {color: #0000FF; text-decoration: underline; font-style: normal; font-weight: normal }
/* Visited link */
a:visited {color: #000080; text-decoration: underline; font-style: normal; font-weight: normal }
@media only screen and (max-width: 768px) {
  /* Embolden text using 'shadow' to avoid enlarged text increasing size of conatiner for hover */
   a:hover {text-shadow: 0 0 .9px #333, 0 0 .9px #333, 0 0 .9px #333;}
}

/* Tooltip popup hints */
#tt { position:absolute; display:block; background:url(system.js/images/tt_left.gif) top left no-repeat;
}

 #tttop { display:block; height:5px; margin-left:5px; background:url(system.js/images/tt_top.gif) top right no-repeat; overflow:hidden;
 }

 #ttcont { display:block; padding:2px 12px 3px 7px; margin-left:5px; background:#666; color:#fff;
}

#ttbot { display:block; height:5px; margin-left:5px; background:url(system.js/images/tt_bottom.gif) top right no-repeat; overflow:hidden;
}

/* ************************************************************************************************************************************************************** */
/* Standard page headers and footers */
/* ************************************************************************************************************************************************************** */

/* Background was #9FA4BD */
table.pageheader { width: 100%; height: 50px; background-color: #767676;  font-size: 14pt; font-style: normal; font-weight: normal; border: 0; border-spacing: 0}
table.pageheader img {border: 0}
table.pageheader td:first-child {width: 40%; text-align: left}
table.pageheader td:nth-child(2) {width: 10%; text-align: center}
table.pageheader td:nth-child(3) {width: 50%; text-align: right}

/* Thin yellow separator horizontal line. */
div.hseparator { background-color: #FFFFA0; height: 3px}
tr.hseparator {background-color: #FFFFA0; height: 3px}

table.socialheader {width: 100%; background-color: #999999;  font-size: 10pt; font-style: normal; font-weight: normal; border: none}

/* Background was #9FA4BD */
table.pagefooter {width: 100%; height: 50px; background-color: #767676; font-size: 14pt; font-style: normal; font-weight: normal; border: 0; border-spacing: 0;}
table.pagefooter img {border: 0}
table.pagefooter td:first-child {width: 33%; text-align: center}
table.pagefooter td:nth-child(2) {width: 33%; text-align: center}
table.pagefooter td:nth-child(3) {width: 33%; text-align: center}

/* Wallpaper only pages */
table.pagefooter-wp {width: 100%; height: 50px; background-color: #767676; font-size: 14pt; font-style: normal; font-weight: normal; border: 0; border-spacing: 0;}
table.pagefooter-wp img {border: 0}
table.pagefooter-wp td:first-child {width: 45%}
table.pagefooter-wp td:nth-child(2) {width: 10%}
table.pagefooter-wp td:nth-child(3) {width: 45%}

/* Background was #9FA4BD */
table.copyright {width: 100%; color: #000000; background-color: #767676; font-size: x-small; border: 1px solid white; text-align: center}

/* Navigation bar */
table.navbar { width: 100%; color: #000000; background-color: #999999;  border: 0; border-spacing: 0 }
table.navbar a { display: block; width: 100%; color: #000000; text-decoration: none; font-style: normal; font-weight: normal}
table.navbar a:link {color: #000000; text-decoration: none; font-style: normal; font-weight: normal}
table.navbar a:hover {text-decoration: none; font-style: normal; font-weight: bold; background: #148ed9;}
table.navbar td {text-align: center; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0; padding: 2px 3px; }

/* ************************************************************************************************************************************************************** */
/* Index page settings */
/* ************************************************************************************************************************************************************** */
table.btncolumn { border: 0; padding: 0px; padding: 0px }

img.indexbanner { height: 132px; width: 855px; border: 0; vertical-align:text-top; display: block; margin-left: auto; margin-right: auto }
img.countybuttons { border: 0; height: 25px; width: 140px }
img.miscbuttons { border: 0; height: 26px; width: 130px }

/* Map and buttons display on index page */
tr.countybuttons { height: 28px; }
td.countybuttons { width: 140px; }

.button {
    display: inline-block;
    color: #fff;
    text-shadow: 0 0 2px rgba(0,0,0,.3);
    font-family: sans-serif;
    box-shadow:
        inset 0 0 2px 0 rgba(255,255,255,.4),
        inset 0 0 3px 0 rgba(0,0,0,.4),
        inset 0 0 3px 5px rgba(0,0,0,.05),
        2px 2px 4px 0 rgba(0,0,0,.25);
    border-radius: 4px;
    padding: 7px 16px;
    margin-bottom: 5px;
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
    line-height: 14px;
    position: relative;
}
/* County Buttons */
/* Row 1 */
.button.brecknockshire   { background: #FEFECF; color: #000; text-decoration: none; padding-left:21px; padding-right:21px; }
.button.gloucestershire  { background: #568D00; color: #FFF; text-decoration: none; padding-left: 7px; padding-right:16px; }
.button.northyorkshire   { background: #FEFE83; color: #000; text-decoration: none; padding-left:20px; padding-right:20px; }
/* Row 2 */
.button.buckinghamshire  { background: #BF00BF; color: #FFF; text-decoration: none; padding-left: 7px; padding-right:16px; }
.button.hampshire        { background: #FE4FA7; color: #000; text-decoration: none; padding-left:29px; padding-right:29px; }
.button.nottinghamshire  { background: #CF9B00; color: #000; text-decoration: none; padding-left:19px; padding-right:18px; }
/* Row 3 */
.button.caernarfonshire  { background: #FE6FFE; color: #000; text-decoration: none; padding-left:19px; padding-right:19px; }
.button.herefordshire    { background: #DFDF00; color: #000; text-decoration: none; padding-left:22px; padding-right:22px; }
.button.oxfordshire      { background: #FFD8B0; color: #000; text-decoration: none; padding-left:32px; padding-right:32px; }
/* Row 4 */
.button.cambridgeshire   { background: #DF6F00; color: #000; text-decoration: none; padding-left:21px; padding-right:21px; }
.button.hertfordshire    { background: #DFFEAF; color: #000; text-decoration: none; padding-left:22px; padding-right:22px; }
.button.pembrokeshire    { background: #BF7FFE; color: #000; text-decoration: none; padding-left:24px; padding-right:24px; }

/* Row 5 */
.button.carmarthenshire  { background: #72BF00; color: #000; text-decoration: none; padding-left:18px; padding-right:18px; }
.button.huntingdonshire  { background: #00EFEF; color: #000; text-decoration: none; padding-left:14px; padding-right:14px; }
.button.radnorshire      { background: #9F4F00; color: #000; text-decoration: none; padding-left:31px; padding-right:31px; }

/* Row 6 */
.button.ceredigion       { background: #FE4F4F; color: #000; text-decoration: none; padding-left:34px; padding-right:34px; }
.button.kent             { background: #AEFDFD; color: #000; text-decoration: none; padding-left:45px; padding-right:45px; }
.button.rutland          { background: #FE7F00; color: #000; text-decoration: none; padding-left:43px; padding-right:43px; }

/* Row 7 */
.button.cheshire         { background: #9E7600; color: #000; text-decoration: none; padding-left:39px; padding-right:39px; }
.button.leicestershire   { background: #8E008E; color: #FFF; text-decoration: none; padding-left:21px; padding-right:21px; }
.button.highlands        { background: #FE0000; color: #000; text-decoration: none; padding-left:13px; padding-right:13px; }

/* Row 8 */
.button.cumbria          { background: #CEFDE6; color: #000; text-decoration: none; padding-left:40px; padding-right:41px; }
.button.lincolnshire     { background: #9CE6B3; color: #000; text-decoration: none; padding-left:26px; padding-right:27px; }
.button.shropshire       { background: #5FFE5F; color: #000; text-decoration: none; padding-left:33px; padding-right:34px; }

/* Row 9 */
.button.denbighshire     { background:#00D0D0; color: #000; text-decoration: none; padding-left:28px; padding-right:28px; }
.button.london           { background:#4F4F4F; color: #FFF; text-decoration: none; padding-left:39px; padding-right:39px; }
.button.somerset         { background:#C5C5FE; color: #000; text-decoration: none; padding-left:37px; padding-right:37px; }

/* Row 10 */
.button.derbyshire       { background: #62CDFE; color: #000; text-decoration: none; padding-left:32px; padding-right:32px; }
.button.monmouthshire    { background: #FE936F; color: #000; text-decoration: none; padding-left:19px; padding-right:19px; }
.button.suffolk          { background: #FEB4B4; color: #000; text-decoration: none; padding-left:43px; padding-right:43px; }

/* Row 11 */
.button.dorset           { background: #9595C7; color: #000; text-decoration: none; padding-left:44px; padding-right:44px; }
.button.montgomeryshire  { background: #FE7F7F; color: #000; text-decoration: none; padding-left:14px; padding-right:14px; }
.button.sussex           { background: #FBB504; color: #000; text-decoration: none; padding-left:41px; padding-right:41px; }

/* Row 12 */
.button.essex            { background: #418383; color: #000; text-decoration: none; padding-left:45px; padding-right:45px; }
.button.norfolk          { background: #00AAFE; color: #000; text-decoration: none; padding-left:42px; padding-right:42px; }
.button.wiltshire        { background: #AF5700; color: #000; text-decoration: none; padding-left:39px; padding-right:39px; }

/* Row 13 */
.button.glamorgan        { background: #2F74FE; color: #000; text-decoration: none; padding-left:32px; padding-right:32px; }
.button.northamptonshire { background: #C0C000; color: #000; text-decoration: none; padding-left:13px; padding-right:13px; }
.button.worcestershire   { background: #3574E1; color: #000; text-decoration: none; padding-left:22px; padding-right:22px; }

/* Towns and Other Counties buttons */
.button.towns         { background: #9F9F9F; color: #000; text-decoration: none; padding-left:59px;padding-right:59px; }
.button.othercounties { background: #9F9F9F; color: #000; text-decoration: none; padding-left:38px;padding-right:38px; }

/* Miscellaneous buttons */
.button.links          { background: #EDE4B7; color: #000; text-decoration: none; width: 105px; float: left; }
.button.transport      { background: #EDE4B7; color: #000; text-decoration: none; width: 105px; float: left; }
.button.guestbook      { background: #EDE4B7; color: #000; text-decoration: none; width: 105px; float: left; }
.button.blog           { background: #EDE4B7; color: #000; text-decoration: none; width: 105px; float: left; }
.button.wallpaper      { background: #EDE4B7; color: #000; text-decoration: none; width: 107px; float: left; }
.button.updates        { background: #EDE4B7; color: #000; text-decoration: none; width: 105px; float: left; }

.button.search         { background: #EDE4B7; color: #000; text-decoration: none; width: 105px; float: left; }
.button.driving        { background: #EDE4B7; color: #000; text-decoration: none; width: 105px; float: left; }
.button.donate         { background: #EDE4B7; color: #000; text-decoration: none; width: 105px; float: left; }
.button.howtouse       { background: #EDE4B7; color: #000; text-decoration: none; width: 105px; float: left; }
.button.categories     { background: #EDE4B7; color: #000; text-decoration: none; width: 107px; float: left; }
.button.daytrips       { background: #EDE4B7; color: #000; text-decoration: none; width: 124px; float: left; }

.button.gazetteer      { background: #EDE4B7; color: #000; text-decoration: none; width: 104px; float: left; }
.button.footpaths      { background: #EDE4B7; color: #000; text-decoration: none; width: 105px; float: left; }
.button.contact        { background: #EDE4B7; color: #000; text-decoration: none; width: 105px; float: left; }
.button.oldest         { background: #EDE4B7; color: #000; text-decoration: none; width: 109px; float: left; }


.button:before, .button:after {
    content: '';
    display: block;
    position: absolute;
    left: 2px;
    right: 2px;
    height: 3px;
}
.button:before {
    top: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    background: rgba(255,255,255,.6);
    box-shadow: 0 1px 2px 0 rgba(255,255,255,.6);
}
.button:after {
    bottom: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background: rgba(0,0,0,.15);
    box-shadow: 0 -1px 2px 0 rgba(0,0,0,.15);
}

/* ************************************************************************************************************************************************************** */
/* Standard image pages layout */
/* ************************************************************************************************************************************************************** */

/* Blank margins */
td.marginL {width: 10px}
td.marginC {width: 10px}

/* Image cell */
td.photocell {width: 370px}
td.multi-photoL {width: 370px;}
td.multi-photoR {width: 370px;}

/* Button Row */
table.btnrow  {height: 35px; width: 97%; color: #000000; background-color: #999999 }
table.btnrow a { display: block; width: 100%; color: #0000CC; text-decoration: none; font-style: normal; font-weight: normal}
table.btnrow a:link {color: #0000CC; text-decoration: none; font-style: normal; font-weight: normal}
table.btnrow a:hover {text-decoration: none; color: #000000; font-style: normal; font-weight: normal; background: #148ed9; padding: 3px }
table.btnrow td {text-align: center; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0; padding: 2px 3px; }

/* Table cells in btnrow */
td.enlargebtn { width: 18% }
td.commentbtn { width: 20% }

@media only screen and (min-width: 769px) {
  td.infobtn { width: 5% }
}

@media only screen and (max-width: 768px) {
  td.infobtn { width: 20% }
}

td.parkingbtn {width: 8% }

table.regionbtn {height: 30px; width: 96%;  color: #000000; background-color: #999999 }
table.regionbtn a { display: block; width: 100%; color: #0000CC; text-decoration: none; font-style: normal; font-weight: normal}
table.regionbtn a:link {color: #0000CC; text-decoration: none; font-style: normal; font-weight: normal}
table.regionbtn a:hover {text-decoration: none; color: #000000; font-style: normal; font-weight: normal; background: #148ed9; padding: 0 }
table.regionbtn td {text-align: center; vertical-align: middle; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0; padding: 2px 3px; }
/* td.londonbtn {width: 427 } */

table.londonbtn {height: 30px; width: 100%;  color: #000000; background-color: #999999 }
table.londonbtn a { display: block; width: 100%; color: #0000CC; text-decoration: none; font-style: normal; font-weight: normal}
table.londonbtn a:link {color: #0000CC; text-decoration: none; font-style: normal; font-weight: normal}
table.londonbtn a:hover {text-decoration: none; color: #000000; font-style: normal; font-weight: normal; background: #148ed9; padding: 0 }
table.londonbtn td {text-align: center; vertical-align: middle; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0; padding: 2px 3px; }

/* Currently not used.  */
/* This won't work with IE 6 but works with other browsers (e.g. Firefox, Opera, Chromium etc.). */
/* img.photoframe {border-style: solid; border-width: 2px; border-color: transparent} */
/* img.photoframe:hover {border-style: solid; border-width: 2px; border-color: black} */

img.stdphotoL {width: 370px; border: none; margin-left: auto; margin-right: auto;}
img.stdphotoP {height: 370px; border: none; margin-left: auto; margin-right: auto;}
img.stdthumbL {width: 75px; border: none; margin-left: auto; margin-right: auto}
img.stdthumbP {height: 75px; border: none; margin-left: auto; margin-right: auto}
img.stdIdxL   {width: 175px; border: none; margin-left: 0px; margin-right: 0px;}
img.stdflag   {border: none}

/* This will work with IE 6 and other browsers (e.g. Firefox, Opera, Chromium etc.). */
/* Frame for landscape format images */
a.linkframe {display: block; margin: 2px; width: 370px}
a.linkframe:hover {display: block; margin: 0; border-style: solid; border-width: 2px; border-color: black }
/* Frame for portrait format images  with width 277 */
a.linkframeP {display: block; margin: 2px;  width: 277px}
a.linkframeP:hover {display: block; margin: 0; border-style: solid; border-width: 2px; border-color: black }
/* Frame for portrait format images with width 248 */
a.linkframeP2 {display: block; margin: 2px;  width: 248px}
a.linkframeP2:hover {display: block; margin: 0; border-style: solid; border-width: 2px; border-color: black }

/* Updates table */
/* table.updates { border-width: 1px; width: 100% } */

/* Frame for landscape format thumbnails  with width 75/60 */
a.thumbframe {display: block; margin: 2px; width: 75px}
a.thumbframe:hover {display: block; margin: 0; border-style: solid; border-width: 2px; border-color: black}
/* Frame for portrait format thumbnails  with width 60 */
a.thumbframeP {display: block; margin: 2px; width: 60px}
a.thumbframeP:hover {display: block; margin: 0; border-style: solid; border-width: 2px; border-color: black}

a.linkframe:focus {outline:none}

/* ***************************************** End standard image pages layout ******************************************* */

/* ************************************************************************************************************************************************************** */
/* Large image pages layout */
/* ************************************************************************************************************************************************************** */

/* Large image */
img.bigphotoL { width: 855px; border: none; }
img.bigphotoP { height: 855px; border: none; }

/* ***************************************** End large image pages layout ******************************************* */

/* ************************************************************************************************************************************************************** */
/* Miscellaneous settings */
/* ************************************************************************************************************************************************************** */

table.externallist a { text-decoration: underline; font-style: italic; font-weight: normal }
table.externallist a:hover { text-decoration: none; font-style: italic; font-weight: bold }

tr.externallist a { text-decoration: underline; font-style: italic; font-weight: normal }
tr.externallist a:hover { text-decoration: none; font-style: italic; font-weight: bold }

a.external { text-decoration: underline; font-style: italic; font-weight: normal }
a:hover.external { text-decoration: none; font-style: italic; font-weight: bold }

span.important { color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-size: x-small }
span.osgridref { color: #990000; background-color: transparent; font-weight: bold; font-style: normal; font-size: small }

/* Picture index */
div.index-level1 {background-color: #FFFFFF; text-indent: 1em; border: groove; width: 55%}
div.index-level1 a { display: block; width: 100%; color: #000000; background-color: #FFFFFF; text-decoration: none; text-indent: 1em; border: none}
div.index-level1 a:hover { display: block; width: 100%; color: #000000; background-color: #148ed9; text-indent: 1em; border: none}
div.index-sublevel1 { color: #000000; background-color: #FFFFA0; text-indent: 1em; width: 53%; margin-left: 2% }

div.index-level2 { background-color: #FFFFFF; text-indent: 1em; border: groove; width: 55%; margin-left: 4% }
div.index-level2 a { display: block; width: 100%; color: #000000; background-color: #FFFFFF; text-decoration: none; text-indent: 1em; border: none}
div.index-level2 a:hover { display: block; width: 100%; color: #000000; background-color: #148ed9; text-indent: 1em; border: none}
div.index-sublevel2 { background-color: #FFFFA0; text-indent: 1em; width: 53%; margin-left: 6% }

div.index-level3 { background-color: #FFFFFF; text-indent: 1em;  border: groove; width: 55%; margin-left: 6% }
div.index-level3 a { display: block; width: 100%; color: #000000; background-color: #FFFFFF; text-decoration: none; text-indent: 1em; border: none}
div.index-level3 a:hover { display: block; width: 100%; color: #000000; background-color: #148ed9; text-indent: 1em; border: none}
div.index-sublevel3 { background-color: #FFFFA0; text-indent: 1em;  width: 53%; margin-left: 8% }

div.index-level4 { background-color: #FFFFFF; text-indent: 1em;  border: groove; width: 55%; margin-left: 8% }
div.index-level4 a { display: block; width: 100%; color: #000000; background-color: #FFFFFF; text-decoration: none; text-indent: 1em; border: none}
div.index-level4 a:hover { display: block; width: 100%; color: #000000; background-color: #148ed9; text-indent: 1em; border: none}
div.index-sublevel4 { background-color: #FFFFA0; text-indent: 1em;  width: 53%; margin-left: 10% }

td.linkbody { background-color: #FFFFA0 }
td.credit1 { font-size: small }

td.currentpage {color: #FFFFFF; background-color: #767676; font-size: x-small}

.floatleft {
    float: left;
    margin-top: 4px;
    margin-left: 4px;
    margin-bottom: 4px;
    margin-right: 10px;
    border: 2px solid #0000BB;
}


/* Desktop display only */
  @media only screen and (min-width: 769px) {
  .floatleftP {
    float: left;
    margin-top: 4px;
    margin-left: 4px;
    margin-bottom: 4px;
    margin-right: 10px;
    border: 2px solid #0000BB;
  }
}

/* Mobile display only */
  @media only screen and (max-width: 768px) {
  .floatleftP {
    float: none;
  margin-top: 4px;
  margin-left: 4px;
  margin-bottom: 4px;
  margin-right: 10px;
  border: 2px solid #0000BB;
  }
}

table.topicbtn {height: 30px; width: 100%;  color: #000000; background-color: #999999}
table.topicbtn a { display: block; width: 100%; color: #0000CC; text-decoration: none; font-style: normal; font-weight: normal}
table.topicbtn a:link {color: #0000CC; text-decoration: none; font-style: normal; font-weight: normal}
table.topicbtn a:hover {text-decoration: none; color: #000000; font-style: normal; font-weight: normal; background: #148ed9; padding: 0 }
table.topicbtn tr {height: 30px}
table.topicbtn td {text-align: left; vertical-align: middle; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0; padding: 2px 3px; }

/* Donate window */
.modalwin .box {
  	/*width: -webkit-min-content;*/
  	/*width: -moz-min-content;*/
  	width: min-content;
	min-width:600px; /* Localhost */
   /*	min-width:1050px;  UH server */
 	margin: 2% auto;
	padding:20px;
	background-color:#CCC;
	box-shadow: 0px 1px 26px -3px #777777;
	}

	.modalwin .title {
		margin:0;
		padding:0 0 10px 0px;
		border-bottom:1px #ccc solid;
		font-size:20px;
		}

	.modalwin .content {
		display:block;
		padding:10px 0 0 0px;
		font-size:14px;
		line-height:22px;
		}

.modalwin {
	/** Hide the modalwin */
	display: none;

	/** Apply basic modalwin styling */
	position: fixed;
	z-index: 9999;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	color:#333333;
	}

.modalwin:target {
    /** Show modalwin when it is target */
    display: block;
    outline: none;
}

  .modalwin .close {
	background: #808081;
	color: #F00;
	line-height: 25px;
	position: absolute;
	right: 310px;
	text-align: center;
	top: 35px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	/*-webkit-border-radius: 12px;*/
	/*-moz-border-radius: 12px;*/
	border-radius: 12px;
	/*-moz-box-shadow: 1px 1px 3px #000;*/
	/*-webkit-box-shadow: 1px 1px 3px #000;*/
	box-shadow: 1px 1px 3px #000;
}

/* Centering 'Have you visited' text */
.Uvisited {text-align: center;
}

/* Centering 'Have you visited' text */
.Centre {text-align: center;
}
  .close:hover { background: #00d9ff; }
  /* End Donate window */
  
  .center > div { margin-left: auto; margin-right: auto; text-align: center;}

/* ================================================================================================================================== */
/*   This section is to incorporate mobiles                                                                                           */
/* ================================================================================================================================== */

/* #menubackground {border: 1px solid black; background-color: lightgrey;} */

/* Mobiles only - main panel full width */
@media only screen and (max-width: 768px) {
  .mainpanelM { width: 100%; background-image: url(/images.system/backgrnd.jpg);
  }
}

/* For Desktops */
.desktop-only {display: block;}
.mobile-only {display: none;}

/* For Mobiles */
@media screen and (max-width: 799px) {
  .desktop-only {display: none;}
  .mobile-only {display: block;}
}

.highlight
 {
  float: left;
  width: 380px;
  height: 20px;
  background-color:#FFDEAD;
  border:5px solid #FFDEAD;
 }

.normal-pdf
 {
  /*float: left;*/
  padding-top: 10px;
  width: 333px;
  height: 30px;
  background-color:#FFF8DC;
  border: 1px solid black;
 }

.normal-topic
 {
  float: left;
  padding-top: 3px;
  padding-left: 10px;
  width: 180px;
  /*height: 25px;*/
  background-color:#FFF8DC;
  border: 1px solid black;
  margin: 4px;
 }

 .topic-img
  {
    margin: 5px;
    /*@media only screen and (max-width: 768px) {*/
      max-width: 95%;
    /*}*/
  }

/* Mobile only */
@media only screen and (max-width: 768px) {
 .alley-img
  {
    margin-right: 50px;
  }
}

/* Desktop only */
@media only screen and (min-width: 769px) {
 .info-img
  {
    margin-left: 40px;
  }
}

/* ================================================================================================================================== */
/* General Page Header                                                                                                                */
/* ================================================================================================================================== */

/* Desktop display only */ /* 769  (45%) (3.7%) (44.25%)*/
@media only screen and (min-width: 769px) {
  .pageheader { background-color: #999999;  border-bottom: 3px solid #FFFFA0; max-width: 100%;
  }

  .title { width:45%; height: 20px; float: left; padding: 10px; font-size: large; font-weight: bold; background-color: #999999;
  }

  .flag { width: 4.5%; height: 40px; float: left; vertical-align: middle; background-color: #999999;
  }

  .subtitle { width: 45.8%; height: 20px; float: right; padding: 10px; font-size: large; font-weight: bold; text-align: right; background-color: #999999;
  }

  .flagimg { position: relative; top: 10px; left: 3px;
  }
}
/* Mobiles only - main panel full width */
@media only screen and (max-width: 768px) {
  .pageheader { background-color: #999999;  border-bottom: 3px solid #FFFFA0; max-width: 100%;
  /*.pageheader { background-color: #999999; width: 100%;*/
  }

  .title { max-width:40%; height: 20px; float: left; padding: 5px; font-size: medium; font-weight: normal; background-color: #999999;
  }

  .flag { max-width: 4.5%; height: 40px; float: left; vertical-align: middle; background-color: #999999;
  }

  .subtitle { max-width: 40%; height: 20px; float: left; padding: 5px; font-size: medium; font-weight: normal; text-align: right; background-color: #999999;
  }
}

.centreimg { display: block; max-width: 100%;
}

.extra-band-head { width: 100%; height: 15px; background-color: #767676; /*border-top: solid #FFFFA0 2px;*/
}

/* ================================================================================================================================== */
/* End General Page Header                                                                                                            */
/* ================================================================================================================================== */

.heading1 { font-size: 125%; text-align: center; width: 100%; background-color: #999999;
}

.heading2 { font-size: 100%; text-align: center; width: 100%; background-color: #999999;
}

/* ================================================================================================================================== */
/* General Footer                                                                                                                     */
/* ================================================================================================================================== */

.footer { border-top: 3px solid #FFFFA0; height: 30px;
}

/* Desktop display only */ /* 769  (45%) (3.7%) (44.25%)*/
@media only screen and (min-width: 769px) {

  .footer1 { float: left; width: 45%; height: 20px; text-align: center; padding-right: 25px; padding-top: 5px; background-color: #999999;
  }

  .footer2 { float: left; width: 3.7%; height: 23px; padding-top: 2px; background-color: #999999;
  }

  .footer3 { float: right; width: 44.25%; height: 20px; text-align: center; padding-right: 35px; padding-top: 5px; background-color: #999999;
  }

  .copyright { border: none; font-size: x-small; text-align: center; background-color: #CCCCCC; height: 40px;
  }
}

/* Mobile display only */ /* 768 */
@media only screen and (max-width: 768px) {

  .footer1 { float: left; width: 45%; height: 30px; text-align: center; padding-right: 3px; padding-top: 3px; background-color: #999999;
  }

  .footer2 { float: left; width: 36px; height: 31px; padding-top: 2px; background-color: #999999;
  }

  .footer3 { float: left; width: 35%; height: 30px; text-align: center; padding-right: 33px; padding-top: 3px; background-color: #999999;
  }

  .copyright { border: 5px solid #CCCCCC; font-size: small; text-align: center; background-color: #CCCCCC; height: 55px;
  }
}

.footerimg { position: relative; vertical-align: middle;
}

.extra-band-foot { width: 100%; height: 15px; background-color: #767676; /* border-top: solid #FFFFA0 3px; */
}
/* ================================================================================================================================== */
/* End General Footer                                                                                                                 */
/* ================================================================================================================================== */

#main-txt { margin: 5px;
}

/* ================================================================================================================================== */
/* iframe                                                                                                                             */
/* ================================================================================================================================== */

/* Desktop display - Map toggle */
  /* iframe size only (not image size) */
  /* Adjust image size to fit iframe */
@media only screen and (min-width: 769px) {
  iframe { width: 425px; height: 340px }
  .img-prop { max-width: 100%; max-height: 100%;}
}

/* Mobile display - Map toggle */
  /* iframe size only (not image size) */
  /* Adjust image size to fit iframe */
@media only screen and (max-width: 768px) {
  iframe { width: 338px; height: 260px }
  .img-prop { max-width: 100%; max-height: 100%;}
}

/* ================================================================================================================================== */
/* End iframe                                                                                                                         */
/* ================================================================================================================================== */

/* ================================================================================================================================== */
/* County Page                                                                                                                        */
/* ================================================================================================================================== */

/* Desktop display - County image & county description.*/
@media only screen and (min-width: 769px) {
  .description { max-width:100%; overflow: hidden;
  }

/*
  .description.buttonbox { position: absolute; bottom: 0; left: 380; background-color: #999999; border: solid black 1px;
  }
*/

  .image { float: left; max-width: 100%; height: auto; padding: 5px;
  }

  .desc-text { padding: 5px; height: 230px; /* was 200px. Changed again 04/04/22 from 210 */
  }

  .desc-textP { padding: 5px; margin-left: 375px; width: 400px; height: 320px;
  }

}

/* Mobile display - County image & county description.*/
@media only screen and (max-width: 768px) {
  .description { max-width:100%; overflow: hidden;
  }

  .image { float: left; max-width: 97.5%; height: auto; padding: 5px;
  }

  .desc-text { padding: 5px;
  }

  .desc-textP { padding: 5px; float: left;
  }

  .desc-text buttonbox { position: absolute; bottom: 0; width: 100%; border: solid black 1px;
  }
}

/*   .myImages max-width: 100%;
  }
*/

/* Desktop display - County map & county links.*/
@media only screen and (min-width: 769px) {
  .locations { width:100%; overflow: hidden;
  }

  .map {float: left; max-width: 100%; height:auto; padding: 5px;
  }

  .mapgb {float: left; max-width: 100%; height:auto;
  }

  .loc-text { float: right; max-width:40%; padding-right: 80px;

  }
}

/* Mobile display - County map & county links.*/
@media only screen and (max-width: 768px) {
  .locations { width:100%; overflow: auto;
  }

  .map {float: left; max-width: 100%; padding: 5px;
  }

  .map-img { max-width: 100%;
  }

  .loc-text { float: left; max-width:100%; padding: 5px; line-height: 1.5;
  }
}

/* Desktop display - County map & county links.*/
@media only screen and (min-width: 769px) {
  table.btnrowM  { float: right; height: 35px; width: 53%; color: #000000; background-color: #999999 }
}
/* Mobile display - County map & county links.*/
@media only screen and (max-width: 768px) {
  table.btnrowM  { float: left; height: 35px; width: 100%; color: #000000; background-color: #999999 }
}
table.btnrowM a { display: block; width: 100%; color: #0000CC; text-decoration: none; font-style: normal; font-weight: normal}
table.btnrowM a:link {color: #0000CC; text-decoration: none; font-style: normal; font-weight: normal}
table.btnrowM a:hover {text-decoration: none; color: #000000; font-style: normal; font-weight: normal; background: #148ed9; padding: 3px }
table.btnrowM td {text-align: center; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0; padding: 2px 3px; }


/* ================================================================================================================================== */
/* End County Page                                                                                                                    */
/* ================================================================================================================================== */

/* ================================================================================================================================== */
/* London Page                                                                                                                        */
/* ================================================================================================================================== */

/* Desktop display - London */
/* @media only screen and (min-width: 769px) {*/
  #london-1 { max-width:100%; overflow: hidden;
  }

 #part1 { float: left; max-width: 100%; height: auto; padding: 5px;
 }

 #part2 { float: right; max-width:100%; height: auto; padding: 10px;
 }

/* @media only screen and (min-width: 769px) { */
  #london-2 { max-width:100%; overflow: hidden; padding: 5px;
  }

  #section1 { float: left; max-width: 50%; height: auto; padding: 5px;
  }

  #section2 { float: right; max-width:50%; height: auto; padding: 10px;
  }

/* Desktop display - London PDF maps list.*/
@media only screen and (min-width: 769px) {
  .text-size  { font-size: medium; }
}
/* Mobile display - London PDF maps list.*/
@media only screen and (max-width: 768px) {
  .text-size { font-size: x-large; }
}

/* ================================================================================================================================== */
/* End London Page                                                                                                                    */
/* ================================================================================================================================== */

/* ================================================================================================================================== */
/* Site Updates Page                                                                                                                  */
/* ================================================================================================================================== */

/* Desktop display - Updates thumbnail image & details.*/
@media only screen and (min-width: 769px) {
  .updates { max-width:100%; overflow: hidden;
  }

  .thumbnail { float: left; max-width: 100%; padding: 15px; height: 55px; border: solid black 1px; margin-left: 5px;
  }

  .details { float: right; width: 84%; padding: 5px; height: 75px; border: solid black 1px; margin-right: 5px; line-height: 60px;
  }
}

/* Mobile display - Updates thumbnail image & details.*/
@media only screen and (max-width: 768px) {
  .updates { max-width:100%;
  }

  .thumbnail { float: left; max-width: 97%; height: 67px; padding: 5px; border: solid black 1px; margin-left: 5px;
  }

  .details { float: right; width: 66%; padding: 5px; height: 67px; line-height: 25px; border: solid black 1px; margin-right: 5px;
  }
}

/* Desktop display - Classified.*/
@media only screen and (min-width: 769px) {
  .classified { max-width:100%; overflow: hidden; margin: 5px;
  }

  .class-imgL {float: left; width: 9.5%; height:68px; padding-top: 15px; padding-left: 12px; padding-right: 5px; border: solid black 1px;
  }

  .class-imgP {float: left; width: 8.7%; height:74px; padding-top: 5px; padding-left: 23px; padding-bottom: 5px; border: solid black 1px;
  }

  .class-text { float: right; width:85%; height: 54px; background-color: #FFFFA0; border: solid black 1px; padding-top: 30px; padding-left: 20px;
  }
}

/* ================================================================================================================================== */
/* Classified (Categories Page)                                                                                                       */
/* ================================================================================================================================== */

/* Mobile display - Classified.*/
@media only screen and (max-width: 768px) {
  .classified { max-width:100%; overflow: auto; margin: 5px;
  }

  .class-imgL {float: left; width: 22%; height:72px; padding-top: 12px; padding-left: 5px; padding-right: 5px; border: solid black 1px;
  }

  .class-imgP {float: left; width: 19%; height:75px; padding-top: 5px; padding-left: 20px; padding-bottom: 5px; border: solid black 1px;
  }

  .class-text { float: right; width:67%; height: 54px; background-color: #FFFFA0; border: solid black 1px; padding-top: 30px; padding-left: 20px;
  }
}

/* ================================================================================================================================== */
/* End Classified (Categories Page)                                                                                                       */
/* ================================================================================================================================== */

/* ================================================================================================================================== */
/* Links Page                                                                                                                         */
/* ================================================================================================================================== */

/* Desktop display - Links page.*/
@media only screen and (min-width: 769px) {
  .links{ width: 100%;
  }

  .links-subheading { width: 79.6%; background-color: #FFFFFF; padding-left: 5px; margin-left: 5px; border-bottom: lightgrey solid 2px;
  }

  .links-item { width: 72%; height: 22px; background-color: #FFFFA0; padding-left: 30px; margin-left: 40px; border-bottom: lightgrey solid 2px;
  }
}


/* Mobile display - Links page.*/
@media only screen and (max-width: 768px) {
  .links{ max-width: 100%;
  }

  .links-subheading { width: 97%; background-color: #FFFFFF; padding-left: 5px; margin-left: 5px; border-bottom: lightgrey solid 2px;
  }

  .links-item { width: 87%; height: 60px; background-color: #FFFFA0; padding-left: 20px; margin-left: 20px; border-bottom: lightgrey solid 2px;
  }
}

/* Desktop display - Links page.*/
/* Not required */
/* ================================================================================================================================== */
/* End Links Page                                                                                                                     */
/* ================================================================================================================================== */

/* ================================================================================================================================== */
/* London Day Trips Page                                                                                                              */
/* ================================================================================================================================== */

  .LDTanchor { text-decoration: none !important;
  }

  .LDTplace { margin-right: 2px; 
              text-align: center; 
              width: 99%; 
              height: 25px; 
              background-color: #E0FFB0; 
              border: 1px; 
              border-style: solid; 
              border-color: black; 
              float: left; 
  }

  .LDTtime  { margin-right: 2px; text-align: center; width: 49.5%; height: 25px; background-color: #FFFFFF; float: left;
  }

  .LDTareamap { margin-right: 2px; text-align: center; width: 49%; height: 25px; background-color: #FFFFFF; float: left;
  }

  .LDTimage { max-width: 100%; margin-top: 3px; margin-left: 3px;
  }

.LDT-info { margin-bottom: 10px; border-bottom: solid grey 1px; height: 80px;
}

/* ================================================================================================================================== */
/* End London Day Trips                                                                                                               */
/* ================================================================================================================================== */

/* ================================================================================================================================== */
/* Comments Page                                                                                                                      */
/* ================================================================================================================================== */

.Comments {
}

/* ================================================================================================================================== */
/* End Comments Page                                                                                                                  */
/* ================================================================================================================================== */

/* ================================================================================================================================== */
/* Gazetteer Page                                                                                                                      */
/* ================================================================================================================================== */

.gazetteer { max-width: 100%;
}

.gazetteer1 { float: left; margin-left: 50px;
}

.gazetteer2 { float: left; margin-left: 100px;
}

/* ================================================================================================================================== */
/* End Gazetteer Page                                                                                                                  */
/* ================================================================================================================================== */

@media only screen and (max-width: 768px) {
  .mobile { width: 50%; height: 200px;
  }
}

.county-links { line-height: 1.5; margin: 5px;
}

/* ========================================================================================================================================== */
/*   Mobile menu system                                                                                                                       */
/* ========================================================================================================================================== */

/* This is required for Firefox only because it makes the menu buttons smaller than other browsers. text-align on its own creates a lot of surplus space 
   around the buttons. */
/*.menu-ESW { height: 452px; text-align: center;
}*/
.menu-ESW { text-align: center;
}

.button {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    background-color: #767676;
    padding: 8px 30px;
    font-size: 18px;
    border: 1px solid #2d6898;
}

/* Mobile Index only */
.dropbtnE {
  background-color: #00ff00;
  color: black;
  padding: 15px 128px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.dropbtnS {
  background-color: #FF0000;
  color: black;
  padding: 15px 28px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.dropbtnW {
  background-color: #00FFFF;
  color: black;
  padding: 15px 28px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.dropbtnL {
  background-color: #999999;
  color: black;
  padding:  15px 38px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: lightgrey;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Show the dropdown menu on hover - this is required for the menu to display */
.dropdown:hover .dropdown-content {
  display: block;
}

/* The container <div> - needed to position the dropdown content */
.dropdownW {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdownW-content {
  display: none;
  position: absolute;
  background-color: lightgrey;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdownW-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

 .dropdownW-content {
/* Align right for Wales Dropdown content. */
  right: 0;
}

/* Show the dropdown menu on hover - this is required for the menu to display */
.dropdownW:hover .dropdownW-content {
  display: block;
}

/*======================================================================================================*/
/* Options Menu - Home Page                                                                             */
/*======================================================================================================*/

/* Main screen menu */
.dropbtnM {
  background-color: bisque;
  color: black;
  padding: 10px 148px;
  font-size: 16px;
  border: none;
  margin-top: 2px;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdownM {
  position: relative;
  display: block;
}

/* Dropdown Content (Hidden by Default) */
.dropdownM-content {
  display: none;
  position: absolute;
  background-color: bisque;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdownM-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Show the dropdown menu on hover - this is required for the menu to display */
.dropdownM:hover .dropdownM-content {
  display: block;
}

/*======================================================================================================*/
/* General Menu - Home Page  (Top)                                                                      */
/*======================================================================================================*/

/* Mobiles only menu width */
@media only screen and (max-width: 599px) {
  .dropbtnO {
    background-color: grey;
    color: white;
    padding: 7px 152px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    width: 100%;
  }
}

/* Desktops only menu width  (Horizontal Bar)*/
@media only screen and (min-width: 600px) {
  .dropbtnO {
    background-color: grey;
    color: white;
    padding: 7px 152px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    width: 100%;
  }
}

/* The container <div> - needed to position the dropdown content */
.dropdownO {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* Dropdown Content (Hidden by Default) (The actual dropdown)*/
.dropdownO-content {
  display: none;
  position: absolute;
  background-color: grey;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdownO-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Show the dropdown menu on hover - this is required for the menu to display */
.dropdownO:hover .dropdownO-content {
  display: block;
}

/*======================================================================================================*/
/* London Options Menu - London Mobile Page                                                             */
/*======================================================================================================*/
  .dropbtnL {
    background-color: grey;
    color: black;
    padding: 7px 120px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    width: 100%
  }

/* The container <div> - needed to position the dropdown content */
.dropdownL {
  position: relative;
  display: inline-block;
  width: 100%;

}

/* Dropdown Content (Hidden by Default) */
.dropdownL-content {
  display: none;
  position: absolute;
  background-color: grey;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdownL-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Show the dropdown menu on hover - this is required for the menu to display */
.dropdownL:hover .dropdownL-content {
  display: block;
}

/*====================================================================================================================*/
/* Modal popup image window (Modal)                                                                                   */
/*====================================================================================================================*/

/* Style the Image Used to Trigger the Modal */
.myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
  image-rendering: pixelated; /* Sharpen reduced size image (seems to work very well on 'pixelated') */
}

.myImg:hover {opacity: 0.7; border: solid black 2px;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 20px; /* Location of the box (was 100px) */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
  .modal-content {
    margin: auto;
    padding-bottom: 80px;
    display: block;
    width: auto; /*was 80%;*/
    max-height: 855px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  position: relative;
  margin: auto;
  display: block;
  width: 80%;
  max-width: 855px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

  @keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
  }

/* The Close Button */
.close {
  position: absolute;
  top: 10px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

/* Desktop only */
/* Landscape images */
@media only screen and (min-width: 769px) {
 /* Height changed from 250 - 04/04/22 (This affects vertical positioning of Comment Bar and desc-text) */
  .adjust { width: 370px; height: 275px; 
  }
}
/* Portrait images */
@media only screen and (min-width: 769px) {
  .adjustP { max-height: 370px;
  }
}

/* Mobile only */
@media only screen and (max-width: 768px) {
  .adjust { max-width: 98%;
  }
}

@media only screen and (max-width: 768px) {
  .adjustL { max-width: 100%;
  }
}
@media only screen and (max-width: 769px) {
  .adjustP { max-height: 370px;
  }
}

/* Desktop only */
@media only screen and (min-width: 769px) {
  .fiveimgs2 {max-width: 370px;
  }
  .fiveimgsdiv2 {padding-left: 45px;
  }
  .fiveimgsdiv3 {width: 100%; padding-left: 23px;
  }
  .twoimgsP {margin-left: 168px;
  }
}

/* Mobile only */
@media only screen and (max-width: 768px) {
  .fiveimgs2 {max-width: 330px; margin-bottom: 3px;
  }
  /* .fiveimgsdiv2 {float: left; max-width: 272px; margin-left: 4px; */
  .fiveimgsdiv2 {
  }
  .fiveimgsdiv3 {margin-left: 35px;
  }
}

/* Desktop only */
@media only screen and (min-width: 769px) {
  .fiveimgs3 {max-width: 260px;
  }
}

/* Mobile only */
@media only screen and (max-width: 768px) {
  .fiveimgs3 {max-width: 260px; margin-bottom: 3px;
  }
  .fiveimgsdiv3{ margin-left: 38px;
  }
}

/* Desktop only */
@media only screen and (min-width: 769px) {
 .contactusT1 {width: 8%;
  }
}

/* Mobile only */
@media only screen and (max-width: 768px) {
 .contactusT1 {width: 15%;
  }
}

/* Desktop only */
@media only screen and (min-width: 769px) {
 .contactusT2 {width: 92%;
  }
}

/* Mobile only */
@media only screen and (max-width: 768px) {
 .contactusT2 {width: 85%;
  }
}

/* Desktop only */
@media only screen and (min-width: 769px) {
 .contactus {max-height: 75px; max-width: 65px;
  }
}

/* Mobile only */
@media only screen and (max-width: 768px) {
 .contactus {max-height: 100px; max-width: 75px;
  }
}

.flex-container {
  display: flex;	
  flex-direction: row;
}