:root
{
   --Brown: #623d20;
   --Copper: #d15f16;
   --RichBlack: #010203;
}
@media screen and (orientation: landscape)
{
   .FloatLeft{width: 33%;}
   .FloatRight{width: 33%;}
   .SectionImage{width: 25%;}
   #MapArea{width: 33%;height: auto;margin-left: 33%;}
}
@media screen and (orientation: portrait)
{
   .FloatLeft{width: 50%;}
   .FloatRight{width: 50%;}
   .SectionImage{width: 40%;}
   #MapArea{width: 50%;height: auto;margin-left: 25%;}
}
@media (min-width:768px){body{font-size:1rem;}button,a.button{font-size:1rem;padding:0.5em 1em;}}
@media (min-width:1024px){h1{font-size:2rem;}h2{font-size:1.75rem;}h3{font-size:1.5rem;}}
@keyframes WebRise
{
   0%{transform:scale(0.5) translateY(100%) rotate(-2deg);opacity:0;}
   60%{transform:scale(1.05) translateY(-10%) rotate(0deg);opacity:1;}
   100%{transform:scale(1) translateY(0);opacity:1;}
}
*{box-sizing: border-box;text-align: center;}
a{color: darkblue;white-space: pre-wrap;}
body{color: var(--RichBlack);font-family: Arial, Helvetica, sans-serif;}
button,
a.button{font-size: 1.125rem;padding: 0.75em 1.25em;min-height: 3rem;}
form{background-color: var(--LogoBlue);text-align: left;padding: 1em;}
h1{color: var(--Copper);}
h2{color: var(--Brown);}
h3{color: var(--RichBlack);}
img{width: 100%;}
img.Icon{height: 32px;width: auto;}
input{margin: 0.25em;}
input[type=textarea]{width: 100%;height: 20em;}
li{text-align: left;padding: 0.5em;}
main{padding: 1em;}
nav{margin-top: 1em;padding: 1em;}
ol{text-align: left;margin-top: 1em;padding: 1em;}
p{text-align: left;}
ul{text-align: left;margin-top: 1em;}
.FloatLeft{float: left;margin-right: 1em;margin-bottom: 0;}
.FloatRight{float: right;margin-left: 1em;margin-bottom: 0;}
.FooterHeading{color: var(--RichBlack);}
.FooterLink{margin: 0.5em;white-space: nowrap;}
.SectionImage{float: right;margin-right: 2em;}
button.Tabs
{
   all: unset;
   display: inline-block;
   box-shadow: 0 0 0.25em var(--Brown);
   font-weight: bold;
   border-radius: 20%;
   background-color: var(--Brown);
   color: white;
   height: 3em;
   width: 23%;
   margin-left: 1%;
   margin-right: 1%;
}
#BannerLogo{width: 100%;}
#Banner
{
   animation-name: WebRise;
   animation-duration: 2.5s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
   transform-origin: center bottom;
   position: relative;
   z-index: 2;
}
#Bridge{background-image: url(https://webblaw.ca/Images/BridgeFaded.png);}
#Derricks{background-image: url(https://webblaw.ca/Images/DVDerricksFaded.png);}
#TabBar{width: 100%;}
[aria-selected='true']{color: var(--Brown);background-color: white;box-shadow: 0 0 0.4em white;}