
:root {
    --primary-color:   #5D4037;   
    --accent-color:    #FF5722;
    --border-color:    #B0BEC5;
    --myBrown:         #5D4037;
    --crema:           #F7E6D4; 
    --crema2:          #ebc8a2; 
}   

body                  { font-family:Baumans, Marcellus, Arial;    font-size:2.2rem;    font-weight:200;     letter-spacing:1px;  
                        margin:0;   padding:0;    padding-top:70px;   line-height:1.2; 
                        background-image:linear-gradient(to bottom, #f8f0e7 0px, transparent 150px), url('../img/var/gridLighter.webp'); }
.gridBG               { background-image:linear-gradient(to bottom, #f8f0e7 0px, transparent 150px), url('../img/var/gridLighter.webp'); }
.darkGrid             { background-image:url('../img/var/gridDark.webp');      }  
.pinkBG               { background-color:rgb(250, 238, 241);   }
.whiteBG              { background-color:white;        }
.greenBG              { background-color:#D1E7DD;      } 
.cremaBG              { background-color:var(--crema);   } 
.crema1BG             { background-color:var(--crema);   } 
.crema2BG             { background-color:var(--crema2);  } 
h1, h2, h3, h4, h5    { font-family:'Expletus Sans', Arial;        letter-spacing:2px;    font-weight:700;   text-transform:uppercase;
                        font-size:2rem;   color:var(--myBrown);   text-shadow:5px 5px 5px rgba(0,0,0,0.3); }    /* Barlow Condensed */
.shadow               { text-shadow:5px 5px 5px rgba(0,0,0,0.3);   }                        
p                     { padding-top:2rem; }
table                 { border-collapse:collapse;    border-spacing:0;  }
.priceTag             { width:340px;    height:90px;     text-align:center;       font-size:2.6rem;    font-weight:bold;     padding-right:40px;
                        background-image:url('../img/var/priceTag.gif');     background-size:100% 100%;      background-repeat:no-repeat;
                        background-position:center;      vertical-align:middle;    text-shadow:2px 2px 4px rgba(0,0,0,0.7);    }
.niceButton           { color:black;    padding:15px 25px;    border-radius:25px;    cursor:pointer;   display:inline-block; 
                        font-family:arial;      font-weight:bolder;      font-size:3rem;       border:black solid 4px;
                        transition: transform 0.2s;             background:linear-gradient(45deg, #da853a, #ead0af);     }
.leftInputCell        { text-align:right;    vertical-align:top;    padding-right:.5rem;   width:auto;   white-space:nowrap;  
                        font-family:'Barlow Condensed', Arial, Helvetica !important;  font-size:1.9rem;   letter-spacing:0px;   
                        font-weight:400;   color:var(--primary-color);   }   /* Barlow Condensed  font-weight:400;   padding-right:1rem; */
.centerInputCell      { text-align:right;    vertical-align:top;    padding:0px;        width:auto;   white-space:nowrap;}
.rightInputCell       { text-align:left;     vertical-align:top;    padding:6px 0px;    width:100%;  }
.questionIcon         { width:22px;  height:30px;    transition:filter 0.9s ease;  }    
.questionIcon:hover   { width:22px;  height:38px;  } 
.revealButton         { opacity:.3;  width:250px;   max-width:70%;    cursor:pointer;     margin-bottom:20rem;   }
.revealButton:hover   { opacity:.6;     }
.bigCheckbox          { margin-right:20px !important;    width:40px;   height:40px;     border:5px solid brown;    cursor:pointer;     }
.sparky               { transition:color 0.5s ease-in-out;  }
.yellow               { color:#FFD700;                    } 
.smallButton          { background-color:white;   border:solid 1px gray;   font-size:1rem;   padding:4px 22px;   border-radius:10px;  cursor:pointer;  }
.smallButton:hover    { background-color:rgb(222, 240, 249);  }
.floating             { animation:lightFloat 4s ease-in-out 3;  }
@keyframes lightFloat { 0%,  50% {transform:translateY(0px) rotate(1deg);}   50% {transform: translateY(0px) rotate(-1deg);}     }
.flashingBorder       { border:4px solid #ff0000  !important;      animation:fadeBorder 1.5s ease-in-out infinite !important;  }
@keyframes fadeBorder { 0%, 100% { border-color: #ff0000; }    50% { border-color:transparent; }      }
.homeBed              { margin-top:0px;     } 
.homeBed:hover        { margin-top:0px;    filter:contrast(1.1) brightness(1.1);    }
.checkList            { list-style:none;   padding-left:0px;  }
.checkList li         { display:flex;      padding-top:2rem;   }
.checkList li::before { content:"✓";       margin-right:22px;   color:red;   flex-shrink:0;   width:25px; }
b                     { font-weight:900; }

/* ============= INPUT FIELDS ============= */
.info-section         { display:none;   font-size:1rem;    line-height:1;   margin-top:10px;    padding:15px;   background-color:#f8f9fa;    
                        border-left: 4px solid #007bff;   border-radius:4px;    }
.info-section.show    { display:block;    animation:fadeIn 0.3s ease-in;}
.stageTwo             { display:none; }

/* ============= float When Hovered ============= */
.floatWhenHov         { transition:all 0.3s ease;      position:relative;
                        box-shadow:0 10px 30px rgba(0,0,0,0.3), 0 0 0 10px rgba(255,255,255,0.1), 0 0 0 20px rgba(255,255,255,0.05);     }
.floatWhenHov:hover   { transform: translateY(-15px) rotate(2deg);            animation: float 3s ease-in-out infinite;
                        box-shadow: 0 25px 50px rgba(0,0,0,0.4),  0 0 0 15px rgba(255,255,255,0.15),  0 0 0 30px rgba(255,255,255,0.08);    }
@keyframes float      { 0%, 100% {transform:translateY(-15px) rotate(2deg);}       25% {transform:translateY(-20px) rotate(1deg);}
                             50% {transform: translateY(-10px) rotate(3deg);}      75% {transform:translateY(-18px) rotate(0deg);}     }
.sectionIcon          { height:60px;  margin-left:1rem; }
.sectionIcon:hover    { filter:grayscale(0%);   } 
.grayed               { filter:grayscale(100%); }
.rounded20            { border-radius:20px; }
.rounded30            { border-radius:30px; }
.hrFade               { margin:20px 0;  border:none;   height:10px;    background:linear-gradient(to right, transparent, #820900, transparent);    }

/* ============= SubSections ============= */
.collapsableDiv       { max-height:0;          overflow:hidden;            transition:max-height 0.3s ease-out;        }
.collapsableDiv.show  { max-height:none;       transition:max-height 0.3s ease-in;        }
.invisible            { width:0;     height:0;     overflow:hidden;  }
.hidden               { display:none; }
.boldy                { font-family:Stormfaze, arial;    font-weight:normal;     color:var(--myBrown);  }        /*  font-weight:bold; */
.homeText             { padding:5px;   line-height:1.1;   } 

/* ============= MODAL =============  */
.dreamModal           { z-index:1000;   display:none;    position:fixed;    top:0;   left:0;    width:100%;   height:100%;  text-align:center; 
                        background-color:rgba(0, 0, 0, 0.5);            } 
.modalContent         { background-color:white;    margin:15% auto;    padding:9px;    width:90%;     max-width:900px;    box-shadow:0 4px 8px rgba(0, 0, 0, 0.2);   
                        border:1px solid gray;     border-radius:30px;  }
.modalHeader          { display:flex;     justify-content:space-between;    align-items:center;     margin:0px 40px;   padding:0px;  }
.modalCloseButton     { cursor:pointer;   font-size:1.2rem;    }              /*  margin-right:40px !important;  */
.modalCloseX          { cursor:pointer;   font-size:2rem;    font-weight:bold;     padding:0px;   margin:0px;    }
.modalCloseX:hover    { color:red;   }
.modalBody            { text-align:center;     padding:20px;   margin:0px;   }
.modalImage           { width:840px;   max-width:90%;  }
.modalFooter          { text-align:right;   padding-top:15px;  padding-bottom:10px;   margin:0px;   margin-right:40px;  }            /* margin-top:15px; */

.container            { padding:0px !important;   margin-top:0px !important;   }   /* padding-top:0px !important;   padding-bottom:1rem */
.error-message        { color:red;   font-family:arial;   font-weight:bolder;   font-size:1rem; }

.contactCell          { vertical-align:top;  padding:1rem;   font-size:2rem;   }
.navbar-brand         { font-family: TecnicoGrueso, sans-serif;    font-weight: 700;    font-size: 1.5rem;    text-transform: uppercase; }
                                 /*  'Barlow Condensed'   */
.myFadeIn             { animation:fadeIn 6s forwards;  }
@keyframes fadeIn     { from {opacity:0;}  to {opacity:1;}    }
@keyframes fadeIn2    { from {opacity:0; transform:translateY(-10px); }    to { opacity:1; transform:translateY(0); }}

.bullet               { position:relative;    padding-left:3.5em;  padding-top:1rem;   }       /* 1.5    margin-bottom:0.5em; */
.bullet::before       { content:"✔";         position:absolute;    padding-top:1rem;   left:0.5em;     top:0;   margin-right:1rem;   color:red;   }          /*  ➤  ◣  ⟡ ► ✔  */

/* ============= BED  PREVIEW =============                             902x538  /  677x406  /  451x269  /  340x192  /  226x135  /  113x67      */

.prevContainer        { position:relative;   margin-bottom:20px;   text-align:center;    }                        
.prevTable            { border-collapse:collapse;  position:relative;  }       /* height:600px;  */
.prevImgContainer     { position:relative;    width:450px;      height:270px;     text-align:center;   margin:0 auto;   }   /*   text-align:right;  */  
.prevImage            { position:absolute;    top:0;     left:0;    width:100%;    height:100%;   opacity:1;     /* 0.7 */
                        transition:opacity 0.9s ease;         }  /* background-color: rgba(255, 0, 0, 0.3);  */
.prevCell             { font-size:1rem;   position: relative;}
.prevCell1            {    padding:5px;   vertical-align:middle;  text-align:right;   }
.prevCell2            {    padding:5px;   vertical-align:top;     text-align:center;  }
.prevCell3            {    padding:5px;   vertical-align:top;     text-align:center;  }
.prevCell4            { padding-right:12px;   vertical-align:bottom;  text-align:left;    }   /* width:40px;  */
.imageCell            {    padding:0px;   position:relative;    text-align:right;   }       /*  min-width:450px;    min-height:270px;  height:600px;   */

.specFont             { font-size:1.4rem;  }
.specCell             { padding-right:10px;   vertical-align:top;  }

.specBullet           { padding-left:3.5rem;    position:relative;    padding-top:2rem;  }           /*  FIXED ?????? Claude  */
.specBullet::before   { content:"✔ ";           color:red;         position:absolute;    left:0;   }

/* ============= SECTION STYLING ============= */
.sectionContainer            { position:relative;   margin:0px;   padding:0px;   }              /*  2rem 0  border-bottom:1px solid gray;  */
.sectionHeader               { color:var(--myBrown);  display:flex;   font-family:'Expletus Sans', Baumans; 
                               padding:.5rem;        border:1px solid var(--border-color);    cursor:pointer;    margin:0px; 
                               transition:all 0.3s ease;      
                               align-items:center;    justify-content:space-between;    border-bottom-left-radius:50px; 
                               border-left:18px solid var(--primary-color);      border-bottom:3px solid var(--primary-color);
                               border-right:18px solid var(--primary-color);     border-bottom-right-radius:50px;      }
                                      /* background-color:var(--crema); */   /*  background-color:rgba(255, 255, 255, 0.9);  */
.sectionHeader:hover         { background:linear-gradient(45deg, #da853a, rgb(242, 212, 172));     color:black;  }    
.level1HeaderFont            { font-size:3rem;     font-weight:900; }
.level1HeaderFont:hover      { font-size:3.1rem;    }  
.level2HeaderFont            { font-size:2.2rem;   padding-left:1.5rem;   padding-right:1.5rem;   }
.level2HeaderFont:hover      { font-size:2.3rem;    }



.topBorder                   { border-top:solid 3px var(--myBrown);  }         /* main section class */
.collapseIcon                { width:80px;     transition:transform 1.3s ease;  margin-right:1rem;   }    /*  0.3   color: var(--primary-color);   */
.collapse180                 { transform: rotate(180deg);  }        
.faqItem                     { margin:0rem 4rem;   }          /* margin-left:4rem;  margin-right:4rem;  margin-bottom:0px;  padding:0px;  }   */
.leftPadded                  { padding-left:4rem;  }

/* ============= NAVIGATION STYLING ============= */
.navbar                      { box-shadow:0 2px 10px rgba(0, 0, 0, 0.1);}
.navbar-nav .nav-link        { font-weight:600;  padding-right:1rem;    margin:0px;    border:solid white 1px;    border-radius:16px; }     /*  font-size:1.6rem;    padding: 0.5rem 1rem;   */
.navbar-nav .nav-link:hover  { color: var(--accent-color);  border:solid lightgray 1px;  border-radius:16px;   }
.dropdown-menu               { border-radius:0;      border-top:3px solid var(--accent-color);   box-shadow:0 5px 15px rgba(0, 0, 0, 0.1); }
.dropdown-item               { padding:0.5rem 1rem;  border-left:3px solid transparent;          transition:all 0.6s ease;    } 
.dropdown-item:hover         { background-color:gray;    border-left: 3px solid var(--accent-color);   }
.menuFont                    { font-size:1.5rem;   font-weight:bolder;    color:var(--primary-color);    text-transform:uppercase;    letter-spacing:1px; }
.bottomAnchorCell            { display:inline-block !important;         min-width:180px !important; }
.bottomAnchor                { font-size:1.2rem;      text-decoration:none;    }
.bottomAnchor:hover          { font-size:1.3rem;      font-weight:bolder;   }  

/* ============= BED CUSTOMIZER STYLING ============= */
.card                        { overflow: hidden;     }
.homePanel                   { border:3px solid #9a6656;   border-radius:30px;   padding:8px 20px;   opacity:1;    }  
.panel                       { border:3px solid #9a6656;   border-radius:30px;   opacity:1;    } 
.paddedPanel                 { border:3px solid #9a6656;   border-radius:30px;   opacity:1;   padding:30px 20px;    } 
.form-select, .form-control  { border-radius:0;    border:1px solid var(--border-color);    font-family:'Roboto Mono', monospace;    background-color: rgba(255, 255, 255, 0.8);}
.form-select:focus,
.form-control:focus          { box-shadow:none;    border-color: var(--primary-color); }
.form-label                  { font-weight:600;    margin-bottom:0.5rem;    font-size:1.7rem;     color:var(--primary-color); }
.btn                         { border-radius:0;    text-transform:uppercase;    font-size:2rem;   font-weight:600;    letter-spacing:1px;
                               padding:0.5rem 1.5rem;    box-shadow:none;       transition:all 0.3s ease;    border-radius:15px;   }
.btn-primary                 { background-color:var(--primary-color);    border-color: var(--primary-color);   }
.btn-primary:hover           { background-color:brown;  border-color:black; }
.btn-outline-primary         { color:var(--primary-color);    border-color: var(--primary-color);              }
.btn-outline-primary:hover   { background-color:var(--primary-color);    border-color: var(--primary-color);   }
.btn-outline-secondary       { color:black;    border-color:black;                    }
.btn-outline-secondary:hover { background-color:black;    border-color:black;    color:white; }
.alert                       { border-radius: 0;   border-left-width: 4px; }
.alert-primary               { background-color: rgba(93, 64, 55, 0.1);    border-color: var(--primary-color);   color: var(--primary-color);  }
.bed-preview-container       { background-repeat:repeat;    background-size:20px 20px;    border:1px solid var(--border-color);    padding:2rem;
                               display:flex;      justify-content:center;    align-items:center;    min-height:300px;   }
.specs-display               { background-color:rgba(255, 255, 255, 0.8);    border: 1px solid gray;        border-radius:15px;   }
.specs-display h5            { padding-bottom:0.5rem;    margin-bottom:1rem; }  
.payment-card                { border:1px solid var(--border-color);    border-radius: 0;    transition: all 0.3s ease; }
.payment-card:hover          { transform:translateY(-5px);    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);    border-color: var(--primary-color); }
.rulered                     { border-top:3px solid var(--primary-color);         border-bottom:3px solid var(--primary-color); padding:15px 0px; }
.orderDiv                    { text-align:center;    padding-top:1.5rem;      }
.bedPrice                    { font-family:arial;   font-size:3rem;   font-weight:bolder;  }

/* ============= GALLERY STYLING ============= */
.gallery-card                { border:none;       box-shadow:0 5px 15px rgba(0, 0, 0, 0.1);    transition:all 0.3s ease;    position:relative;
                               overflow:hidden;   border-radius:15px;  }
.gallery-card:hover          { transform:translateY(-5px);    box-shadow:0 15px 30px rgba(0, 0, 0, 0.15);  }
.gallery-card img            { transition:all 0.5s ease;      height:250px;    object-fit:cover; }
.gallery-card:hover img      { transform: scale(1.05); }
.gallery-card .card-body     { background-color:rgba(255, 255, 255, 0.9);    border-top:3px solid var(--primary-color); }
.lazy-image                  { background-color:gray;   position:relative;  }
.lazy-image::before          { content:'';    display:block;    padding-top:66.66%;  }

/* ============= SERVICES STYLING ============= */
.servicesTopCell             { padding:0px;    text-align:center;  }
.servicesBottomCell          { padding:0px;    text-align:center;  }
.servicesImage               { opacity:.7;     width:160px;    margin:0px 15px;  }
.servicesImage:hover         { opacity:1;   }
.nextServiceImage            { width:55px;  }
.freeServiceImage            { width:90px;  }
.service-block               { padding:2rem;  border:1px solid var(--border-color);    background-color: rgba(255, 255, 255, 0.8);    position: relative; }
.service-block::before       { content:'';    position:absolute;    top:-1px;    left:2rem;    right:2rem;    height:3px;    background-color: var(--accent-color); }
.service-features            { list-style-type:none;    padding-left:0;          margin-top:1rem; }
.service-features li         { position:relative;       padding-left: 1.5rem;    margin-bottom: 0.5rem;  }
.service-features li::before { content: '\f00c';    font-family: 'Font Awesome 5 Free';    font-weight: 900;
                               position: absolute;    left: 0;    color: var(--primary-color); }

/* ============= CONTACT STYLING ============= */
.contact-info li             { display: flex;    align-items: flex-start;}
.contact-info li i           { color: var(--primary-color);    margin-top: 0.25rem;}
.map-responsive              { overflow: hidden;    padding-bottom: 56.25%;    position: relative;    height: 0;}
.map-responsive iframe       { left: 0;    top: 0;    height: 100%;    width: 100%;    position: absolute;}

/* ============= VARIOUS ============= */
.footer                      { border-top: 6px solid var(--primary-color);  padding-top:.5rem; }
.stickToBottom               { position:absolute;    bottom:0px;    width:100%;    }             /* position:absolute;  height:60px; }  */
.transImg                    { filter:grayscale(0%);      height:70px;  }
.bnw                         { filter:grayscale(100%);    height:50px;    transition:all 5s ease;  }
.dreamLogo                   { width:800px;      }          /* height:64px; */
.colorPicker                 { height:36px;  margin:6px;  border-radius:10px;  border:black solid 3px;    cursor:pointer; }
.selectedColor               { height:50px;  border:blue solid 3px;   }
.legPicker                   { height:70px;  margin:6px;  border-radius:10px;  border:black solid 1px;    cursor:pointer; }
.selectedLeg                 { height:90px;  border:red solid 3px;   }

/* ++++++++++++ TERMS ++++++++++++++++++ */
.terms                       { font-size:1.1rem;      text-align:left;     border-top:lightgray 2px;   padding:0px 6px;    display:none;   }                           /*  font-family:arial;  */
.terms h1                    { font-size:1.6rem;      font-weight:bold;    padding-top:1rem;   }
.terms h2                    { font-size:1.3rem;      font-weight:bold;    padding-top:1rem;   }
.terms h3                    { font-size:1.1rem;      font-weight:bold;    padding-top:1rem;   }
.terms p                     { font-size:1.1rem;      padding-top:1rem;    padding-bottom:4rem;  }
.termsParagraph              { padding-top:1.1rem;    padding-bottom:3rem;   }
.termsParagraph p            { padding-top:1.1rem;    padding-bottom:1rem;   }
.termsParagraph b            { font-weight:600;    }

/* ============= OPTIONS LOOPER ============= */
.boomBoxButton              { height:80px; margin-left:20px;   cursor:pointer; }
.status                     { background:white;    border-radius:10px;   padding:15px;   margin-bottom:20px;    font-family:'Courier New', monospace; }
.progressBar                { background:white;    border-radius:15px;   padding:10px;   margin-bottom:20px;    height:80px;        }
.log                        { background:white;    border-radius:15px;   padding:15px;   height:200px;
                              overflow-y:auto;       font-family:'Courier New', monospace;     font-size:12px;       line-height:1.4;        }        
.log-entry                  { margin-bottom:5px;     padding:2px 5px;      border-radius:3px;        }
.log-info                   { background: rgba(76, 175, 80, 0.2); }
.log-warning                { background: rgba(255, 152, 0, 0.2); }
.log-error                  { background: rgba(244, 67, 54, 0.2); }
.progFont                   { font-family:arial;  font-size:1rem; }

/* ============= C A R O U S E L  ============= */
.carousel-container         { max-width:1100px;       width:100%;     background:white;       border-radius:20px;      /* 900 */
                              box-shadow: 0 20px 40px rgba(0,0,0,0.1);            overflow:hidden;   }
.thumbnails                 { display:flex;       gap:10px;      padding:20px;    overflow-x:auto;   scrollbar-width:none;     -ms-overflow-style: none;        }
.thumbnails::-webkit-scrollbar {              display: none;        }
.thumb                      { width:60px;         height: 60px;      border-radius:10px;    object-fit:cover;   cursor:pointer;   opacity: 0.6;
                              transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);            flex-shrink: 0;        }
.thumb.active               { opacity:1;          transform: scale(1.1);            box-shadow: 0 4px 15px rgba(0,0,0,0.2);        }
.carousel                   { position:relative;  height: 500px;            overflow: hidden;        }
.carousel-track             { display:flex;       height: 100%;            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);        }
.slide                      { min-width:100%;     height: 100%;            position: relative;        }
.slide img                  { width:100%;         height: 100%;            object-fit: cover;        }
.galleryButton              { position:absolute;  top:50%;    border:none;    width:60px;    height:60px;    z-index:10;    cursor:pointer;
                              transform:translateY(-50%);     transition: all 0.3s ease;     opacity:.3;      }
.galleryButton:hover        { opacity:.6;    }
.prev                       { left:20px;    }
.next                       { right:20px;   }
.indicators                 { position:absolute;     bottom:20px;    left:50%;     transform:translateX(-50%);    display:flex;     gap:8px;    z-index:10;   }
.dot                        { width:25px;            height:25px;    border-radius:50%;     background:rgba(255,255,255,0.5);     cursor:pointer;    transition:all 0.3s ease;    }
.dot.active                 { background:white;    transform: scale(1.2);        }

/* ============= RESPONSIVE ADJUSTMENTS ============= */
@media (min-width:1930px) {
    body                    { background-size:contain;    }
}
@media (max-width:1400px) {
    .dreamLogo              { max-width:450px; } 
    .servicesImage          { width:92px;     margin:0px 8px;}
    .nextServiceImage       { width:20px;   }
    .faqItem                { margin:0rem 2rem;   }
    .prevImgContainer       { position:relative;    width:350px;    height:215px;  } 
    .contactCell            { padding:20px 2px;     font-size:1.5rem;   }
}
@media (max-width:1200px) {
    .sectionIcon            { height:50px;       }
    .level1HeaderFont       { font-size:2rem;    }
    .level1HeaderFont:hover { font-size:2.1rem;  }
    .level2HeaderFont       { font-size:1.6rem;  }      
    .level2HeaderFont:hover { font-size:1.7rem;  }        
    .collapseIcon           { width:20px;  }   
    .prevImgContainer       { position:relative;    width:550px;    height:340px;   }
    .contactCell            { padding:20px 2px;     font-size:1rem;   }
    .homeText               { font-size:1.4rem; }
}
@media (max-width:768px) {
    body                    { font-size:1.2rem;  }
    .sectionIcon            { height:30px;       }
    .level1HeaderFont       { font-size:1.2rem;  } 
    .level1HeaderFont:hover { font-size:1.3rem;  } 
    .level2HeaderFont       { font-size:1rem;    }
    .level2HeaderFont:hover { font-size:1.1rem;  }
    .leftPadded             { padding-left:0px;  }
    .nextServiceImage       { width:0px;         }
    .servicesImage          { width:65px;   margin:0px 8px;}
    .freeServiceImage       { width:55px;        }
    .service-block          { padding:1rem;      }
    .bed-preview-container  { min-height:200px;  }
    h3                      { font-size:12px;    }
    .prevImgContainer       { position:relative;    width:250px;      height:130px;         }  
    .legPicker              { height:40px;       }
}
@media (max-width:576px) {
    .dreamLogo              { max-width:350px;     }   
    body                    { padding-top:60px;    }
    .navbar-brand           { font-size:1.2rem;    }
    h1                      { font-size:1.75rem;   }
    h2                      { font-size:1.5rem;    }
    .level1HeaderFont       { font-size:.9rem;     } 
    .level1HeaderFont:hover { font-size:1rem;      } 
    .level2HeaderFont       { font-size:0.8rem;    } 
    .level2HeaderFont:hover { font-size:0.9rem;    } 
    .service-block::before  { left:1rem;   right:1rem;   } 
}
@media (max-width:450px) {
    .dreamLogo              { max-width:300px;  } 
    .prevImgContainer       { position:relative;    width:200px;      height:120px;     margin:0 auto;     }  
}



