/* 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");
}


/* default is for MOBILE */
 
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 {
   margin-top: 2vw;
   padding: 2%;
}

#the_quote_quote {
   font: 7vw/4vw "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;
   float: left;
   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;
   padding-right: 3vw;
}

#af_banner img {
   float: left;
   height: 9.5vw;
}

#af_banner_top {
   font: 11.6vw/8vw "MrsEavSmaCap";
}

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

#the_foot {
   font: 1.8vw/8vw "Optima";
   text-align: right;
   padding-top: 1vw;
   padding-right: 2vw;
}

#the_foot button {
   color: black;
   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.9); /* 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;
scrollbar-width: none;
}


/* CELLPHONE PORTRAIT sizing - door on top of door - NOT side-by-side */
@media (max-width: 768px) {
   #af_banner_top {
      font: 11.5vw/8vw "MrsEavSmaCap";
      float: right;
   }

   #the_quote_quote {
      padding-top: 3vw;
      font: 9vw/7vw "thedream";
   }
 
   #the_foot {
      font: 4vw/10vw "Optima";
      padding: 2v;
      text-align: right;
      padding-bottom: 4vw;
   }
 
   #the_foot_space {
      margin-right: 3.6vw;
      margin-left: 3.6vw;
   }
 
   #contact_us {
      display: inline;
      padding-right: 10vw;
   }
 
   #contact_us img {
      width: 5vw;
      vertical-align: middle;
   }
 
   .modal-content {
      font: 4.5vw/5.5vw "Optima";
   }
 
   #col1 {
      max-width: 98vw;
      margin: 2vw;
   }
   #col1_title {
      font: 6vw/6vw "Optima";
   }
   #col2 {
      max-width: 98vw;
      margin: 2vw;
   }
   #col2_title {
      font: 6vw/6vw "Optima";
   }
   #col3 {
      max-width: 98vw;
      margin: 2vw;
   }
   #col3_title {
      font: 6vw/6vw "Optima";
   }
}