@charset "UTF-8";

/* @font-face { */
/* 	font-family: 'Open Sans'; */
/* 	font-style: normal; */
/* 	font-weight: 400; */
/* 	src: url('/fonts/MyWebFont-Regular.ttf') format('ttf'); */
/* } */


@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
 
:root {
  --block-size: 0.14em;
  --maxTextWidth: 1400px;
  --borderColour: navy;
  --bkgdColour: azure; /*#F0F8FF*/
  --bkgdColour: white; /*#F0F8FF*/
  --borderHighlight: MidnightBlue;
  --colourDeactive: #F0F8FF88;
}

body {
	font-size : 12px;
	font-size: 1.5rem;
	font-size: calc(1.5em + 0.2vw);
	font-family: 'Open Sans', 'Calibri', sans-serif;
	color: var(--borderColour);
	background: var(--bkgdColour);
	max-width: var(--maxTextWidth);
	margin-left: auto;
    margin-right: auto;
    padding: 0 2em 5em 2em;
	
}


.headerImage {
	background: url(/images/Skyline.svg) no-repeat top center / contain, var(--bkgdColour);
	height: 250px; 
	width: var(--maxTextWidth);
	
}

@media screen and (orientation: portrait){
	body {
		max-width: 80vw;
	}
	.headerImage {
		height: 236px; 
	}
	body {
		padding: 0 2em 9em 2em;
	}
}

@media screen and (max-width: 30em) and (orientation: landscape){
	body {
		max-width: 80vh;
	}
	.headerImage {
		height: 236px; 
	}
	body {
		padding: 0 2em 12em 2em;
	}	
}

@media screen and (orientation: landscape) and (min-width: 31em){
	body {
		max-width: var(--maxTextWidth);
	}
}





.byline {
	position: relative;
	top: 66%;
	left: 60%;
	color: var(--bkgdColour);
	font-size: 0.72em;
}

.hiddenContainer {
	overflow: hidden;
	vertical-align: middle;
	
}

.hiddenContainer2Lines {
	height: 3.2em;
}

@media screen and (max-width: 1400px){
	
    .headerImage { 
    	width: 80vw;
		height: 236px; 
    }
    .byline {  
    	position: relative;
		top: calc(80vw * 250 / 700);
		left: 0;
    }
    .hiddenContainer2Lines {
		height: 3.4em;
	}
}




.corona {
	padding: 0.5em 0 0.5em 1em;
	background: Crimson;
	background: #DC143C; 
	font-weight: bold;
  overflow: auto;
}

.corona, div.corona div a {
	color: #F0F8FF;
	text-decoration: none;
}

.underline {
	text-decoration: underline;
}



h1, h2, h3, h4, h5, h6 {
	font-family: 'Open Sans', 'Verdana', sans-serif;
}

h1 {
	font-size: 2.72rem;
}

.menu {
  background: var(--borderHighlight);
  display:flex;
  flex-flow: row wrap;
}

.menucontainer {
	flex: auto;
  display:flex;
  flex-flow: row wrap;
  padding: 0.5em ;
/*   height: auto; */
	
}

.menucontainer > * {
  flex: 1 1 1em;
  font-size: 1rem;
}
.menu > label {
	margin-top: 0.5em;
	color: var(--bkgdColour);
}
.menu > label > img {	
	height: 1em;
	width: 1em;
}

.menu > label > span {
	visibility: hidden;
	height: 0em;
	width: 0em;
	padding-left: 2rem;
}

.menu > input {
 visibility: hidden;
 position: absolute;
 top: -100em;
 left: -100em;
}

input#menuReveal ~ div{	
	visibility: visible;
	height: auto;
}

input#menuReveal:not(:checked) ~ div{
	visibility: visible;
	height: auto;
}

input#menuReveal:not(:checked) ~ label > span.menuTextMenu{
	visibility: hidden;
}


@media (max-width: 65rem){
	.menu, .menucontainer {
		flex-flow: column wrap;
	}
	input#menuReveal ~ div{	
		visibility: hidden;
		height: 0em;
	}
	.menucontainer > * {
	  flex: 1 1 1em;
	  font-size: 2.27rem;
	}
	.menu > label > img {
		height: 3rem;
		width: 3rem;
	}
	.menu > label > span {
		visibility: visible;
		font-size: 2.72rem;
	}	
}

#footer {
	border-left: 0.25em solid var(--borderColour);
	border-bottom: 0.25em solid var(--borderColour);
	padding-bottom: 0.5em;	
	background-color: var(--borderHighlight);
}
#footer   .menu, #footer  .menucontainer  {
	flex-flow: column wrap;
	align-items: center;
}

#footer  span{
	visibility: hidden;
}

#footer label, .contactContent + div {
	align-self: center;
}

#footer span {
	position: absolute;
	top: -100em;
	left: -100em;
}
#footer img {
	display: block;
	margin-left: auto;
	margin-right:auto;
}
#footer .menu {
	align-self: center;
}
input#menuRevealcontactUs ~ div{	
	visibility: collapse;
	height: 0em;
}


input#menuRevealcontactUs:not(:checked) ~ div{
	visibility: visible;
	height: auto;
}

input#menuRevealcontactUs:not(:checked) ~ label > span.menuTextMenu{
	visibility: hidden;
}


	
div.menu div a,  a>div {
	color: #F0F8FF;
	text-decoration: underline;

}

div.menuactive {
	color: var(--colourDeactive);
}



.pictureContainer {
	display: flex;
	flex-flow: column wrap;
	
}

.pictureContainer > * {
	flex: 1 1 30em;
	
}


.pictureContainer img {
	width: 100%;
}



.hiddenContainertrickleFromCenter {
	width: 16em;
	height: 1em;
  	position: absolute;
  	top: 10em;
  	left: 11em;  	
}


.main {
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 5em;
	align-items: center;
}



.main > * {
  padding: 1em;
  text-align: justify;
  flex: 1 1 18ch;
}

.main li {
  text-align: left;
  
}



.main > h1{
  padding: 0.5em;
  border: none;
  background-image: none;
  min-height: 2em;
  text-align: left;
  animation-name: trickleOpacity;
  animation-duration: 5s;
  text-align: left;
}

.main>:nth-child(even) {
	flex: 3 1 30rem;
/* 	line-height: 1.4em; */
}

.main>:nth-child(odd) {
	flex: 1 1 24rem;
}

.main>*:first-child {
    align-self: flex-start;
}

.main>:nth-child(odd)>:nth-child(1) {
	padding: 1em;
	padding-bottom: 0.5em;
  border-left: solid 0.25em var(--borderColour);
  background-image: linear-gradient(90deg, var(--borderColour), var(--borderColour));
  background-size: 2em 0.25em;
  background-repeat: no-repeat;
  background-position:  0em 100%;
  min-height: 2em;
  text-align: left;
  animation-name: trickleOpacity;
  animation-duration: 5s;
}


ul {
	list-style: none;
}

li  {
	margin-left: -2em;
}

.contact, .contactContent {
	color: var(--bkgdColour);
	background: var(--borderHighlight);
	display: flex;
	flex-flow: wrap;
	align-content: space-around;
	align-items: flex-end;
	padding: 1em;
}


.contact > *, .contactContent > * {
	flex: 1 1 12em;
	color: var(--bkgdColour);
}



.contactContent > div a {
	font-size: 2rem;
	color: var(--bkgdColour);
}

.contact>div {
	display: flex;
}

.contactDescription{
	font-size: 1.2rem;
	color: var(--colourDeactive);
}




.width1em{
	position: relative;
	top: 0;
	left: 0;
	width: 2em;
	height: 2px;
	border-top: 5px red solid;
}

.width1em + h1 {
	position: relative;
	top: -100%;
	left: 0;
}

@media screen and (orientation: landscape){
	
	body {
		padding: 0 2em 10em 2em;
	}	
}
.imageContainer{
	
	text-align: center; 
}
img {
	max-width: 50%; 
}