
@media only screen and (max-width: 500px)
{ .hide-below-500px { display: none !important; } }

@media only screen and (min-width: 501px)
{ .hide-above-500px { display: none !important; } }

@media only screen and (max-width: 600px)
{ .hide-below-600px { display: none !important; } }

@media only screen and (min-width: 601px)
{ .hide-above-600px { display: none !important; } }

@media only screen and (max-width: 700px)
{ .hide-below-700px { display: none !important; } }

@media only screen and (min-width: 701px)
{ .hide-above-700px { display: none !important; } }

@media only screen and (max-width: 800px)
{ .hide-below-800px { display: none !important; } }

@media only screen and (min-width: 801px)
{ .hide-above-800px { display: none !important; } }

@media only screen and (max-width: 900px)
{ .hide-below-900px { display: none !important; } }

@media only screen and (min-width: 901px)
{ .hide-above-900px { display: none !important; } }

@media only screen and (max-width: 1000px)
{ .hide-below-1000px { display: none !important; } }

@media only screen and (min-width: 1001px)
{ .hide-above-1000px { display: none !important; } }

@media only screen and (max-width: 1100px)
{ .hide-below-1100px { display: none !important; } }

@media only screen and (min-width: 1101px)
{ .hide-above-1100px { display: none !important; } }


@media only screen and (min-width: 1000px)
{ .flex-horizontal-wide { flex-direction: row; } }

@media only screen and (max-width: 1000px)
{ .flex-vertical-narrow { flex-direction: column; } }


:root
{
    --main-color: #ecd2b6;
    --second-color: #f0e1c6;
    --font-color: #3d352d;
    --top-bar-color: #c4a889;
}

body
{
    color: var(--font-color);
    background-color: var(--main-color);
    margin: 0px;
    padding: 0px;
    font-family: "PT Serif", serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: .1rem;
}

a
{
    text-decoration: none;
    color: var(--font-color);
}

h1
{
    text-align: center;
    margin-top: 140px;
    margin-bottom: 50px;
    font-size: min(48px, 10vw);
    padding: 0 10vw;
    font-weight: 400;
}

img
{
    border-radius: 30px;
}

form, #form-success
{
    text-align: left;
    margin: 30px 10vw;
    padding: 20px 20px;
    border: 1px solid #000;
    box-sizing: border-box;
    border-radius: 10px;
}

label
{
    display: inline-block;
    text-align: left;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

input[type=text]
{
    width: min(330px, 80%);
    height: 27px;
    font-size: 24px;
}
input[type=checkbox]
{
    width: 35px;
    position: relative;
    left: 12px;
    bottom: 4px;
    transform: scale(1.5);
}
input[type=radio]
{
    width: 35px;
    position: relative;
    left: 12px;
    bottom: 4px;
    transform: scale(1.5);
}
textarea
{
    outline: none;
    border: 0px;
    resize: none;
    width: max(70%, 350px);
    margin: 20px 0px;
    height: 150px;
}
#prefer-to-meet
{
    display: none;
}

.form-error
{
    font-size: 20px;
    color: #F00;
    margin-left: 15px;
    display: none;
    white-space: nowrap;
}

.big-div-section
{
    text-align: center;
    padding: 10vh 10vw;
    user-select: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.banner-image
{
    margin-top: 160px;
    margin-left: 10vw;
    width: 80vw;
    max-height: 60vh;
    border-radius: 0px;
    object-fit: cover;
    object-position: top;
}

.fill-main-color
{
    background-color: var(--main-color);
}
.fill-second-color
{
    background-color: var(--second-color);
}

.default-cta-button, .brown-cta-button
{
    font-family: "PT Serif", serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: .1rem;
    letter-spacing: .08rem;
    font-size: min(30px, 6vw);
    padding: 8px 16px;
    border-radius: 8px;
    border: 0px;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}
.default-cta-button
{
    background-color: #fff9ee;
}
.default-cta-button:hover
{
    background-color: #e3d8c6;
}
.default-cta-button:active
{
    background-color: #cec4b2;  
}
.brown-cta-button
{
    background-color: var(--top-bar-color);
}
.brown-cta-button:hover
{
    background-color: #b29b80;
}
.brown-cta-button:active
{
    background-color: #9c876f;
}

.normal-font-size, .faq-question, .faq-answer
{
    font-size: max(24px, 1.6vw);
}

.homepage-main-photo-div
{
    margin-top: 80px;
    position: relative;
    color: #fff;
    text-align: center;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    cursor: default;
}

.homepage-main-photo-div > img
{
    border-radius: 0px !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    object-fit: cover;
}

.homepage-main-photo-text
{
    position: absolute;
    left: 0;
    right: 0;
}

#homepage-panel-2-container
{
    display: flex;
    justify-content: center;
    padding: 5vh 0;
}
#homepage-panel-2-img
{
    align-self: center;
    margin: max(40px, 5vh);
    min-width: 50vw;
}
#homepage-panel-2-text
{
    align-self: center;
    margin: max(40px, 5vh);
}

#top-bar
{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    background-color: #c4a889;
    z-index: 10;
    height: 80px;
}

#top-bar-left
{
    line-height: 80px;
    font-size: min(24px, 5vw);
    margin-left: 5vw;
    letter-spacing: .2rem;
}

#top-bar-scott-linton
{
    line-height: 80px;
    font-size: min(30px, 6vw);
    letter-spacing: .1rem;
    margin-right: 2px;
}

#top-bar-tab-container
{
    float: right;
    margin-right: 30px;
}

.top-bar-tab
{
    line-height: 80px;
    font-size: max(min(28px, 2vw), 18px);
    margin-left: 35px;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}
.top-bar-tab:hover, .top-bar-tab:hover > a, .top-bar-tabs-menu-hidden-item > a:hover, #top-bar-left > a:hover
{
    color: #806f5e;
}

#top-bar-button
{
    float: right;
    font-size: max(min(24px, 2vw), 16px);
    padding: 6px 12px;
    margin-top: 20px;
    margin-right: 3vw;
    margin-left: 20px;
}

#show-menu-button
{
    position: fixed;
    top: 15px;
    right: 3vw;
    cursor: pointer;
}

#top-bar-tabs-menu-hidden
{
    display: none;
    position: fixed;
    top: 75px;
    left: 0px;
    right: 0px;
    z-index: 10;
    background-color: var(--top-bar-color);
    padding: 10px 0px;
}

#top-bar-tabs-menu-hidden-close-x
{
    cursor: pointer;
    position: absolute;
    right: 5vw;
    top: 0;
}

.top-bar-tabs-menu-hidden-item
{
    height: 30px;
    line-height: 30px;
    font-size: 24px;
    padding-left: 30px;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

#mobile-menu-schedule-button
{
    display: inline-block;
    font-size: 24px;
    margin: 10px 0 10px 25px;
}

.faq-question, .faq-answer
{
    margin: 0 10vw;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    cursor: default;
}

.faq-question
{
    font-weight: 700;
}
.faq-answer
{
    letter-spacing: 0.05em;
    margin-bottom: 40px;
}

#footer
{
    background-color: #dfc2a0;
    font-size: 24px;
    line-height: 28px;
    overflow: auto;
}
#footer > div
{
    padding: 30px;
    box-sizing: border-box;
}
#footer-left-desktop
{
    float: left;
    width: calc(100% - 600px);
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}
#footer-left-mobile
{
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}
#footer-right-desktop
{
    float: right;
    width: 550px;
    text-align: center;
}
#footer-right-mobile
{
    text-align: center;
}


.main-photo-beis-hey, #beis-hey-normal-page
{
    font-family: "Tinos", serif;
    font-weight: 400;
    font-style: normal;
}
.main-photo-beis-hey
{
    position: absolute;
    top: 15px;
    right: 15px;
    color: #fff;
    z-index: 8;
    font-size: 18px;
}
#beis-hey-normal-page
{
    position: absolute;
    top: 100px;
    right: 15px;
    color: var(--font-color);
    z-index: 8;
    font-size: 18px;
}

#homepage-panel-3-div
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 80px 0 12vh 0;
}
#homepage-panel-3-img
{
    align-self: center;
    width: 35vw;
    padding-right: 2vw;
}
#homepage-panel-3-text
{
    align-self: center;
    width: 50vw;
    padding-left: 5vw;
    text-align: left;
    padding-top: 20px;
}
