* { box-sizing: border-box;}

*,
*::before,
*::after { 
    margin: 0;
    padding: 0; 
    box-sizing: border-box;
}

html { 
    margin: 0;
    font-family: "Open sans", sans-serif;
}

body { 
    display: flex;
    flex-direction: column;
    color: rgb(255, 255, 255);
    margin: 0;
    background-color: white;
}

img { 
    max-inline-size: 100%; 
}

:root {
    --themeBackgroundColor: #800020;
    --regularTextColor: rgb(0, 0, 0);
    --buttonBackgroundColor: rgb(62, 73, 173);
}

header {
    display: grid;
    background-color: white;
    grid-auto-rows: minmax(30px, auto);
    box-shadow: 0px 2px 8px rgb(150, 149, 149);
}

.banner {
    display: flex;
    flex-direction: column;
}

    .logoDiv {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

        .logo { 
            max-inline-size: 250px; 
            margin: 1rem auto .5rem auto; 
        }

        .menu-icons {
            display: none;
            color: rgb(108, 103, 103);
            font-size: 3rem;
            cursor: pointer;
            z-index: 1500;
        }
        
        i.first-icon {
            padding-left: 0;
        }
        
    nav {
        display: flex;
        justify-content: center;
    }
            
        .nav-list {
            display: flex;
            list-style: none;
        }

        .nav-list > li { line-height: 3rem; }
            
        .nav-list a {
                color: #4a4949;
                padding: 0 0.8rem;
                font-size: 0.9rem;
                text-transform: uppercase;  
                text-decoration: none;
                transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
        }

            .nav-list a:hover, .nav-list a:focus-visible {
                    box-shadow: inset 190px 0 0 0 #928a8a;
                    color: rgb(255, 255, 255);
                    font-weight: bold;
                    padding: .8rem 1.4rem;
            } 

            .nav-list a.noHover {
                box-shadow: none;   
            } 

            .sub-menu {
                    inline-size: auto;
                    display: block;
                    position: absolute;    
                    list-style: none;
                    background-color: white;
                    z-index: 1000;
                    padding: 1rem 2rem 0 1rem;
                    opacity: 1;
                    visibility: hidden;
                    transition: all 650ms ease;
                    block-size: 310px;
            }

                .sub-menu li { line-height: 3rem; }

                .nav-list li:hover > .sub-menu {
                    opacity: 1;
                    visibility: visible;
                }

/* ======================= end of header styles ==================== */

.wrapper {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    max-inline-size: 1000px;
    margin-inline: auto;
    color: var(--regularTextColor);
}

    .wrapper h1 {
        font-family: 'Lucida Sans Unicode', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans', Geneva, Verdana, sans-serif;
        font-size: 1.7rem;
        font-style: italic;
        font-weight: 600;
        color: #3a3a74;
        border: 1px gray solid;
        padding: .4rem 1rem;
        margin: 2rem auto 1rem auto; 
        text-align: center;
    }    

    .wrapper h2 {
        font-family: 'Lucida Sans Unicode', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans', Geneva, Verdana, sans-serif;
        font-size: 1.3rem;
        color: #3a3a74;
        margin: .5rem auto;
        text-align: center;
     }

    .wrapper h3 {
        font-size: 1rem;
        font-style: italic;
        color: #3a3a74;
        margin: 1rem auto .5rem auto;
    }

    .basicInfo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-block: 2rem;
        border: 2px rgb(205, 205, 205) solid;
        block-size: 160px;
        inline-size: 300px;
    }

.standardButton {
  align-items: center;
  appearance: none;
  background-image: radial-gradient(100% 25% at 50% 0, #ffffff 0, #646464 100%);
  border: 0;
  border-radius: 6px;
  box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  height: 32px;
  justify-content: center;
  margin: .5rem auto 0.7rem auto;
  padding: 5px 12px;
  transition: box-shadow .15s,transform .15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow,transform;
  font-size: 18px;
}

.standardButton:hover, button.standardButton:focus-visible {
  background-image: radial-gradient(100% 25% at 50% 0, #ffffff 0, #994949 100%);
  transform: translateY(-2px);
}

.standardButton:active {
  box-shadow: #3c4fe0 0 3px 7px inset;
  transform: translateY(2px);
}

    button.standardButton a {
        color: white;
        text-decoration: none;
    }


   section.policy {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        inline-size: 70%;
        margin-top: 1rem;
   }

        section.policy h3 {
            font-size: 1.2rem;
            margin: 2rem 0 .3rem 0;
        }

        section.policy p {
            text-align: justify;
            font-size: 1rem;
        }

    .frontImageLinks {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 7rem;
        row-gap: 3rem;
    }

            .frontImageLinks a { text-decoration: none; }

            .frontImageLinks figure { display: table; }

            .frontImageLinks img {
               block-size: auto;
            }

            .frontImageLinks figcaption {
                display: table-caption;
                caption-side: bottom;
                line-height: 1.4rem;
                color: white;
                font-size: 1rem;
                background-color: rgb(131, 131, 131);
                text-align: center;
                text-shadow: 1px 2px 2px #363636;
            }   
            
    main  {
        display: flex;
        align-items: center;
        justify-content:left;
        flex-direction: column;
        inline-size: 90%;
        text-align: justify;
        padding: 0 4rem;
    }

            main p { 
                margin-bottom: 1rem; 
            }

            ul.indent { 
                list-style-type: disc;
                margin: 0.5rem 3rem 1rem 2rem;
                line-height: 1.5rem; 

            }
                ul.indent li { 
                    margin: 0 0 1rem 0; 
                }
        
/****************** within .right: *******************/

.right { 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 1rem 0 0 0; 
    inline-size: 50%; 
    background-color: white; 
    box-shadow: 2px 4px 8px 2px rgba(0, 0, 0, 0.2);
    color: rgb(77, 77, 77);
    font-size: 1.1rem;
    font-weight: bold;  
    text-align: center;
    padding: .3rem 2rem 1rem 2rem;
    border-radius: 1rem;
}

   .right h1 { 
        color: black;
        font-size: 1.4rem; 
        line-height: 2.1rem;
        border: none;
    }

    .right h2 { 
        color: black;
        font-size: 1.3rem; 
        margin: 0;
    }

    .right p { 
        margin: 0 auto 1.8rem auto; 
    }

    a[href^="tel:"] {
        color: rgb(77, 77, 77) !important; 
        text-decoration: none !important; 
    }

div.socialMediaSide {

    block-size: auto;
    margin: .8rem auto 1rem auto;
    padding: .5rem .5rem .2rem .5rem;
    border-radius: 3px;
    background-image: radial-gradient(100% 25% at 50% 0, #ffffff 0, #646464 100%);
    border: 0;
    border-radius: 6px;
    box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
}
    
div.socialMediaSide img { 
    display: inline-block;
    max-inline-size: 25px; 
    opacity: 0.9;  
    margin: 0;
}

.galleryLinkPara {
    font-size: 1.2rem;
    color: #486b97;
    text-align: center;
    line-height: 1.5rem;
    margin: 2rem auto 3rem auto;
}

    .galleryLinkPara a:hover, .galleryLinkPara a:focus-visible  {
        color: #a31111;
    }

form {
    margin: 1rem 2rem;
}    

.appmt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*********************** footer: **************************/

footer { 
    display: flex;
    justify-content: center;
    color: #ffffff;
    background-color: rgb(131, 131, 131);
    inline-size: 100%;
    font-size: 1rem;
    margin-top: 2rem;
    text-align: center;
    padding: 0.8rem; 
}

/*********************** images *****************************/

figure.team { 
    margin: 5rem auto 3rem auto; 
    text-align: center; 
}

    figure.team figcaption {
        margin: 2rem 0 0 0;
        font-size: 1rem;
        line-height: 1.5em;
        text-align: center; 
    }		

    figure.team img { 
        display: inline;
        max-inline-size: 60%; 
        border-radius: .75rem;
    }

figure.befAftFig, figure.befAftFig2 { 
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto 1rem auto;
}

    .befAftFig img { 
        max-inline-size: 70%;
        block-size: auto;
    }

    figure.befAftFig figcaption, figure.befAftFig2 figcaption {
        display: inline-block;
        caption-side: bottom;
        font-size: 1.2rem;
        margin-top: .5rem;
    }

    .befAftFig2 img { 
        max-inline-size: 60%;
        block-size: auto;
    }

.nanobrowImagesDiv {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7rem;
    margin: 2rem auto;
}

    .nanobrowImages img {
        block-size: auto;
        margin-bottom: 2rem;
    }       
            
.flexDiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .flexDiv img {
        margin: 2rem 0;
    }
            
    .rolloverImageDiv {
        display: flex;
        flex-direction: column;
        justify-content: center;

    }

    .rolloverImageDiv img {
       margin: 3% auto 2% auto;
    }

    .rolloverImageDiv img:hover, .rolloverImageDiv img:focus-visible { transform: scale(2.0); } 
        /* (zoom - Note: if the zoom is too large, it will go outside of the viewport) */

/*********************************** video **************************************/

.iframe1 {
    margin: 2rem auto 3rem auto;
    inline-size: 100%; 
    max-inline-size: 800px;
    block-size: 440px;
}

.iframe2 {
   margin: 3rem auto 2rem auto;
   inline-size: 80%; 
   block-size: 500px; 
}

.flexVidDiv { 
    margin: 1rem 0 2rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.standardVideo {
    margin-bottom: 31rem;
}

video {
    margin-top: 25px;
    inline-size: 100%;
    max-inline-size: 600px;
    block-size: auto;
}


/******************************* Photo gallery page: ********************************/

.photo-gallery-grid {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
}

    /* columns */
    .grid-item {
        /* Create two equal columns that sits next to each other */
        -ms-flex: 50%; /* IE10 */
        flex: 50%;
        max-inline-size: 50%;
        padding: 20px 15px;
    }

    .grid-item img {
        margin-top: 8px;
        vertical-align: middle;
    }
            
/******************************* contactUs page: ********************************/

.contactInfo {
    display: grid;
    grid-template-columns: repeat(3 1fr);
    grid-template-rows: 7rem 3rem 3rem 3rem 3rem 3rem; 
    grid-row-gap: 20px;
    gap: 2rem;
}

    .contactInfo label {
        justify-self: start;
        grid-column: 1 / 2;
        padding: .5rem 1rem 0 0;
       }

    input, textarea {
        grid-column: 2 / 3;
        font-size: 1rem;
        padding-left: .25rem;
    }

    .controlButtons {
        display: flex;  
        justify-content: center;
        align-items: center;
        margin-top: 2rem;
    }

        .controlButtons button {
            cursor: pointer;
            padding: 0.2rem 0.4rem;
            font-size: 1.2rem;
            border-radius: 1rem;
            margin-right: 1rem;
            color: white;
            background-color: rgb(79, 79, 79);
        }
        
.cancFee {
    margin-top: 2rem;
}        
/********************************* Specials page: **********************************/

.specialsText { 
    padding: 0 2.5rem; 
    margin-bottom: 2rem;
}

.wrapper .specialsText h1 {
    color:#a31010;
    font-size: 5rem;
    text-align: center;
    font-weight: bold;
    line-height: 4rem;
    margin-top: 5rem;
}

section.specialsText h2 {
    margin: 5rem auto 1.5rem auto;
    color:#1745a8;
    font-size: 3.5em;
    font-weight: bold;
    text-align: center;
    line-height: 3rem;
}

section.specialsText p {
    color:#1745a8;
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    line-height: 2.5rem;
    margin-bottom: 1rem;
}
                   
section.specialsText p.saleConditions {
    font-style: italic;
    margin: 0 auto 1rem auto;
}

.specialsText em {
    color: #a31010;
    font-size: 3rem;
    font-style: bold;
}

section.specialsText div { margin: 3rem auto 2rem auto; }

.wrapper .specialsText p.smalltext {
        font-size: 1.8rem;
}

.specialsImage {
    margin-top: 2rem;
   inline-size: 70%;
    max-inline-size: 600px;
}

a.linkStyle  {
     text-align: center;
     margin: 3rem auto 1rem auto;
}

img.hoverGlow {
    max-inline-size: 70%;
}

img.hoverGlow:hover {
    background: rgb(147, 8, 17);
    box-shadow: 0 0 40px rgb(147, 8, 17);
}

/* ========================================================================= */
/* ============================= Media Queries ============================= */
/* ========================================================================= */

@media screen and (width < 960px) {

    header { display: block; }

    .banner {
        justify-content: center;
        align-items: center;
        padding: 0; 
    }
    
    .logoDiv { 
        margin-top: .2rem;
    }

    .menu-icons { 
        display: flex; 
        }

    .first-icon { padding-left: 3rem; }
        
     .nav-list {
        display: none;
        position: fixed;
        margin-top: 3rem;
        top: 9rem; 
        left: 35%; 
        inline-size: 30vh;
        padding: 1rem 0;
        flex-direction: column;
        align-items: initial;
        background-color: white;
        z-index: 1000;
    }

    .nav-list > li { line-height: 3rem; }

    .sub-menu { 
        top: 5rem;
        right: 0rem;
    }

    .nav-list li:hover > .sub-menu {
        opacity: 1;
        visibility: visible;
        max-height: initial;
    }

    .ion-md-close { display: none; }
    nav.active .ion-md-close { display: block; }
    nav.active .ion-md-menu { display: none; }
    nav.active .nav-list { display: flex; }

    .wrapper { 
        margin: 0 5px; 
        justify-content: left;   
    }  

        .wrapper h1 { 
            margin: 1.5rem auto 1.2rem auto; 
            font-size: 1.3rem;
            line-height: 2rem;
            text-align: center;
        }

        .wrapper h2, .wrapper h3 { 
            margin: 0.5rem auto; 
            line-height: 1.5rem;
            font-size: 1rem;
        }
        
    .basicInfo {
        margin-block: 1.5rem;
        block-size: 150px;
    }

    .frontImageLinks {
        margin-top: 0.5rem;
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
        max-inline-size: 80%;
    }
    
        .frontImageLinks  img {
            max-inline-size: 90%;
        }    

        .spacer { display: none;}

        .frontImageLinks figcaption { 
            font-size: 1rem;
            max-inline-size: 90%; 
        }   

    a.linkStyle  {
        margin: 1rem auto 2rem auto;
    }            

    .right {
        inline-size: 90%;
    }

        .right h2 { 
            font-size: 1.3rem; 
            margin: 0;
        }

        .right p { 
            margin: .2rem auto 1.8rem auto; 
        }
    
        main {
           inline-size: 100%;
           font-size: 1rem;
           line-height: 1.3rem;
           padding: 0 2rem;
        }    
         
        figure.befAftFig figcaption {
            font-size: 1rem;
        }

        .nanobrowImagesDiv {
            grid-template-columns: repeat(1, 1fr);
        }

        .nanobrowImages img {
           block-size: auto;
        }    

        .contactInfo {
            gap: .5rem;
            text-align:initial;
            grid-row-gap: 2rem;
        }

       .contactInfo label {
            font-size: 1.1rem;
            line-height: 1.2rem;
        }

        .wrapper .specialsText h1 {
            font-size: 3.5rem;
        } 
        
        .wrapper .specialsText h2 {
            font-size: 3rem;
            line-height: 3rem;
        } 
        
        .wrapper .specialsText p {
            font-size: 2.5rem;
            line-height: 2.5rem;
        } 

        footer { 
            margin-top: 1.5rem;
        }

        .iframe2 {
            margin: 3rem auto 2rem auto;
           inline-size: 100%; 
           block-size: 350px; 
        }

        .rolloverImageDiv img:hover, .rolloverImageDiv img:focus-visible { transform: scale(1.3); } 

        .iframe1 {
            margin: 1rem auto;
           block-size: 300px;
        }

        .specialsImage {
            inline-size: 80%;
         }
         
    .grid-item {
       padding: 10px 10px;
    }    

    section.policy {
        inline-size: 90%;
        margin-top: 0rem;
    } 

    section.policy h3 {
        font-size: 15px;
    }

    div.socialMediaSide {
        inline-size: 90px;
        margin: 0.7rem auto 1rem auto;
    }
}    

@media screen and (width < 786px) {

    .frontImageLinks figcaption { 
        font-size: 0.8rem; 
        line-height: 1.2rem;
    }   

    .befAftFig img { 
        max-inline-size: 90%;
    }

}    

@media screen and (width < 743px) {

    .frontImageLinks {
        max-inline-size: 100%;
    }
    
    .frontImageLinks  img {
        max-inline-size: 100%;
    }    

    .frontImageLinks figcaption { 
        max-inline-size: 100%; 
    }   
 }   

 @media screen and (width < 500px) {

    .specialsImage {
        inline-size: 100%;
    }
        
    .basicInfo {
        block-size: 140px;
        margin-block: 1.5rem;
        inline-size: 270px;
    }

    .grid-item {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
        padding: 0px;
    }

    .frontImageLinks {
        column-gap: 1rem;
        margin-top: 0rem;
    }

    .frontImageLinks figcaption { 
        font-size: 0.7rem; 
        line-height: 1.1rem;
    }   

    .befAftFig img { 
        max-inline-size: 100%;
    }


    .right h1 { 
        font-size: 1.2rem; 
        line-height: 1.5rem;
    }

    .right h2 { 
        font-size: 1.2rem; 
    }

    .right p { 
        font-size: 1rem;
        margin: .2rem auto 1.8rem auto; 
    }
 }

 @media screen and (width < 413px) {

    .right h1 { 
        font-size: 1rem; 
        line-height: 1.4rem;
    }
 }