/* HTML Reset */

/* Bootstrap Customizations */
/* Form Element Colors - Input Type=Range */
/* **Not Finished - Add in BS colors for primary, secodary, success, info, warning, danger, light, dark, white, black** */
input[type="range"].form-range-dot-blue::-webkit-slider-thumb { background-color: #0d6efd; }
input[type="range"].form-range-dot-indigo::-webkit-slider-thumb { background-color: #6610f2; }
input[type="range"].form-range-dot-purple::-webkit-slider-thumb { background-color: #6f42c1; }
input[type="range"].form-range-dot-pink::-webkit-slider-thumb { background-color: #d63384; }
input[type="range"].form-range-dot-red::-webkit-slider-thumb { background-color: #dc3545; }
input[type="range"].form-range-dot-orange::-webkit-slider-thumb { background-color: #fd7e14; }
input[type="range"].form-range-dot-yellow::-webkit-slider-thumb { background-color: #ffc107; }
input[type="range"].form-range-dot-green::-webkit-slider-thumb { background-color: #198754; }
input[type="range"].form-range-dot-teal::-webkit-slider-thumb { background-color: #20c997; }
input[type="range"].form-range-dot-cyan::-webkit-slider-thumb { background-color: #0dcaf0; }

/* Bootstrap Carousel */
/* .carousel { margin-top: 3.5em; } - Turned off Nav bar */
.carousel img { width: 100%; }
.carousel-caption { height: 12em; width: 80%; }
.carousel-caption {
    background-color: rgba(255, 255, 255, .75);
    border: #fff solid;
    color: #000;
}

/* Bootstrap - Media Optimization */
/* Bootstrap - Large Breakpoint */
@media (max-width: 992px) { 
    /* Bootstrap Navigation */
    .navbar-brand.mx-auto { position: relative; left: 5%; }
    /* Bootstrap Carousel */
    .carousel img { min-height: 20em; min-width: 992px; }
}
/* Boostrap - Medium Breakpoint */
@media (min-width: 576px) and (max-width: 768px) {
    /* Currently Blank */
}

/* Bootstrap - Medium Breakpoint (768px - 1px) and below */
@media (max-width: 767px) {
    /* Bootstrap Spacing / Utilities - Customization */
    .p-xs-md-0 { padding: 0 !important; }
    .m-xs-md-0 { margin: 0 !important; }
}

/* Bootstrap - Small Breakpoint */
@media (max-width: 576px) {
    /* Bootstrap Navigation */
    .navbar-brand.mx-auto { position: relative; left: 7%; }
    .navbar-brand.mx-auto img
    { 
        height: 2.5em;
        width: 100%;
    }
}

/* Bootstrap - Medium Breakpoint (576px - 1px) and below */
@media (max-width: 575px) {
/* Bootstrap Spacing / Utilities - Customization */
    .p-xs-sm-0 { padding: 0 !important; }
    .m-xs-sm-0 { margin: 0 !important; }
}

/* Stone Lighthouse Realty Corp - Colors */
/* SLRC - Element Colors: Part 1 - Background Colors & Buttons */
.text-bg-blue-slrc, .btn-blue-slrc, .bg-blue-slrc, input[type="range"].form-range-dot-blue-slrc::-webkit-slider-thumb { background-color: #22819E; }
.text-bg-lt-blue-slrc, .btn-lt-blue-slrc, .bg-lt-blue-slrc, input[type="range"].form-range-dot-lt-blue-slrc::-webkit-slider-thumb { background-color: #87C7EC; }
.text-bg-purple-slrc, .btn-purple-slrc, .bg-purple-slrc, input[type="range"].form-range-dot-purple-slrc::-webkit-slider-thumb { background-color: #A66F8D; }
.text-bg-red-slrc, .btn-red-slrc, .bg-red-slrc, input[type="range"].form-range-dot-red-slrc::-webkit-slider-thumb { background-color: #C51F30; }
.text-bg-yellow-slrc, .btn-yellow-slrc, .bg-yellow-slrc, input[type="range"].form-range-dot-yellow-slrc::-webkit-slider-thumb { background-color: #FFB607; }
.text-bg-gray-slrc, .btn-gray-slrc, .bg-gray-slrc, input[type="range"].form-range-dot-gray-slrc::-webkit-slider-thumb { background-color: #808080; }
/* SLRC - Element Colors: Part 2 - Text Colors & Buttons */
.text-bg-blue-slrc, .btn-blue-slrc { color: #fff !important; }
.text-bg-lt-blue-slrc, .btn-lt-blue-slrc { color: #000 !important; }
.text-bg-purple-slrc, .btn-purple-slrc { color: #fff !important; }
.text-bg-red-slrc, .btn-red-slrc { color: #fff !important; }
.text-bg-yellow-slrc, .btn-yellow-slrc { color: #000 !important; }
.text-bg-gray-slrc, .btn-gray-slrc { color: #fff !important; }
/* SLRC - Element Colors: Part 3 - Border Colors & Buttons */
.text-bg-blue-slrc, .text-border-blue-slrc, .bg-blue-slrc, .border-blue-slrc, .btn-blue-slrc { border-color: #22819E !important;}
.text-bg-lt-blue-slrc, .text-border-lt-blue-slrc, .bg-lt-blue-slrc, .border-lt-blue-slrc, .btn-lt-blue-slrc { border-color: #87C7EC !important; }
.text-bg-purple-slrc, .text-border-purple-slrc, .bg-purple-slrc, .border-purple-slrc, .btn-purple-slrc { border-color: #A66F8D !important; }
.text-bg-red-slrc, .text-border-red-slrc, .bg-red-slrc, .border-red-slrc, .btn-red-slrc { border-color: #C51F30 !important; }
.text-bg-yellow-slrc, .text-border-yellow-slrc, .bg-yellow-slrc, .border-yellow-slrc, .btn-yellow-slrc { border-color: #FFB607 !important; }
.text-bg-gray-slrc, .text-border-gray-slrc, .bg-gray-slrc, .border-gray-slrc, .btn-gray-slrc { border-color: #808080 !important; }

/* SLRC - Button State - Colors: Part 1 - Focus & Hover */
.btn-blue-slrc:focus, .btn-blue-slrc:hover { background-color: #1D6066; }
.btn-lt-blue-slrc:focus, .btn-lt-blue-slrc:hover { background-color: #5A8399; }
.btn-purple-slrc:focus, .btn-purple-slrc:hover { background-color: #724E64; }
.btn-red-slrc:focus, .btn-red-slrc:hover { background-color: #7F1626; }
.btn-yellow-slrc:focus, .btn-yellow-slrc:hover { background-color: #BA8211; }
.btn-gray-slrc:focus, .btn-gray-slrc:hover { background-color: #666766; }
/* SLRC - Button State - Colors: Part 2 - Active */
/* Note: The !important designation is needed to overwrite bootstrap's ":active" on all button types. */
.btn-blue-slrc:active { background-color: #22819E !important; }
.btn-lt-blue-slrc:active { background-color: #87C7EC !important; }
.btn-purple-slrc:active { background-color: #A66F8D !important; }
.btn-red-slrc:active { background-color: #C51F30 !important; }
.btn-yellow-slrc:active { background-color: #FFB607 !important; }
.btn-gray-slrc { background-color: #808080 !important; }
/* SLRC - Button State - Colors: Part 3 - Disabled */
.btn-blue-slrc:disabled { color: rgba(255, 255, 255, .75) !important; background-color: #35BECC; }
.btn-lt-blue-slrc:disabled { color: rgba(0, 0, 0, .125) !important; background-color: #BBE6F5; }
.btn-purple-slrc:disabled { color: rgba(255, 255, 255, .75) !important; background-color: #E59CC9; }
.btn-red-slrc:disabled { color: rgba(255, 255, 255, .75) !important; background-color: #FF335A; }
.btn-yellow-slrc:disabled { color: rgba(0, 0, 0, .125) !important; background-color: #F7BE63; }
.btn-gray-slrc:disabled { color: rgba(255, 255, 255, .75) !important; background-color: #B2B2B2; }

/* SLRC - Element Text Colors: Part 1 - Text & Links */
.text-blue-slrc, .text-border-blue-slrc, .link-blue-slrc { color: #22819E !important; }
.text-lt-blue-slrc, .text-border-lt-blue-slrc, .link-lt-blue-slrc { color: #87C7EC !important; }
.text-purple-slrc, .text-border-purple-slrc, .link-purple-slrc { color: #A66F8D !important; }
.text-red-slrc, .text-border-red-slrc, .link-red-slrc { color: #C51F30 !important; }
.text-yellow-slrc, .text-border-yellow-slrc, .link-yellow-slrc { color: #FFB607 !important; }
.text-gray-slrc, .text-border-gray-slrc, .link-gray-slrc { color: #808080 !important; }
/* SLRC - Element Text Colors: Part 2 - Link States - Focus & Hover */
.link-blue-slrc:focus, .link-blue-slrc:hover, a.text-blue-slrc:focus, a.text-blue-slrc:hover { color: #1D6066 !important; }
.link-lt-blue-slrc:focus, .link-lt-blue-slrc:hover, a.text-lt-blue-slrc:focus, a.text-lt-blue-slrc:hover { color: #5A8399 !important; }
.link-purple-slrc:focus, .link-purple-slrc:hover, a.text-purple-slrc:focus, a.text-purple-slrc:hover { color: #724E64 !important; }
.link-red-slrc:focus, .link-red-slrc:hover, a.text-red-slrc:focus, a.text-red-slrc:hover { color: #7F1626 !important; }
.link-yellow-slrc:focus, .link-yellow-slrc:hover, a.text-yellow-slrc:focus, a.text-yellow-slrc:hover { color: #BA8211 !important; }
.link-gray-slrc:focus, .link-gray-slrc:hover, a.text-gray-slrc:focus, a.text-gray-slrc:hover { color: #666766 !important; }

/* SLRC - Header Colors */
#wrap h1, #wrap h2, #wrap h3 { color: #22819E; }
#wrap h4, #wrap h5, #wrap h6 { color: #808080; }

/* SLRC - Site Logo - If Nav Bar is turned off */
#sitelogo {
    z-index: 99;
}

#sitelogo img {
    height: 10.65em;
    /* height: 8.65em; */
}

/* SLRC - Navigation Items */
.nav-item .active { cursor: default !important; }

/* Custom Functionality - Image */
.img-frame { overflow: hidden; }

/* Custom Page Section - Video Background */
#vid-bg {
    position: relative;
    overflow: hidden;
}

#vid-bg:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #87C7EC;
    opacity: 0.7;
    z-index: -95;
}

video.bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    z-index: -100; /* Previous Value: 0 */
}

/* @media (pointer: coarse) and (hover: none) { */
@media (max-width: 576px) {
    /* SLRC - Site Logo - If Nav Bar is turned off */
    /* #sitelogo {
        z-index: 99;
    } */

    #vid-bg {
        background: url("../img/bg-mobile-fallback.jpg") #87C7EC no-repeat center center fixed;
        background-size: cover;
        z-index: -99;
    }
    #vid-bg video {
        display: none;
    }
}

@media (min-width: 576px) {
    video.bg-video {
        background-size: cover
    }
}

/* Added Functionality - Bootstrap */
@media (min-width: 1400px) and (max-width: 1550px) {
    #sitelogo img {
        height: 8.65em;
    }
}

/* Bootstrap - Extra Large Breakpoint  */
@media (min-width: 1200px) and (max-width: 1400px) {
    /* SLRC - Site Logo - If Nav Bar is turned off */
    #sitelogo img {
        height: 6.65em;
    }
}

/* Bootstrap - (Part of) Large Breakpoint   */
@media (min-width: 1050px) and (max-width: 1200px) {
    /* SLRC - Site Logo - If Nav Bar is turned off */
    #sitelogo img {
        height: 5.65em;
    }
}


/* Bootstrap - Medium Breakpoint (768px - 992px) and (992px - 1050px; Bottom Part of) Large Breakpoint  */
@media (min-width: 768px) and (max-width: 1050px) {
    /* SLRC - Site Logo - If Nav Bar is turned off */
    #sitelogo {
        margin-top: .75rem !important
    }

    #sitelogo img {
        height: 4.65em;
    }
}

/* Bootstrap - Large Breakpoint and below */
@media (max-width: 768px) {
    /* SLRC - Site Logo - If Nav Bar is turned off */
    #sitelogo {
        margin-top: .5rem !important
    }

    #sitelogo img {
        height: 5em;
    }
    
    .carousel img {
        position: relative;
    };

    .carousel #weAreHere img {
        right: 20%;
    }
}

/* Bootstrap - Medium Breakpoint and above  */
@media (min-width: 576px) {
    /* Bootstrap Text - Text wrapping and overflow */
    .text-md-nowrap { 
        white-space: nowrap !important;
    }
}

/* Bootstrap - Medium Breakpoint and below  */
@media (max-width: 576px) {
    /* SLRC - Site Logo - If Nav Bar is turned off */
    /* #sitelogo {
        position: inherit;
        transform: inherit;
    } */
}

/* Breakpoint Optimization */
/* Bootstrap - Small Breakpoint */
@media (max-width: 576px) {
    /* Bootstrap Carousel */
    .carousel-caption {
        top: 55% !important;
        height: 60%;
        padding: .35em;
    }

    .carousel #weAreHere img {
        right: 60%;
    }

    .carousel #trustedProven img {
        right: 30%;
    }
}

@media (max-width: 390px) {
    /* Bootstrap Carousel */
    .carousel #buildLegacy img {
        right: 30%;
    }

    .carousel #trustedProven img {
        right: 55%;
    }

    .carousel-caption .display-2 {
        font-size: 2rem !important;
    }
}

@media (min-width: 351px) {
    /* SLRC - Site Logo - If Nav Bar is turned off */
    #sitelogo {
        background-color: transparent !important;
    }
}

@media (max-width: 350px) {
    /* SLRC - Site Logo - If Nav Bar is turned off */
    #sitelogo {
        position: inherit !important;
        transform: inherit !important;
        margin: 0 !important;
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

@media (min-width: 280px) and (max-width: 350px) {
    /* Bootstrap Carousel */
    .carousel-caption {
        top: 40% !important;
    }
}

@media (max-width: 280px) {
    /* Bootstrap Carousel */
    .carousel-caption {
        top: 45% !important;
        height: 75%;
    }

    .carousel #weAreHere img {
        right: 95%;
    }

    .carousel #buildLegacy img {
        right: 60%;
    }
}

@media (max-width: 230px) {
    #myCarousel { display: none; visibility: none; }
}