@font-face {
   font-family: MrsEavSmaCap;
   src: url("MrsEavSmaCap.ttf");
}

body {
/* no browser horizontal scroll ... vertical still works */
   overflow-x: hidden; 
   overflow: hidden; /* for splash make it static 100% cover */
   overscroll-behavior-y: none;
   font: "MrsEavSmaCap";
}

#vid_splash {
   transform: translate(-50%, -50%);        
   position: absolute;
   min-width: 100%;
   min-height: 100%;
   top: 50%;
   left: 50%;
   z-index: 1;
}

#banner {
   text-align: center;
   position: relative;
   z-index: 2;
   padding: 1%; /* top margin */
}

#banner img {
   width: 40vw;
}

#footer {
   position: absolute;
   bottom: 3%;
   z-index: 3;
   text-align: center;
/*
   -webkit-text-stroke: 1px black;
*/
   color: white;		/* font color */
}

#title {
   font: 7vw/7vw "MrsEavSmaCap";
}

#address {
   font: 2.8vw/3.5vw "MrsEavSmaCap";
}

#tagline {
   font: 3vw/3.5vw "MrsEavSmaCap";
}

#footer {
   width: 100vw;
   text-align: center;
}

#footer img {
   width: 4vw;
}


/* SMALL cellphone */
@media (max-width: 768px) {
   #banner img { 
      width: 70vw;
   }
   #footer img {
      width: 8vw;
   }
   #title {
      font: 12vw/12vw "MrsEavSmaCap";
   }
 
   #address {
      font: 5vw/5vw "MrsEavSmaCap";
   }
 
   #tagline {
      font: 5vw/5vw "MrsEavSmaCap";
   }
}

/* MEDIUM desktop */
@media (min-width: 1024px) {
   #banner img {
      width: 30vw;
   }
}

/* LARGE desktop */
@media (min-width: 1278px) {
   #banner img {
      width: 30vw;
   }
   #footer img {
      width: 3vw;
   }
   #title {
      font: 5vw/5vw "MrsEavSmaCap";
   }
 
   #address {
      font: 2vw/2.4vw "MrsEavSmaCap";
   }

   #tagline {
      font: 2vw/2vw "MrsEavSmaCap";
   }
}

/* SMALL cellphone -- rotated landscape -- make two columns */
@media (max-width: 768px) and (orientation: landscape) {
   /* same as SMALL cellphone -- make two columns */
      #banner {
         float: left;
         top: 10%;
      }
      #banner img {
         width: 30vw;
      }
      #footer {
         bottom: 5%;
         right: 5%;
         width: 85vw;
         float: right;
      }
      #title {
         text-align: right;
         font: 6vw/6vw "MrsEavSmaCap";
      }
      #address {
         text-align: right;
         font: 2.5vw/3vw "MrsEavSmaCap";
      }
      #tagline {
         text-align: right;
         font: 2.5vw/3vw "MrsEavSmaCap";
      }
      #footer img {
         text-align: right;
      }
      #icons {
         float: right;
      }
}

/* SMALL cellphone -- make two columns */
@media (768px <= width <= 1280px) {
   @media (360px <= height <= 600px) {
      #banner {
         float: left;
         top: 10%;
      }
      #banner img {
         width: 30vw;
      }
      #footer {
         bottom: 5%;
         right: 5%;
         width: 85vw;
         float: right;
      }
      #title {
         text-align: right;
         font: 6vw/6vw "MrsEavSmaCap";
      }
      #address {
         text-align: right;
         font: 2.5vw/3vw "MrsEavSmaCap";
      }
      #tagline {
         text-align: right;
         font: 2.5vw/3vw "MrsEavSmaCap";
      }
      #footer img {
         text-align: right;
      }
      #icons {
         float: right;
      }
   }
}