@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Jura&display=swap');

BODY {margin: 0; font-family: Jura, "sans-serif"; font-size: 1em; font-weight: 600; line-height: 1.5rem;}

H1 {margin-bottom: 24px;}

LI {margin-bottom: 6px;}

A, A:visited {color: #000; text-decoration: none; font-weight: bold; border-bottom: 1px dotted #000;}
A:hover {border-bottom: 1px solid #000;}

#MainTitle {margin-left: 5%; color: rgba(78,78,78,1.0); cursor: pointer;
	transition-property: font-size, color;
	transition-duration: 0.7s;
	transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.4);
	transition-delay: 0s;}

#Menu {width: 40%; height: 48px; min-width: 380px; float:right; text-align: right; margin: -2% 5% 1% 0;}
#Menu NAV {padding: 2px 8px; font-size: 0.9rem; font-weight:600; color: rgba(78,78,78,1.00); display: inline-block; cursor: pointer; text-align: center;
	transition-property: font-size, font-weight;
	transition-duration: 0.7s;
	transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.4);
	transition-delay: 0s;}

#container {width: 100%; max-width: 960px; margin: auto; color: rgba(78,78,78,1.00);}

#H2 {wdith: 80%; max-width: 460px; margin-bottom: 48px; font-weight: 500; color: rgba(34,34,34,1.00);}

#ImgCont {width: 100%;}
#HomeImg {width: 80%; cursor: pointer;}

#InsetRgt {float: right; margin-left: 3%; width: 40%;}
#InsetRgt IMG {width: 100%;}

.button {width: 30%; margin: 9px auto; padding: 5px; font-size: 1.0rem; font-weight: 800; background: rgba(100,100,100,1.00); color: #FFF; cursor: pointer;}
.smlbutton {margin: 2px 0; width: 25%; padding: 2px 6px; font-size: 0.8rem; font-weight: 800; background: rgba(100,100,100,0.80); color: #FFF; cursor: pointer;}
.ibutton {width: auto; max-width: 40%; min-width: 25%; margin: 8px; padding: 5px 8px; font-size: 1.0rem; font-weight: 800; background: rgba(100,100,100,1.00); color: #FFF; cursor: pointer; display: inline-block;}
.ismlbutton {margin: 2px 8px; width: 25%; padding: 2px 6px; font-size: 0.8rem; font-weight: 800; background: rgba(100,100,100,0.80); color: #FFF; cursor: pointer; display: inline;}

.centre {text-align: center;}

FOOTER {text-align: center; font-size: 1.0rem; line-height: 2.0rem; background: rgba(240,240,240,1.00); color: #000; padding: 12px 0;}
FOOTER .coref {font-size: 0.8rem;}
FOOTER IMG {width: 3vw; display: inline; margin: 0 5%; cursor: pointer;}

SELECT, INPUT:not(.checkbox), TEXTAREA {padding: 8px; border: 0; border: 1px solid #999; border-radius: 4px; width: 80%; font-family: Jura, 'sans-serif';}
TEXTAREA {height: 120px;}

TABLE {width: 98%; margin: auto}
TD {width: 33%; background: rgba(0,0,0,0.10);}

#ContactMe {color: #000; opacity: 0.7; width: 80%; height: 71%; padding: 2%; margin: 0 auto 24px; border: 1px solid #AAA; background-position: center; background-repeat: no-repeat; background-size: contain;}

.GreyBox {width: 100%; border: 1px solid rgba(204,204,204,1.00); padding: 0 2% 4%; margin-bottom: 2%;}

.GalleryCap {position: absolute; z-index: 99; background: rgba(0,0,0,0.20); color:#FFF; padding: 1%; width: 100%; height: auto;}

/* Desktops and laptops. iPad portrait ----------- */
@media only screen 
and (min-width: 1025px)
and (max-width : 1279px) {

BODY {font-size: 1em; line-height: 1.5em; padding: 24px;}

#MainTitle {margin-left: 0;}
#MainTitle:hover {font-size: 1.25rem; color:#000;}

#Menu {width: 98%; height: 36px; min-width: 360px; float: none; text-align: left; margin-top: -2%}
#Menu NAV {padding: 2px 4px; font-size: 0.8rem;}
#Menu NAV:hover {font-weight: 800;}

#HomeImg {width: 100%;}

FOOTER {font-size: 0.9rem;}
FOOTER .coref {font-size: 0.8rem;}

SELECT, INPUT:not(.checkbox), TEXTAREA {padding: 4px; border: 1px solid #999; border-radius: 3px; width: 80%;}
TEXTAREA {height: 120px;}

TABLE {width: 98%; margin: auto; font-size: 0.8rem;}

#ContactMe {width: 90%; height: 80%; background-size: contain;}


.button {width: 30%; margin: 9px auto; padding: 5px; font-size: 1.0rem; font-weight: 800; background: rgba(100,100,100,1.00);}
.smlbutton {margin: 2px 0; width: 35%; padding: 2px 6px; font-size: 0.8rem; font-weight: 800; background: rgba(100,100,100,0.80); color: #FFF; cursor: pointer;}
.ibutton {margin: 8px; padding: 5px 8px; font-size: 1.0rem; font-weight: 800;}
.ismlbutton {margin: 2px 8px; width: 35%; padding: 2px 6px; font-size: 0.8rem; font-weight: 800; background: rgba(100,100,100,0.80); color: #FFF; cursor: pointer; display: inline;}

.GreyBox {width: 90%;}
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px)
and (max-device-width: 1024px) {

BODY {font-size: 0.9rem; line-height: 1.4em; padding: 20px;}

#MainTitle {margin-left: 0;}
#MainTitle:hover {font-size: 1.05rem; color:#000;}

#Menu {width: 98%; height: 36px; min-width: 360px; float: none; text-align: left; margin-top: -2%}
#Menu NAV {padding: 2px 4px; font-size: 0.8rem;}
#Menu NAV:hover {font-weight: 800;}

#HomeImg {width: 100%;}

FOOTER {font-size: 0.8rem;}
FOOTER .coref {font-size: 0.7rem;}

SELECT, INPUT:not(.checkbox), TEXTAREA {padding: 4px; border: 1px solid #999; border-radius: 3px; width: 80%;}
TEXTAREA {height: 120px;}

TABLE {width: 90%; margin: auto; font-size: 0.8rem;}

#ContactMe {width: 90%; height: 80%; background-size: contain;}

.button {width: 50%; font-size: 0.9rem;}
.smlbutton {margin: 2px 0; width: 50%; padding: 2px 6px; font-size: 0.6rem; font-weight: 800; background: rgba(100,100,100,0.80); color: #FFF; cursor: pointer;}
.ibutton {font-size: 0.9rem;}
.ismlbutton {width: 50%; padding: 2px 6px; font-size: 0.6rem; font-weight: 800; background: rgba(100,100,100,0.80); color: #FFF; cursor: pointer; display: inline;}

.GreyBox {width: 95%;}
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (max-device-width : 767px) {

BODY {font-size: 0.8rem; line-height: 1.2em; padding: 12px;}

#MainTitle {margin-left: 0;}
#MainTitle:hover {font-size: 1.025rem; color:#000;}

#Menu {width: 98%; height: 36px; min-width: 360px; float: none; text-align: left; margin-top: -2%}
#Menu NAV {padding: 2px 3px; font-size: 0.65rem;}
#Menu NAV:hover {font-weight: 800;}

#HomeImg {width: 100%;}

FOOTER {font-size: 0.75rem;}
FOOTER .coref {font-size: 0.65rem;}
FOOTER IMG {width: 6vw; display: block; margin: 10% 0; cursor: pointer;}

SELECT, INPUT:not(.checkbox), TEXTAREA {padding: 4px; border: 1px solid #999; border-radius: 2px; width: 80%;}
TEXTAREA {height: 120px;}

TABLE {width: 100%; margin: auto; font-size: 0.65rem;}

#ContactMe {width: 96%; height: 85%; background-size: contain;}

.button {width: 50%; font-size: 0.8rem;}
.smlbutton {margin: 2px 0; width: 66%; padding: 2px 6px; font-size: 0.6rem; font-weight: 800; background: rgba(100,100,100,0.80); color: #FFF; cursor: pointer;}
.ibutton {width: 40%; margin: 4px; padding: 4px; font-size: 0.7rem; font-weight: 600;}
.ismlbutton {margin: 2px 2px; width: 66%; padding: 2px 6px; font-size: 0.6rem; color: #FFF; cursor: pointer; display: inline;}

.GreyBox {width: 94%;}

.GalleryCap {font-size: 1.6rem;}
}