@font-face {
 font-family: 'Amble';
  src: url('../fonts/Amble-Bold.woff2') format('woff2'),
  url('../fonts/Amble-Bold.woff') format('woff');
  font-weight:normal;
 font-style: normal;
 font-display: swap;
  
}
/*mobile first display*/
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.tip {
  position: relative;
}

.tip:before {
  /* initially hide */
  visibility: hidden;
  
  
  /* add a delay to any changes to the visibility property */
  transition-property: visibility;
  transition-delay: 0.2s;
  
  /* get the text to display in the tooltip */
  content: attr(aria-label);

  /* add some styling */
  padding: 2px 8px;
  background: #195f06;
  color: #fff;
  border-radius: 3px;
  white-space: nowrap;

  /* position it below the parent element */
  position: absolute;
  top: 100%;
  
  /* center it horizontally below the parent element */
  left: 52%;
  transform: translateX(-50%);
}

/* show tooltip on hover and when it receives focus */
.tip:hover:before,
.tip:focus:before{
  visibility: visible
}

img{
max-width: 95%;
}
video,embed{
 max-width: 95%;
float: left;
}

figcaption {
  background-color: white;
  color:black;
  font-style: italic;
  word-wrap: break-word;
  height: auto;
   width: fit-content;
}  
 
h1{
  text-align: center ;
  color: #ffffff; 
  font-size: x-large;
letter-spacing: 2px;
 line-height: 2em;
padding: 5px;
margin-top:30px;
font-family:Amble;
}
h2,h3{
text-align: center ; 
font-family:Amble;
}
header{
border:solid;
background-color:#0d293a;
color: #f2f7fa;
border-bottom: 1px solid #0d0d0d;
margin:0;
padding:5px;
text-align: center;
}

footer{
 background-color:#fbc57b;
color:#f5fbfc;
text-align:left;
border-bottom: 2px solid #0d0d0d;
}
section,article{
padding:10px;
border-left:solid 1px black;
border-right:solid 1px black;
}
footer a{
color:white;
text-decoration:none;
padding: 1px,5px, 1px 5px;
display: block;
}
footer a:hover{
color: whitesmoke;
}
.callout{
float: left;
background-color: darkolivegreen;
color: white;
width:60%;
margin: 2%;
}
nav ul {
font-family:Arial,Helvetica;
}

nav ul li{
  position: relative;
  list-style-type: none;
}

nav ul li a{
width: 100%;
display:block;
text-align: center;
color: #49e644;
background-color: #0b490b;
list-style-type :none;
text-decoration: none;
padding: 10px;
border-bottom: solid 1px black;
cursor: pointer;
}
/*hidden dropdown menue*/
ul>li>ul{
display: none;
position: absolute;
z-index: 1;
width:50%;
}
/*The reveal dropdown menue when parent list item is hovered over*/
ul>li:hover> ul{
display: block;
width:30;
background-color: darkgreen;
}
/*mobile default flex for columns*/
#column-layout{
  display: flex;
  flex-wrap:wrap;
}
.logo{
float: left;
clear: both;
position: relative;
height:fit-content;
}
.floatleft {border: 3px solid green;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 768px) {
nav ul {
  display: flex;
  }
nav ul li
  {
  align-items: stretch;
  width:100%;
  }
nav ul li a {  
  padding:.5em 1em;
}
ul > li:hover > ul {
  width:100%;
}
  ul>li>ul>li>a {
background-color:#0b490b;
 color:#49e644;
}
section, article{
 flex: 1 1 369px;
 }
}
@media screen and (min-width: 992px) {
  section, article{
 flex: 1 1 290px;
 }



body {
  width: 99%;
 padding-bottom: 2px;
 margin: auto;
 background-color: #edeee1;
color: black;
 font-family:Amble;
 font-size: large;
}

footer{
 background-color:#fbc57b;
color:#f5fbfc;
text-align:left;
border-bottom: 2px solid #0d0d0d;
}
aside {
 background-color: #07571d;
  float: Left;
  color: #eee;
  margin: 5px;
  padding:5px;
  font-size: medium;
  font-style: italic;
  }
/* Container */
.container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  background-color: #f6f6e6;
  padding: 10px;

}

.floatLeft {
  float: left;
  margin: 10px;
}
.floatRight {
  float: right;
  margin: 10px;
}

section {
  background-color: #f8f5ea;
  border-bottom: 1px solid #0f0f0f;
  padding: 10px;
}
.parent {
  display: flex;
}
.content-box {
  box-sizing: content-box;}
.dev{
  width: 80%;
  margin: auto;
  background-color: #ccc;
  height: 500px;
  padding: 24px;
}
.left {
  background-color: white;
  width: 44%;
  height: 71%;
  float: left;
}
.right {
  background-color: white;
  width: 44%;
  height: 71%;
  float: right;
} 
  
.a1 {
  background-color:#f8f5ea;
  flex: 35%;
  text-align: justify;
  font-weight: lighter;
  border: solid #060606 1px;
}
/*article two*/
.a2 {
  background-color: #f8f5ea;
  flex: 35%;
  text-align: justify;
  font-weight: lighter;
border: solid #060606 1px;
}
.a3 {
  background-color: #f8f5ea;
  flex:27%;
  text-align: justify;
  font-weight: lighter;
border: solid #060606 1px;
}
}
  @media screen and (min-width: 768px){
.menu-area ul{
 flex-direction: row;
}
 .dropdown-1 {
  flex-wrap:wrap;
  width:100%;
}
}