/*   bascics   */

:root{
    --main-bg-color:#f1f7fa;
    --main-sec-color:#c3d0d6;
    --head-bg-color: #edf8fd;
    --mous-ovr-color:#800000;
    --main-blu-color: darkblue;
}

/*
var(--main-bg-color)
var(--mous-ovr-color)
var(--main-blu-color)
var(--sec-bg-color)
*/

*{
    margin: 10;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
  } 

  body {
    height: 100vh;
    width: 100vw;
  }
  
  
@media screen and (max-device-width:450px) {
    html { 
      font-size: 27px;
  }
}

@media screen and (min-device-width:451px) {
  html { 
    font-size: 20px;
}
}

.container{
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  height: 100vh;
  margin-bottom: 0px;

}

  /*   Page Header   */

.header{
    box-sizing: border-box;
    display: block;
    position: relative;
    width: 100vw;
    min-width: 350px;
    background-color: var(--head-bg-color);
    border: solid 1px var(--main-blu-color);

}

#banner_07_jpg0{
    max-width: 80vw;
    min-width: 250px;
    margin: 4px 0 5% 0 ;
}

.date {
    box-sizing: border-box;
    display: inline;
    position: absolute;
    max-width: 75vw;
    top: 68%;
    left: 20px;
    margin: 0;
    padding: 0;
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 1.0rem;
    text-align: left;
    color: var(--mous-ovr-color);
  
}

.miniHeader{
  box-sizing: border-box;
  display: block;
  position: relative;
  width: 66vw;
  height: 100px;
  background-color: var(--head-bg-color);
  border: solid 1px var(--main-blu-color);

}

/*   navigation   */


.navtop{    
    background-color: var(--main-bg-color);

}

.fpnavpad{
  box-sizing: border-box;
  width: 40px;
  background-color: var(--main-bg-color);
}

.navtop ul{
  width: 90vw;
    justify-content: center;
    white-space: nowrap;
    list-style: none;
    margin: 0 0 1px 42px;
    padding: 2px 0 0 0;
   }

  .navtop li{
    display: inline-block;
    width: 23%;
    text-align: center;
  
}

.navtop li a{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.6rem;
    text-decoration: none;
    color: black;
    
  }
  
  .navtop li a:hover{
    display: block;
    font-weight: bold;
    color: var(--mous-ovr-color);
    background-color: var(--main-sec-color);

  }

  .navtop-left{
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--mous-ovr-color);
    background-color: var(--main-sec-color);

  }

  .navtop-mid{
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--mous-ovr-color);
    background-color: var(--main-sec-color);
  
  }

  .banner{
    width: 100%;
    min-width: 250px;
    margin: 0 0 0 0 ;
  }

  /*   naratives   */

  .fparticle H1{
    color: #000000; 
    Font-Family: Verdana, Lucida, Sans-Serif;
    Font-Size: 1.3rem;
    margin: 0px;
    padding: 0 0 2px 0;

}

.fparticle P{
    color: #000000; 
    Font-Family: Verdana, Lucida, Sans-Serif;
    Font-Size: 1.2rem;

}

#bluArrow{
  height: auto;
  width: 4.0%;
}

#grnArrow{
  height: auto;
  width: 2.0%;
}

.fparticle A{
    text-decoration: none;
}

.fparticle A:hover{
    text-decoration: underline;

}

.col1{
  box-sizing: border-box;
  position: relative;
  width: 100vw;
  background-color: var(--main-bg-color);
  margin: 2px 0 3px 0;
  padding: 5px;
  
}

.col2{
  box-sizing: border-box;
  position: relative;
  width: 100vw;
  background-color: var(--main-bg-color);
  margin: 2px 0 3px 0;
  padding: 5px;
}

.sidebar{
  box-sizing:border-box;
  position:relative;
  top: -5px;
}

.sbar01{
  display: block;
  visibility: hidden;
  height: 0px;
}

.sbar02{
  width: 98vw;
  min-height: 110px;
  margin: 2px 3px 3px 3px;
  background-color:  var(--main-bg-color);
  border: 1px solid var(--main-blu-color);

}

.sbar02pic{
  float: left;
  margin:5px 5px 5px 5px;
  padding: 1;
  border: 1px solid var(--main-blu-color);

}

.sbar02 H2{
  color: #000000; 
  Font-Family: Verdana, Lucida, Sans-Serif;
  Font-Size: 0.9rem;
  margin: 0px;
  padding: 5px;

}

.sbar02 P{
  color: #000000; 
  Font-Family: Verdana, Lucida, Sans-Serif;
  Font-Size: 0.9rem;
  padding: 2px;

}

.sidebar A{
  display: block;   
  Font-Family: Verdana, Lucida, Sans-Serif;
  Font-Size: 0.9rem;
  text-decoration: none;
  margin-bottom: 10px;
  padding: 10px;
  text-align: center;
}

.sidebar A:hover{
  Font-Family: Verdana, Lucida, Sans-Serif;
  Font-Weight: bold;
  color: var(--mous-ovr-color);
}

  /*   Page Styles   */

  .efparticle{
    box-sizing: border-box;
    position: absolute;
    top: 170px;
    /*top: 9vh;*/
    margin: 0 0 0 3px;
    width: 97vw;
  }

  .efparticle A{
    text-decoration: none;
}

.ptext01{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.3rem;
  margin: 0px;
}

  .efparticle A:hover{
    text-decoration: underline;

}

  .picind{
    float: left;
    width: "100px"; 
    height: "100px";
    margin: 0;
    padding: 0 10px 0px 0px;
  }


/*   footer   */

.foot{
  position: fixed;
  bottom: 0px;
  left: 0px;
  max-width: 100vw;
  min-width: 350px;
  Color: var(--main-blu-color);
  height: 80px;  
  /*line-height: 20px;*/
  border-top: 1px solid var(--main-blu-color);
  margin-top: 3px;
  padding: 0px;

}

.ftli1{
  background-color: var(--main-bg-color);
  margin: 2px 0 0 0;
  padding: 5px 0 5px 0;
  width: 100vw;
}

.ftli1 UL{
  width: 100vw;
  min-width: 300px;
  list-style: none;
  justify-content: center;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  
}

.ftli1 LI{
  display: inline-block;
  width: 33%;
  Font-Family: Arial, Helvetica, Sans-Serif;
  Font-Size: 0.9rem;
  text-align: center;
  vertical-align: middle;

}

.foot A{
  Color: var(--main-blu-color);
  Font-Family: Arial, Helvetica, Sans-Serif;
  font-size: 0.9rem;
  text-decoration: none;
  font-weight: bold;
}

.foot A:hover{
  Color: var(--main-blu-color);
  text-decoration: underline;
}

.ftli2{
  display: block;
  white-space: nowrap;
  background-color: var(--main-bg-color);
  text-align: center;
  Color: var(--main-blu-color);  
  Font-Size: 0.9rem;
  margin: 2px 0 0 0;
  padding: 5px 0 12px 0;
  width: 100vw;

}

.ftli2 P{
  Font-Family: Arial, Helvetica, Sans-Serif;
  Font-Size: 0.8rem;
  margin: 0;
}

/*    Cookie overlay   */

.overlay{
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-content: space-around;
  background-color: rgb(205, 224, 184);
  width: 90vw;
  min-width: 290px;
  height: 90vh;
  border: 1px solid green;
  margin: 0;
  padding: 0;
  top: 5%;
  left: 5%; 
  opacity: 0.85;
  transform: translate(0); 
  transition: 0.1s linear;
}

.overlay.hide{
  display: block;
  visibility: hidden;
  flex-wrap: nowrap;
  justify-content: space-around;
  position: absolute;
  box-sizing: border-box;
  background-color: cornsilk;
  width: 90vw;
  height: 60vh;
  margin: 0;
  padding: 0;
  left: 5%; 
  transform: translatey(100%);
  transition: 0.1s linear;

}

.overlay p{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.4rem;
  line-height: 135%;
  text-justify: center;
  padding: 40px 10px 10px 10px;
  opacity: 1.0;
}

.overlay ul{
  display: flex;
  align-content: space-around;
  list-style: none;
  position: absolute;
  top: 40%;
  width: 65vw;
  min-width: 275px;
  left: 15%;
  margin: 0px;

}

.overlay li{
  display: inline-block;
  width: 27%;
  margin: 4%;
  cursor: pointer;
  opacity: 1.0;

 }
 
.overlay a{
  display: block;
  line-height: 75px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.4rem;
  color: blue;
  text-decoration: none;
  text-align: center;
  background-color: rgb(159, 199, 118);
  border: 1px solid black;
}

.overlay a:hover{
  font-weight: bold;
  color: red;
  background-color: cornsilk;
}

/* Hamburger */

.mcdo{
  box-sizing: border-box;
  width: 50px;
  min-height: 39px;
  position: relative;
  float: left;
  cursor: pointer;
  transition: all .1s;
  background-color: var(--main-bg-color);
      
}

.burgerButn{
  content:'';
  display: block;
  position: absolute;
  height: 3px;
  width: 60%;
  background: #060249;
  border-radius: 20px;
  left: 15px;
  top: 20px;
  transition: all .1s;

}

.burgerButn::before {
  content: '';
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #060249;
  border-radius: 20px;
  left: 0;
  top: -8px;
  transition: all .5s;
  
}

.burgerButn::after {
  content: '';
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #060249;
  border-radius: 20px;
  left: 0;
  top: 8px;
  transition: all .5s;
}

/* ANIMATION */

.mcdo.open .burgerButn {
  background: transparent;

}

.mcdo.open .burgerButn::before {
  transform: rotate(45deg) translate(6px, 6px);
}

.mcdo.open .burgerButn::after {
  transform: rotate(-45deg) translate(5px, -5px);
}

/*Panel*/

.panel {
  display: block;
  position: relative;
  box-sizing: border-box;   
  top: 0px;
  width: 360px;
  height: 510px;
  margin-top: 3px;
  background: var(--main-bg-color);  
  transform: translate(-100%);
  opacity: 0;
  transition: 0.3s linear;    
}

.panel.right {
  display: block;
  position: relative;
  box-sizing: border-box;
  top: 0px;
  width: 360px;
  height: 510px;
  margin-top: 3px;
  background: var(--main-bg-color);  
  transform: translate(0); 
  opacity: 1;
  transition: 0.3s linear;    
  z-index: 100;
  }

.panel ul{
  list-style: none;
  position: absolute;
  padding: 0;
  margin: 0px;

}

.panel li{
  line-height: 60px;
  width: 360px;
  border-bottom: solid 1px rgb(34, 3, 63);

 }

 .panelli P{
   display: block;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1.3rem;
   font-weight: bold;
   color: var(--mous-ovr-color);
   background: rgb(202, 200, 200);
   border-bottom: solid 1px rgb(34, 3, 63);
   padding-left: 10px;
   margin: 0px;
 }

.panel a{
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.3rem;
  color: rgb(34, 3, 63);
  text-decoration: none;
  padding-left: 10px;

}

.panel a:hover{
  font-weight: bold;
  color: var(--mous-ovr-color);
  text-decoration: none;
  background-color: rgb(202, 200, 200);

}

/*   address formats   */

.address{
  position: relative;
  display: block;
  margin: 0px; 
  text-align: center;
}

.de{
  position: absolute;
  top: 40px;  
  left: 0;
  width: 60vw;
  margin-left: 20vw;
  padding: 0px 0 50px 0px;
  background-color: var(--main-bg-color);

}

.fr{
  position: absolute;
  top: 400px;  
  left: 0;
  width: 60vw;
  margin-left: 20vw;
  padding: 0px 0 50px 0px;
  background-color: var(--main-bg-color);

}

.address UL{
  list-style: none;
  margin: 0;
}

.address LI{
  display: block;
  font-size: 1.0rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.0em;
}

.s2 LI{
  font-size: 1.0rem;
  font-weight: normal;
  line-height: 1.0em;
}

.address A{
  font-size: 1.0rem;
  text-decoration: none;
  color: var(--main-blu-color);
}

.address A:hover{
   text-decoration: underline;
}

.s1 LI{
  display: block;
  height: 30px;
  padding-top: 5px;
  background-color:var(--main-blu-color);
  font-weight: bold;
  font-size: 1.1rem;
  color: white;
}

.s2{
  display: block;
  height: 25px;
  padding: 3px;
}

/*   site map   */

.bannersm{
  height: 80%;
  width: 100vw;
}

.col1{
  background-color: var(--main-bg-color);
  width: 100vw;
  
}

.col1 H1{
  font-size: 0.9rem;
}

.col1 UL{
  list-style: none;
  justify-content: center;
}

.col1 LI{
  display: inline-block;
  white-space: nowrap;
  line-height: 1rem;
  width: 30%;
  font-size: 1.2rem;
  text-align: center;
  margin: 7px;
  padding: 5px;

}


.col1 A{
  font-size: 1.1rem;
  padding: 0.5rem;
  text-decoration: none;
  color: var(--main-blu-color);
}


.col2{
  background-color:var(--main-bg-color);
  margin-top: 10px;
  padding: 10px;
}

.col2 H1{
  font-size: 0.9rem;
}

.col2 UL{
  list-style: none;
  justify-content: center;
}

.col2 LI{
  display: inline-block;
  white-space: nowrap;
  line-height: 1rem;
  width: 30%;
  font-size: 1.2rem;
  text-align: center;
  margin: 7px;
  padding: 5px;

}

.col2 A{
  font-size: 1.1rem;
  padding: 0.5rem;
  text-decoration: none;
  color: var(--main-blu-color);
}


/*   service level formats   */

.serviceTabs{
  position: absolute;
  top: 16vh;
}
.serviceTabs H1{
  display: block;
  height: 30px;
  padding: 4px;
  font-size: 0.9rem;
  font-weight: bold;
  color: white;
  background-color: var(--main-blu-color);

}

.serviceTabs UL{
  display: block;
  list-style-image: url('/aMedia/arrowYel.png');
  border-bottom: 1px solid #c0c0c0;
    
}

.serviceTabs P{
  font: ariel;
  font-size: 0.9rem;
  height: auto;
  margin: 0px 0 10px 0px;
  padding: 5px;
  border-bottom: 1px solid #C0C0C0;
}

.serviceTabs LI{
  font: ariel;
  font-size: 0.9rem;
  height: auto;
  margin: 0px 0 10px 40px;
  padding:5px;

}

.level1{
  position: relative;
  top: 0px;
  width: 95vw;
}

.level1 P{
  display: block;
  width: 95vw;
  background-color:var(--main-bg-color);
  
}

.level1fr{
  position: relative;
  top: 0px;
  width: 95vw;
}

.level1fr P{
  display: block;
  width: 95vw;
  background-color:var(--main-bg-color);
  
}

.level2{
  position: relative;
  top: 0vh;
  width: 95vw;

}

.level2 P{
  display: block;
  width: 95vw;
  background-color:var(--main-bg-color);

}

.level2fr P{
  position: relative;
  top: 0vh;
  width: 95vw;

}


.level3{
  position: relative;
  top: 0vh;
  width: 95vw;
}

.level3 P{
  display: block;
  width: 95vw;
  background-color:var(--main-bg-color);
}

.level3fr{
  position: relative;
  top: 0vh;
  width: 95vw;
}

.level3fr P{
  display: block;
  width: 95vw;
  background-color:var(--main-bg-color);
}

/*   button close   */


.closeIt{
  position: absolute;
  width: 90px;
  height: 23px;
  top: 19%;
  left: 300px;
  color:var(--mous-ovr-color);
  background-color: var(--main-bg-color);
  font-size: 12pt;
  font-weight: normal;
  border: 1px solid var(--main-blu-color);
  border-radius: 5px;
}

.closeIt:hover{
  font-weight: bold;
  background: #c0c0c0;
  cursor: pointer;
}

.notes{
  font-size: 0.9rem;
  margin: 4px;
  padding: 2px;
}

.notes A{
  font-size: 0.9rem;
  text-decoration: none;
}

.notesMini{
  display: block;
  width: 60vw;
  margin-left: 10px;
  padding-bottom: 40px;
  padding: 12px;

}

.notesMini P{  
  Font-Family: Verdana, Lucida, Sans-Serif;
  Font-Size: 1.2rem;
  line-height: 110%;
}

.closeIt2{
  position: absolute;
  width: 180px;
  height: 110px;
  left: 300px;
  color:var(--mous-ovr-color);
  background-color: var(--main-bg-color);
  font-size: 1.5rem;
  font-weight: normal;
  border: 1px solid var(--main-blu-color);
  border-radius: 5px;
}

.closeIt2:hover{
  font-weight: bold;
  background: #c0c0c0;
  cursor: pointer;
}