/* serif */

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

@font-face {
   font-family: Baskerville;
   src: url("font-Baskerville.ttf"); /* fun a touch exotic */
}

@font-face {
   font-family: Times;
   src: url("font-Times_New_Roman.ttf"); /* safe boring */
}

/* san serif */
 
@font-face {
   font-family: Trebuchet;
   src: url("font-Trebuchet_MS.ttf"); /* safe boring */
}

@font-face {
   font-family: Optima;
   src: url("font-OptimaRegular.ttf"); /* simple and modern */
}

/* art-sy */

@font-face {
   font-family: thedream;
   src: url("font-thedream.woff");
}

 
html {
   margin: 0;
   padding: 1%; /* space around entire webpage */
}
 
body {
   max-width: 98%; /* 100% - 1% padding left - 1% padding right */
   margin-left: auto;
   margin-right: auto;
   position: absolute;
}

#page {
   max-width: 100%;
   float: left;
   text-align: center;
}

#the_quote {
   padding: 2%;
}

#the_quote_quote {
   font: 9vw/5vw "thedream";
}
#the_quote_author {
   font: 2vw/4vw "Optima";
   margin-right: 2vw;
   text-align: right
}

#col1 {
   margin-left: 1vw;  /* space between doors */
   float: left; /* put columns next to each other */
   border-radius: 2vw;
   overflow: hidden;
   max-width: 31vw; /* 1/3 of the page */
}
#col1 img {
   max-width: 100%;
}
#col1_title {
   padding: 1vw;
   background-color: black;
   color: white;
   font: 2vw/2vw "Optima";
}

#col2 {
   margin-left: 1vw;  /* space between doors */
   margin-right: 1vw;  /* space between doors */
   float: left; /* put columns next to each other */
   border-radius: 2vw;
   overflow: hidden;
   max-width: 31vw; /* 1/3 of the page */
} #col2 img {
   max-width: 100%;
}  
#col2_title {
   padding: 1vw;
   background-color: black;
   color: white;
   font: 2vw/2vw "Optima";
}

#col3 {
   margin-left: 1vw;  /* space between doors */
   border-radius: 2vw;
   overflow: hidden;
   max-width: 31vw; /* 1/3 of the page */
}
#col3 img {
   max-width: 100%;
} 
#col3_title {
   padding: 1vw;
   background-color: black;
   color: white;
   font: 2vw/2vw "Optima";
}

#af_banner {
   padding-top: 1vw;
   padding-bottom: 1vw;
   height: 15vw;
}

#af_banner img {
   float: left;
   height: 15vw;
   vertical-align: middle;
}

#af_banner_top {
   font: 10vw/10vw "MrsEavSmaCap";
}

#af_banner_bot {
   font: 2.5vw/1vw "Optima";
   margin-right: 5vw;
   text-align: right
}

#the_foot {
   padding-bottom: 2%;   
   font: 1.8vw/2.5vw "Optima";
   text-align: right;
   padding-right: 5vw;
}

#the_foot button {
   background: none;
   border: none;
}

#the_foot_space {
   display: inline;
   margin-right: 2vw;
   margin-left: 2vw;
}

#contact_us {
   float: right;
}

#contact_us img {
   width: 3vw;
}

#contact_us a {
   text-decoration: none;
}

/* ==================== */
.modal { /* shade entire screen */
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 100%; 
  height: 100%;
  max-height: 100%;
  overflow-y: auto; 
  overscroll-behavior: contain; 
  background-color: rgba(0,0,0,0.5);
}

.modal-content { /* all about the box and text */
   background-color: rgba(255, 255, 255, 0.8); /* Translucent white */
   margin-left: 5vw; /* the modal box */
   margin-top: 2vw; /* the modal box */
   padding-top: 2vw; /* text inside */
   padding-bottom: 2vw; /* text inside */
   padding-left: 5vw; /* text inside */
   padding-right: 5vw; /* text inside */
   width: 90%;
   border-radius: 2vw;
   text-align: left;
   position: relative;
   font: 1.8vw/2.5vw "Optima";
}

.close {
   position: absolute;
   top: 2vw;
   right: 2vw;
   cursor: pointer;
   color: white;
   font: 5vw/3vw "Times";
   font-weight: bold;
   border-radius: 10vw;
   border: 0.5vw solid black;
   background-color: black;
   overflow-y: none;
   overscroll-behavior: none;
}