/*******************************************************************************************************************************************/
/********************************************************************* VARIABLES ***********************************************************/
/*******************************************************************************************************************************************/
:root {
  /********************************************* Georgia Tech Branded Colors ****/
  /* Primary - Use the primary colors prominently and consistently in all branded materials. */
  --techGold: #B3A369; /* RGB: 179, 163, 105 */
  --navyBlue: #003057; /* RGB: 0, 48, 87 */
  --white: #FFF; /* RGB: 255, 255, 255 */    

  /* Accessible Tech Gold - When using Tech Gold for text on a website or other digital media, substitute Tech Medium Gold for large text and Tech Dark Gold for small bold text. */
  --techMediumGold: #A4925A; /* RGB: 164, 146, 90 - For use in large headline text in any digital media. */
  --techDarkGold: #857437; /* RGB: 133, 116, 55 - For use in small bold text in any digital media. */

  /* Secondary - Secondary colors offer variation and may be used as accents or solid blocks to complement the primary colors. */
  --grayMatter: #54585A; /* RGB: 84, 88, 90 - neutral dark gray */
  --piMile: #D6DBD4; /* RGB: 214, 219, 212 - light warm gray */
  --diploma: #F9F6E5; /* RGB: 249, 246, 229 - light ivory yellow */
  --buzzGold: #EAAA00; /* RGB: 234, 170, 0 */    

  /* Tertiary - These color standards maximize visibility and contrast on screens and should not be applied to print projects. */
  --brightBuzz: #FFCC00; /* RGB: 255, 204, 0 warm yellow */
  --brightHorizon: #FF640F; /* RGB: 255, 100, 15 - orange */


} 

/*******************************************************************************************************************************************/
/********************************************************************* RESPONSIVE GRID *****************************************************/
/*******************************************************************************************************************************************/
* { /**** Include padding and border in the total width and height od the elements ****/
  box-sizing: border-box;
}

body { /**** Set style of fonts for entire document ****/
  background: var(--white);
  color: var(--grayMatter);
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  margin: 0;
}

.grid-container { /**** Set up grid ****/
  display: grid;
  grid-template-areas:
    'marquis'
    'menu'
    'aboutus'
    'facts'
    'footer';
  background-color: white;
  gap: 1rem;  
}

/*================================== Grid Area = MARQUIS ==================================*/

.marquis {
  grid-area: marquis;
  /*text-align: center;*/
  background-color: var(--white);
  color:var(--techGold);
  margin: 0;
}

.marquis-topRow {
  font-family: "Roboto Slab", sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  background-color: var(--techGold);
  color: var(--white);
  padding-left: 20%;
}

.marquis-topRow img{
  height: 3.5rem;
}

.marquis-secondRow {
  font-family: "Roboto", sans-serif;
  font-size: 2rem;
  padding-left: 20%;
  color: var(--navyBlue);
}

.marquis-thirdRow {
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  padding-left: 20%;
  color: var(--navyBlue);
  font-style: italic;
}

.marquis-title {
  font-size: 2.5rem;
}

.marquis-tagline {
  font-size: 1.5rem;
}      

/*================================ Grid Area = MENU =======================================*/

.menu {
  grid-area: menu;
  padding-left: 20%;
  margin: 0;  
  }
  
.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--white);
}

.menu li {
  float: left;
  font-size: .75rem;
  border-right: 1px solid var(--techGold);
}

.menu li:last-of-type {
  border-right: 0;
}

.menu li a {
  display: block;
  color: var(--grayMatter);
  text-align: center;
  padding: 0 1rem;
  text-decoration: none;
  cursor: pointer;  
}

.menu li:hover {
  /*background-color: var(--piMile);*/
}

.menu-registerButton {
  font-weight: bold;
  color: var(--brightHorizon);

  animation-name: leftImgFade;
  animation-duration: 2s;
  animation-iteration-count: infinite;    
}
@keyframes leftImgFade {
  0% {color: var(--brightHorizon);}
  50% {color: var(--grayMatter);}
  100% {color: var(--brightHorizon);}
}

.menu {
  grid-area: menu;
  padding-left: 20%;
  margin: 0;  
  }
  
.menu tr {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--white);
}

.menu td {
  float: left;
  font-size: .75rem;
  border-right: 1px solid var(--techGold);
}

.menu td a {
  display: block;
  color: var(--grayMatter);
  text-align: center;
  padding: 0 1rem;
  text-decoration: none;
}

.menu td:hover {
}
*/

/*================================ Grid Area = ABOUTUS =======================================*/

.aboutus {
  grid-area: aboutus;
}

.aboutus-text{
  text-align: justify;
  margin: auto;
  margin-bottom: 1rem;
  width: 75%;
}

/*================================ Grid Area = SECTION =======================================*/

.section-title {
  font-size: 2rem;
  font-weight: bold;
  margin-top: 0rem;
  margin-bottom: 0rem;
  text-align: center;
  color: var(--grayMatter);
}

.sectionLine-top {
  width: 100%;
}

.sectionLine-top td {
  width: 33%;
  margin: 0;
  padding: 0;

}

.sectionLine-top .hr-side {
  display: inline-block;
  width: 25%;
  border-top: 0.20rem solid var(--grayMatter);
  margin: 0;
  padding: 0;
}

.sectionLine-top .hr-middle {
  display: inline-block;
  width: 100%;
  border-top: 0.20rem solid var(--techGold);
  margin: 0;
  padding: 0;
}

.section-tag {
  font-size: 1.5rem;
  font-weight: none;
  margin-top: 0rem;
  margin-bottom: 0rem;
  text-align: center;  
  color: var(--grayMatter);  
}

.section-tag-campbelow {
  font-size: 1.5rem;
  font-weight: none;
  margin-top: 0rem;
  margin-bottom: 0rem;
  text-align: center;  
  color: var(--grayMatter);  
}

.section-text {
  font-size: 1.5rem;
  font-weight: none;
  margin-top: 0rem;
  margin-bottom: 0rem;
  text-align: center;  
  color: var(--grayMatter);  
}

.sectionLine-bottom {
  width: 50%;
  text-align: center;
  border-top: 0.20rem solid var(--techGold);
  margin: auto;
  margin-bottom: 1rem;
  padding: 0;  
}

/*******************************************************************************************************************************************/
/********************************************************************* PAGE ITEMS **********************************************************/
/*******************************************************************************************************************************************/

/************************************ Accordion Menu ****/
.accordion {
  text-decoration: none;
  background-color: var(--piMile);
  color: var(--grayMatter);
  cursor: pointer;
  padding: .25rem;
  width: 25%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 1rem;
  transition: 0.4s;
  display: block;
  margin: auto;
  margin-top: .25rem;
  box-shadow: 0 4px 8px 0px rgba(84, 88, 90, .6);  
}

.accordion:hover {
  background-color: var(--grayMatter);
  color: var(--white);
}


/************************************************************** Home Page ****/
.homePage {
   /*width: 75%;*/
  /*margin: auto;*/
}

.homePage-title {
  font-size: 2rem;
  font-weight: bold;
  margin-top: 0rem;
  margin-bottom: 0rem;
  text-align: center;
  color: var(--grayMatter);  
}

.homePage-text {
  font-size: 1rem;
  font-weight: none;
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-align: left;
  color: var(--grayMatter);
  padding-left: 20%;
  padding-right: 20%;
  width: 100%;  
}

#homePage-images{
  width: 100%;
  height: 30rem;
  vertical-align: middle;
}

#homePage-images td {
  width: 33%;
}

/*@container myContainer (width<2000px) {*/
#leftImg {
  background-image: url("../img/hs/hackaHouse-01.png");
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  color: var(--white);
  font-size: 5rem;
  font-weight: bold;

/*  animation-name: leftImgFade;
  animation-duration: 8s;
  animation-iteration-count: infinite;  */
}

/*@keyframes leftImgFade {
  0% {font-size: 1rem;}
  25% {font-size: 5rem;}
  50% {font-size: 2rem;}
  75% {font-size: 5rem;}  
  100% {font-size: 1rem;}
}*/

#midImg {
  background-image: url("../img/hs/dataDriven-01.png");
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  color: var(--white);
  font-size: 5rem;
  font-weight: bold;

/*  animation-name: midImgFade;
  animation-duration: 8s;
  animation-iteration-count: infinite;  */
}

/*@keyframes midImgFade {
  0% {font-size: 1rem;}
  25% {font-size: 5rem;}
  50% {font-size: 1rem;}
  75% {font-size: 5rem;}  
  100% {font-size: 1rem;}
}*/


#rightImg {
  background-image: url("../img/ms/aiTraining-01.png");
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  color: var(--white);
  font-size: 5rem;
  font-weight: bold;

/*  animation-name: rightImgFade;
  animation-duration: 8s;
  animation-iteration-count: infinite; */ 
}

/*@keyframes rightImgFade {
  0% {font-size: 1rem;}
  25% {font-size: 5rem;}
  50% {font-size: 3rem;}
  75% {font-size: 5rem;}  
  100% {font-size: 1rem;}
}*/


/************************************ Camp Button ****/
.campButton {
  border: none;
  background-color: rgba(0, 0, 0, 0%);
  padding: 0px 0px;
  cursor: pointer;
  width: 100%;
  height: 100%;    
}

.campButtonTable {
  padding: 0px;
  border-spacing: 0px;
  border:0px solid var(--grayMatter);
  box-shadow: 0 4px 8px 0px rgba(84, 88, 90, .6);
  width: 100%;
  height: 5rem;    
}

.campButtonTable-hs-title{
  background: var(--techGold) ;  
  color: var(--grayMatter);
  text-align: center;
  height: 100%;
  width: 100%;
  position: relative;
} 

.campButtonTable-hs-title p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.campButtonTable-ms-title{
  background: var(--navyBlue) ;  
  color: var(--white);
  text-align: center;
  height: 100%;
  width: 100%;
  position: relative;
} 

.campButtonTable-ms-title p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.campButtonTable-es-title{
  background: var(--buzzGold) ;  
  color: var(--grayMatter);
  text-align: center;
  height: 100%;
  width: 100%;
  position: relative;
} 

.campButtonTable-es-title p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

/************************************ Camp PopUp ****/
#popUpScreen {
  display: none;
  position: relative;
  background-color: rgba(255, 255, 255, 75%);
  padding: 0;
  margin: 0;
}

.campPopUp {
  display: none;
  position: relative;
  background-color: var(--diploma);
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;  
  color: var(--grayMatter);
}

.campPopUp-level {
  text-decoration: none;
  font-size: 1.5rem;
  text-decoration: underline;
}

.hs-PopUp-title {
  background-color: var(--techGold);
  color: var(--grayMatter);
  font-size: 2rem;
  font-weight: bold;
}

.ms-PopUp-title {
  background-color: var(--navyBlue);
  color: var(--white);
  font-size: 2rem;
  font-weight: bold;
}

.es-PopUp-title {
  background-color: var(--buzzGold);
  color: var(--grayMatter);
  font-size: 2rem;
  font-weight: bold;  
}

.campPopUp-buttonRow {
  text-align: center;
  width: 33%;     
}

.campPopUp-price {
  text-align: center;
  margin: .8rem;
  /*display: flex;*/
  /*justify-content: center;*/
  /*align-items: center;*/
}

.campPopUp-price-schedules {
  text-align: center;
  background-color: var(--piMile);
}

.campPopUp-price-header {
  font-weight: bold;
  text-decoration: underline;
}

.campPopUp-price-alert {
  color : var(--brightHorizon);
  font-weight: bold;
}


/*

.campPopUp-payment {
 
}

.campPopUp-payment-schedule {
  padding: 1rem 0 1rem 0;
  width: 33%;   
  text-align: right;
}

.campPopUp-payment-price {
  padding: 1rem 0 1rem 0;
  width: 33%;   
  text-align: center;
}

.campPopUp-payment-scholarship {
  padding: 1rem 0 1rem 0;
  width: 33%; 
  text-align: left;
}

*/

.campPopUp-imgframe-left{
  width: 33%;
  text-align: right;
}

.campPopUp-imgframe-center{
  width: 33%;
  text-align: center;
}

.campPopUp-imgframe-right{
  width: 33%;
  text-align: left;
}

.campPopUp img{
  width: 50%;
  height: auto;
  vertical-align: middle;
}

.campPopUp-text {
  text-align: justify;
  padding: 1rem;
  font-size: 1.5rem;
}

.closePopUpX {
   cursor: pointer;  
}

/************************************ Registration Button ****/

.registrationButton {
  text-decoration: none;
  background-color: var(--brightBuzz);
  border: none;
  padding: .25rem .25rem;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer; 
  color: var(--grayMatter);
  border-radius: 0%;
  box-shadow: 0 4px 8px 0px rgba(84, 88, 90, .6);
  font-weight: bold;  
}

.registrationButton:visited {
  color: var(--grayMatter);
}

.registrationButton-general {
  background-color: var(--brightBuzz);
  border: none;
  padding: .25rem .25rem;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer; 
  color: var(--grayMatter);
  border-radius: 0%;
  box-shadow: 0 4px 8px 0px rgba(84, 88, 90, .6);
  font-weight: bold;  
}

.registrationButton-general:visited {
  color: var(--grayMatter);
}

/************************************ Grids ***/
.register {
  position: relative;
}

/************************************ Week Header ****/
.weekHeader {
  background-color: var(--white);
  color: var(--grayMatter);
  text-align: center;
  font-weight: bold;
  font-size: 1rem;
}

.weekHeader span {
  font-size: calc(0.8 * 1rem);
}

/************************************ Day Blocks ****/
.dayBlocks {
  width: 20%;
  height: 100%;
}

.dayBlocks p { /**** Rsponsive Control of Fonts Size on Day Blocks ***/ 
  font-size: 1.25rem;
  font-weight: none;
}

/************************************ Level Labels ****/
.levelLable-hs {
  color: var(--grayMatter);
  background: var(--techGold);
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  text-align: center;   
  font-size: 1.65rem; 
}

.levelLable-ms {
  color: var(--white);
  background: var(--navyBlue);
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  text-align: center;   
  font-size: 1.65rem; 
}

.levelLable-es {
  color: var(--grayMatter);
  background: var(--buzzGold);
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  text-align: center;   
  font-size: 1.65rem; 
}

/************************************ Daily Schedule ****/

.daily {
  border-collapse: collapse;
  font-size: .75rem;
  width: 50%;
  margin: auto;
}

.daily tr td {
  margin: 0;
  padding: 2px;
  border: 1px solid #000;
}

.daily-header {
  font-weight: bold;
  text-align: center;
  background-color: var(--techGold);  
}

.daily-time {
  text-align: center;
  font-weight: bold;
  background-color: var(--techGold);    
}

.daily-timeslot {
  text-align: left;
}

.daily-notes {
  text-align: left;
  font-size: 1rem;
  margin: auto;
  margin-bottom: 1rem;
  width: 75%;  
}

.daily-notes li {
  padding: 0.5rem;
}

.latefees li {
  padding: 0.5rem;
}

/************************************ Aftercare ****/

.aftercare-notes {
  text-align: left;
  font-size: 1rem;
  margin: auto;
  margin-bottom: 1rem;
  width: 75%;  
}

.aftercare-notes li {
  padding: 0.5rem;
}

/************************************ Showcase ****/

.showcase-notes {
  text-align: left;
  font-size: 1rem;
  margin: auto;
  margin-bottom: 1rem;
  width: 75%;  
}

.showcase-notes li {
  padding: 0.5rem;
}


/************************************ Expectations ****/

.expectations-lead {
  font-weight: bold;
}

.expectations-notes {
  text-align: left;
  font-size: 1rem;
  margin: auto;
  margin-bottom: 1rem;
  width: 75%;  
}

.expectations-notes li {
  padding: 0.5rem;
}

.expectations-trailer {
  font-weight: bold;
  color: var(--brightHorizon);
  text-align: center;
}


/************************************ Additional ****/

.additional-notes {
  text-align: left;
  font-size: 1rem;
  margin: auto;
  margin-bottom: 1rem;
  width: 75%;  
}

.additional-notes li {
  padding: 0.5rem;
}

/************************************ Parking ****/

.parking-notes {
  text-align: left;
  font-size: 1rem;
  margin: auto;
  margin-bottom: 1rem;
  width: 75%;  
}

.parking-notes li {
  padding: 0.5rem;
}

.parking-alert {
  color: var(--brightHorizon);
}
/************************************ Directions ****/

.directions-notes {
  text-align: left;
  font-size: 1rem;
  margin: auto;
  margin-bottom: 1rem;
  width: 50%;  
}

.directions-notes li {
  padding: 0rem;
}

/*.directions-notes a:hover a:visited a:active a:link {
  color: var(--grayMatter);
}*/

.directions-lead {
  text-align: center;
}

.directions-dropoff{
  font-size: 1.25rem ;
  text-decoration: underline;
  font-weight: bold;
}

.directions-clickhere{
  font-size: 1rem ;
  text-decoration: underline;
  font-weight: bold;
  color: var(--grayMatter);
}

.directions-mode {
  text-align: center;
}

.directions-tags {
  font-weight: bold;
  text-decoration: underline;
}

.directions-alert {
  color: var(--brightHorizon);
}

.directionsButton {
   text-decoration: none;
   color: var(--grayMatter);
   text-decoration: underline;
   cursor: pointer;
}

.directionsButton:onclick{
  color: var(--grayMatter);
}

.directions-line {
  width: 25%;
  text-align: center;
  border-top: 0.20rem solid var(--techGold);
  margin: auto;
  margin-bottom: 1rem;
  padding: 0;  
}

/************************************ Cancellations ****/

.cancellations-notes {
  text-align: left;
  font-size: 1rem;
  margin: auto;
  margin-bottom: 1rem;
  width: 75%;  
}

.cancellations-notes li {
  padding: 0rem;
}

.cancellations-alert {
  color: var(--brightHorizon);
}

/************************************ Contact Us ****/

.contactus-notes {
  text-align: center;
  font-size: 1rem;
  width: 75%;
  margin: auto;
}

.contactus-cell {
  display: inline-block; 
  text-align: center;
  width: 33%;
  padding: 0rem;
}

.contactus-icons{
  color: var(--techGold);
}

.contactus-icons{
  color: var(--techGold);
}

.contactus-tags{
  color: var(--grayMatter);
}

/************************************ Back 2 Top ****/
.back-2-top {
  position: fixed;
  display: none;
  background: var(--brightBuzz);
  color: var(--grayMatter);
  display: inline-block;

  text-align: center;
  line-height: 1;
  font-size: 1rem;
  border-radius: 0%;
  right: 15px;
  bottom: 75px;
  transition: background 0.5s;
  z-index: 11;
}

.back-2-top a:link, a:visited  {
  color: var(--grayMatter);
}

.back-2-top a:hover, a:active{
  color: var(--grayMatter);
}

/************************************ Sticky ****/

.sticky { 
  position: sticky;
  top:0px;
  z-index: 999;
}

/*================================ RESPONSIVE FORMATTING =======================================*/

/*      @media (min-width: 600px) { /**** Media Query = Phone ***
        .header {grid-area: 1 / span 12;}
        .menu {grid-area: 4 / span 1; justify-self: center;}
        .content {grid-area: 3 / span 12;}
        .facts {grid-area: 2 / span 12;}
        .footer {grid-area: 5 / span 12;}
      }
*/

/*      @media (min-width: 768px) { /**** Media Query = Tablet ***
        .header {grid-area: 1 / span 6;}
        .menu {grid-area: 2 / span 1;}
        .content {grid-area: 2 / span 4;}
        .facts {grid-area: 2 / span 1;}
        .footer {grid-area: 3 / span 6;}
      }
*/

@media screen and (max-width: 600px) { /**** PHONE ****/
  .weekHeader { font-size: 0.65rem; }  
  .weekHeader span { font-size: .52rem; }
  .dayBlocks p { font-size:.60rem; }
  .campPopUp img { width: 90%; }
  .campPopUp-level { font-size: .8rem }
  .hs-PopUp-title { font-size: 1rem; }
  .ms-PopUp-title { font-size: 1rem; }
  .es-PopUp-title { font-size: 1rem; }
  .campPopUp-text { font-size: .8rem; }
  .daily { font-size: 0.65rem; width: 100%;}
  .daily-notes { font-size: .80rem; text-align: justify; width: 100%; }
  .aftercare-notes { font-size: .80rem; text-align: justify; width: 100%; }
  .showcase-notes { font-size: .80rem; text-align: justify; width: 100%; }
  .expectations-notes { font-size: .80rem; text-align: justify; width: 100%; }  
  .additional-notes { font-size: .80rem; text-align: justify; width: 100%; }
  .parking-notes { font-size: .80rem; text-align: justify; width: 100%; }  
  .directions-notes { font-size: .80rem; text-align: justify; width: 100%; }  
  .cancellations-notes { font-size: .80rem; text-align: justify; width: 100%; }    
  .contactus-notes { font-size: .35rem; text-align: justify; width: 100%; } 
  .accordion { width: 100%; }
  .section-title { font-size: 1.5rem; }
  .section-tag { font-size: 1.25rem; }
  .section-tag-campbelow { font-size: .8rem; }
  .section-text { font-size: .80rem; }
  .sectionLine-top { padding-top: 0rem; margin-top: 0rem; }  
  .sectionLine-bottom { padding-bottom: .5rem; margin-bottom: 0rem; }
  .homePage-text { font-size: .80rem; text-align: justify; width: 100%; padding-left: 0; padding-right:0; }
  #homePage-images{ height: 12rem; }
  #leftImg { font-size: 1rem; }
  #midImg { font-size: 1rem; }
  #rightImg { font-size: 1rem; }
  .marquis-topRow { font-size: 1.25rem; padding-left: 0; }
  .marquis-topRow img { height: 2rem; }
  .marquis-secondRow { font-size: 1.25rem; padding-left: 0; }
  .menu {  text-align: center; padding: 0; margin: 0; }
  .menu li { font-size: .65rem; }
  .menu li a { padding: 0 .5rem; }
  #Home { padding-top: 0rem; margin-top: 0rem; }
  .registrationButton { font-size: .60rem; }
  .registrationButton-general { font-size: .8rem; }
  .campPopUp-payment-price { font-size: .80rem; }
  .campPopUp-price-schedules { font-size: .80rem; }
}


@media screen and (max-width: 1280px) and (min-width: 601px) { /**** TABLET ****/
  .weekHeader { font-size: 0.65rem; }  
  .weekHeader span { font-size: .52rem; }
  .dayBlocks p { font-size: 1rem; }
  .campPopUp img { width: 90%; }
  .campPopUp-level { font-size: 1.25rem }
  .hs-PopUp-title { font-size: 1.5rem; }
  .ms-PopUp-title { font-size: 1.5rem; }
  .es-PopUp-title { font-size: 1.5rem; }
  .campPopUp-text { font-size: 1rem; }
  .daily { font-size: 0.65rem; width: 100%;}
  .daily-notes { font-size: .80rem; text-align: justify; width: 100%; }
  .aftercare-notes { font-size: .80rem; text-align: justify; width: 100%; }
  .showcase-notes { font-size: .80rem; text-align: justify; width: 100%; }
  .expectations-notes { font-size: .80rem; text-align: justify; width: 100%; }  
  .additional-notes { font-size: .80rem; text-align: justify; width: 100%; }
  .parking-notes { font-size: .80rem; text-align: justify; width: 100%; }  
  .directions-notes { font-size: .80rem; text-align: justify; width: 100%; }  
  .cancellations-notes { font-size: .80rem; text-align: justify; width: 100%; }    
  .contactus-notes { font-size: .70rem; text-align: justify; width: 100%; } 
  .accordion { width: 100%; }
  .section-title { font-size: 1.5rem; }
  .section-tag { font-size: 1.25rem; }
  .section-text { font-size: .80rem; }
  .sectionLine-top { padding-top: 0rem; margin-top: 0rem; }  
  .sectionLine-bottom { padding-bottom: .5rem; margin-bottom: 0rem; }
  .homePage-text { font-size: .80rem; text-align: justify; width: 100%; padding-left: 0; padding-right:0; }
  #homePage-images{ height: 12rem; }
  #leftImg { font-size: 1rem; }
  #midImg { font-size: 1rem; }
  #rightImg { font-size: 1rem; }
  .marquis-topRow { font-size: 1.25rem; padding-left: 0; }
  .marquis-topRow img { height: 2rem; }
  .marquis-secondRow { font-size: 1.25rem; padding-left: 0; }
  .menu {  text-align: center; padding: 0; margin: 0; }
  .menu li { font-size: .65rem; }
  .menu li a { padding: 0 .5rem; }
  #Home { padding-top: 0rem; margin-top: 0rem; }
}