@font-face {
  font-family: 'ChantelliAntiqua';
  src: url( ../fonts/ChantelliAntiqua.woff) format( 'woff' );
  font-weight: normal;
  font-style: normal;
 }

html {
    box-sizing: border-box;
 }

*, *::before, *::after {
    box-sizing: inherit;
 }

body {
    background-color: #f0f0f0;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
    color: #333;
 }

#container {
    position: relative;
    max-width: 50em;
    padding: 0 1em 4em 1em;
    margin: auto; 
    border: 0.062em solid #999;
    border-radius: 1em;
    background-color: #fff;
    box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.3 );
    overflow: hidden;
 }

#header {
    margin: 0;
    padding: 1.5em 0 0.25em;
    font-size: 4em;
    font-weight: normal;  
    background-image: url(../images/headersm.png);
    background-size: 1.969em 0.516em;
    background-repeat: no-repeat; 
    background-position: 0.06em 0.78em;
    overflow: hidden;
 }

#header a {
    display: inline-block;
    margin-bottom: 0.3em;
    color: #000;
    text-decoration: none;
 }

#header #name {
    display:block;
 }

#header a span {
   color: #777;
 }

#header #def {
    float: left;
    padding-right: 0.4em;
    margin-left: 0.25em;
    border-top: 0.25em solid #777;
    border-right: 0.25em solid transparent;
    font-size: 0.36em;
 }

#menu {
    padding: 0;
    margin: 0.5em 0;
    list-style: none;
    text-align: center;
 }

#menu li {
    display: inline-block;
    font-size: 1.25em;
    margin: 0 0.8em;
 }

#menu a {
    display: block;
    padding: 0.2em 0.4em;
    color: #333;
 }

.current {
    padding: 0.2em 0.4em;
    color: #565656;
 }

p {
    margin-left: 0.25em;
 }

p span {
    display: block;
    padding: 0.5em 1em;
    font-size: 1em;
    font-weight: bold;  
 }

p span a {
    font-weight: normal;
    color: #00c; 
 }

#wow {
    margin-top: 3em;
    font-family: ChantelliAntiqua ;
    font-size: 1.25em;
    font-style: oblique;
 }

#wow span {
    display: inline;
    padding: 0 0.25em;
    font-weight: bold;
    color: #a20000;
}

#quote {
    display: flex;
    justify-content: space-around;
    margin-left: 0.25em; 
	margin-top: 2em;
    font-size: 1.1em;
    font-weight: bold;
    font-style: oblique;
    color: #060406;
 }

#quote a {
    margin: 0 1em; 
 }
  
#services a {
    color: #00c;
 }

.testimonial {
    padding: 1em;
    margin: 0.5em;
    border: 1px solid #999;
    border-radius: 0.75em;
    background-color: #eef;
    box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.4 );
 }

#video-services li::marker {
  color: #c00 
 }

#video-services a {
    text-decoration: none;
    color: #333;
 }

 #video-services a:hover {
    color: #c00;
 }
 
.testimonial p:last-of-type {
    font-size: 0.9em;
    word-break: break-all;
 }

 /**********************404*********************/

 .error, #error-404 {
    text-align: center;
 }

#error-404 a {
    display: inline-block;
    margin-top: 1em;
    font-size: 1.5em;
    color: #000;
 }

/**********************form*********************/

#contactForm {
    margin: 1em;
 }

#contactForm div {
    margin: 0.75em 0;
 }

#contactForm label {
    display: inline-block;
    width: 8em;
    font-weight:bold;
 }

#contactForm input[type="text"],
#contactForm input[type="email"],
#contactForm select,
#contactForm textarea,
#contactForm input[type="submit"]{
    display: inline-block;
    width: 100%;
    max-width: 20em;
    border: 1px solid #999;
    font-family: inherit;
    font-size: 1em;

 }


#contactForm input[type="submit"] {
    width: auto;
    padding: 0.25em 0.8em;
    background-color:#080;
    border:0;
    border-radius: 0.75em;
    font-size: 1em;
    color:#fff;
 }

#last-link {
    position: absolute; 
    bottom: 1em; 
    left: 1em;

 }
#covid-19 h2 { 
    font-size: 1em;
 }
 
#covid-19 h2:first-of-type {
    font-size: 1.5em;
    color: #f00;
    text-align: center;
 }
 
#covid-19 h2:first-of-type span {
    display: block;
    color: #000;
 }
 
#menu a[href="covid-19.php"] {
    /*font-weight: bold;*/
    color: #f00;
    letter-spacing: 1px;
    animation: glow 1.5s ease-in-out infinite;
 }
 
@keyframes glow {
   0% {  text-shadow: 0 0 1px rgba( 255, 0 , 0, 0 ); }
  50% {  text-shadow: 0 0 1px rgba( 255, 0 , 0, 1 ); }
 100% {  text-shadow: 0 0 1px rgba( 255, 0 , 0, 0 ); }
 }
/***********************************************/

@media ( max-width: 31.5em ) {
#quote {
    flex-wrap: wrap;
  }
  
#quote span {
    display: block;
	padding-bottom: 1em;
  }
 }

@media ( max-width: 22.5em ) {

#header {
    background-size: 1.98em 0.519em;
    background-position: 0.06em 0.87em;
    font-size: 3em;  
  }

#menu li {
   display: block;
  }

#wow {
    margin-top: 2em;
  }
 }
