/* Fonts */

        @import url('https://fonts.googleapis.com/css?family=Barlow&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;1,100&display=swap');


        body {
            background-color: white;
        }

        section {
            background-color: white;
        }

        p {
            font-family: 'Roboto', 'Barlow', sans-serif;
            font-size: 1em;
            line-height: 2.25em;
            font-weight: 300;
            color: black;
        }

        h1 {
            font-family: 'Roboto', sans-serif;
            margin: auto;
            padding: 1em;
            font-weight: 100;
            color: #707070;
        }

        a {
            color: black;
            transition: .3s color;
        }

        a:hover {
            text-decoration: none;
            color: #3973ac;
        }

        .contact-link {
            color: black;
            transition: .3s all;
            font-weight: 300;
        }

        .contact-link:hover {
            color: #3973ac;
        }

        section {
            padding-top: 20px;
            padding-bottom: 20px;
        }

        .lead-100 {
            font-size: 1em;
            font-family: 'Roboto';
            font-weight: 100;
        }

        .lead {
            font-size: 1em;
            font-family: 'Roboto';
            font-weight: 300;
        }

        .tab {
            display: inline-block;
            margin-left: 2em;
        }


        .hr-fade {
            display: block;
            border: none;
            color: white;
            height: 1px;
            background: black;
            background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#000), to(#fff));
        }

        /*        fancy hr line styling*/

        .hr-element {
            line-height: 1em;
            position: relative;
            outline: 0;
            border: 0;
            color: black;
            text-align: center;
            height: 1.5em;
            opacity: 1;
            font-size: 3em;
        }

        .hr-element::before {
            content: '';
            /*
                use the linear-gradient for the fading effect
                use a solid background color for a solid bar
*/
            background: linear-gradient(to right, transparent, #818078, transparent);
            position: absolute;
            left: 0;
            top: 50%;
            width: 100%;
            height: 1px;
        }

        .hr-element::after {
            content: attr(data-content);
            position: relative;
            display: inline-block;
            color: #707070;
            padding: 0 .5em;
            line-height: 1.5em;
            background-color: white;
            font-family: FontAwesome;
        }

        .hr-element2 {
            line-height: 1em;
            position: relative;
            outline: 0;
            border: 0;
            color: black;
            text-align: center;
            height: 1.5em;
            opacity: 1;
            font-size: 3em;
        }

        .hr-element2::before {
            content: '';
            /*
                use the linear-gradient for the fading effect
                use a solid background color for a solid bar
*/
            background: linear-gradient(to right, transparent, #818078, transparent);
            position: absolute;
            left: 0;
            top: 50%;
            width: 100%;
            height: 1px;
        }

        .hr-element2::after {
            content: attr(data-content);
            position: relative;
            display: inline-block;
            color: black;
            padding: 0 .5em;
            line-height: 1.5em;
            color: #3973ac;
            background-color: #ededed;
            font-family: FontAwesome;
        }

        /*        Our contact side button, fixed to the left*/

        .contact-tab {
            z-index: 100;
            background-color: black;
            position: fixed;
            left: -4em;
            top: 70%;
            transform: rotate(270deg);
            padding: .5em 1.5em;
            border-bottom-left-radius: .5em;
            border-bottom-right-radius: .5em;
        }

        .contact-tab a {
            color: white;
            text-decoration: none;
        }

        @media only screen and (max-width: 800px) {
            .contact-tab {
                display: none;
            }
        }

        /*        NAVBAR*/

        /*Custom animated Menu Hamburger Icon*/

        .navbar-toggler {
            width: 20px;
            height: 20px;
            position: relative;
            transition: .5s ease-in-out;
        }

        .navbar-toggler,
        .navbar-toggler:focus,
        .navbar-toggler:active,
        .navbar-toggler-icon:focus {
            outline: none;
            box-shadow: none;
            border: 0;
            position: relative;
        }

        .navbar-toggler span {
            margin: 0;
            padding: 0;
        }

        .toggler-icon {
            display: block;
            position: absolute;
            height: 2px;
            width: 100%;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 1px;
            opacity: 1;
            left: 0;
            transform: rotate(0deg);
            transition: .25s ease-in-out;
        }

        .middle-bar {
            margin-top: 0px;
        }

        /*When Navigation Hamburger is clicked*/


        .navbar-toggler .top-bar {
            top: inherit;
            transform: rotate(135deg);
        }

        .navbar-toggler .middle-bar {
            opacity: 0;
            top: inherit;
            filter: alpha(opacity=0);
        }

        .navbar-toggler .bottom-bar {
            top: inherit;
            transform: rotate(-135deg);
        }

        /*State when the Navbar is collapsed*/

        .navbar-toggler.collapsed .top-bar {
            position: absolute;
            top: 0px;
            transform: rotate(0deg);
        }

        .navbar-toggler.collapsed .middle-bar {
            opacity: 1;
            position: absolute;
            top: 10px;
            filter: alpha(opacity=100);
        }

        .navbar-toggler.collapsed .bottom-bar {
            position: absolute;
            top: 20px;
            transform: rotate(0deg);
        }

        .navbar {
            padding: 30px;
            transition: .4s all;
        }



        /*
        .navbar-bk {
            background-color: rgb(254, 254, 251);
        }
*/
        .navbar-logo {
            max-width: 150px;
        }

        @media only screen and (max-width: 500px) {
            .navbar-logo {
                max-width: 100px;
            }

        }

        .navbar-bk {
            background-color: transparent;
        }

        .navbar-height-adjust {
            padding: 10px;
            background-color: white;
        }

        .dropdown:hover > .dropdown-menu {
            display: block;
        }

        .dropdown-menu {
            min-width: 1em;
        }

        .dropdown-item:hover {
            color: none;
            background-color: none;
        }

        a.dropdown-item {
            padding-left: 10px !important;
            padding-right: 10px !important;
            text-align: center;
        }

        .dropdown-menu {
            border: none;
        }

        .nav-link {
            text-align: center;
        }

        /*    Layout Header for single fixed image   */
        /*
        .layout_header {
            width: 100%;
            top: 0;
            right: 0;
            left: 0;
            height: 100vh;
            background-image: url(../images/property_images/02-living-1.jpg);
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-background-size: cover;
            position: fixed;
            vertical-align: middle;
            z-index: -1;
        }
*/

        /*    Layout Header for image carousel*/
        .layout_header {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;
        }

        .layout_header > figure {
            animation: imageAnimation 24s infinite;
            backface-visibility: hidden;
            background-size: cover;
            background-position: center center;
            color: transparent;
            height: 100%;
            left: 0px;
            opacity: 0;
            position: absolute;
            top: 0px;
            width: 100%;
            z-index: -1;
        }

        .layout_header > figure:nth-child(1) {
            background-image: url('../images/property/06_openfloor.jpg');
        }

        .layout_header > figure:nth-child(2) {
            animation-delay: 8s;
            background-image: url('../images/property/04_lobby.jpg');
        }

        .layout_header > figure:nth-child(3) {
            animation-delay: 16s;
            background-image: url('../images/property/01_facade.jpg');
        }


        @keyframes imageAnimation {
            0% {
                animation-timing-function: ease-in;
                opacity: 0;
            }

            8.333% {
                animation-timing-function: ease-out;
                opacity: 1;
            }

            33.333% {
                opacity: 1;
            }

            41.666% {
                opacity: 0;
            }
        }

        @supports (-webkit-touch-callout: none) {
            .layout-header {
                background-attachment: scroll;
            }
        }

        .layout_header .header-text {
            font-family: 'Gelasio', serif;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translate(-50%, -100%);
            color: #3973ac;
            text-align: center;
            width: 100%;
            background-color: rgba(0, 0, 0, .3);
        }

        .header-text-line-1 {
            font-size: 1.75em;
            animation-name: fadein1;
            animation-duration: 2s;
            color: white;
            font-weight: 100;
            font-family: 'Roboto', sans-serif;
        }

        .header-text-line-2 {
            font-size: 1em;
            opacity: 0;
            animation-name: fadein2;
            animation-delay: .5s;
            animation-duration: 2s;
            animation-fill-mode: forwards;
            color: white;
            font-family: 'Roboto', sans-serif;
            font-weight: 100;
        }

        .header-text-line-3 {
            font-size: 1em;
            opacity: 0;
            animation-name: fadein2;
            animation-delay: 1s;
            animation-duration: 2s;
            animation-fill-mode: forwards;
            color: white;
            font-family: 'Roboto', sans-serif;
            font-weight: 100;
        }

        .header-text-line-4 {
            font-size: 1.5em;
            opacity: 0;
            animation-name: fadein2;
            animation-delay: .5s;
            animation-duration: 2s;
            animation-fill-mode: forwards;
            color: white;
            font-family: 'Roboto', sans-serif;
            border-top: 1px solid white;
            font-weight: 100;
        }

        @keyframes fadein1 {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes fadein2 {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes fadein3 {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @media (max-width: 900px) {
            .header-text-line-1 {
                font-size: 1em;
            }

            .header-text-line-2 {
                font-size: .5em;
            }

            .header-text-line-3 {
                font-size: .5em;
            }
        }

        .layout_header .scroll-more-info {
            display: none;
            position: absolute;
            bottom: 5%;
            left: 50%;
            color: white;
            font-size: 2em;
            text-align: center;
            transform: translate(-50%, -50%);
        }

        .header-h1 {
            padding: 20px;

        }

.splash-title-h1 {
     padding:.5em;
}

        .highlights-section {
            padding-top: 1em;
        }

        .highlight-icon {
            max-width: 2em;
        }

        .property-details {
            padding-top: 3em;
        }

        #videoheader {
            position: fixed;
            top: 50%;
            left: 50%;

            transform: translate(-50%, -50%);
            min-width: 100%;
            min-height: 100%;
            z-index: -1;
            object-fit: cover;
        }

        .video-header-content {
            position: fixed;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            width: 100%;
            padding: 20px;
            z-index: -1;
            text-align: center;
        }


        @keyframes slidein {
            from {
                margin-top: 100%;
                opacity: 0;
            }

            to {
                margin-top: 0%;
                opacity: 1;
            }
        }

        #property-details {
            margin-top: 100vh;
        }

        .details-box {
            font-size: 1em;
            font-weight: 100;
        }

        .details-h1 {
            font-size: 2em;
            font-weight: 300;
            color: #707070;
            padding-top: 1em;
        }

        .details-h2 {
            font-size: 1.5em;
            font-weight: 100;
            color: #707070;
        }

        .details-box-1 {
            text-align: right;
        }

        @media only screen and (max-width: 768px) {
            .details-box-1 {
                text-align: justify;
            }
        }

        .property-notes {
            border: 1px solid grey;
            padding-top: 1em;
            padding-bottom: 1em;
            max-width: 400px;
            margin: 0 auto;
        }

        .home-focus-section {
            max-width: 1900px;
            margin-top: 50px;
        }

        .home-focus-header {
            font-size: 1.75em;
            font-weight: 200;
            padding: 2em 0 1em 0;
        }

        h5 {
            font-family: "Freight Display Pro W01", "sans-serif";
            font-size: 14px;
            font-weight: 200;
        }

        .listing-headline {
            padding-bottom: 0;
            padding-top: .25em;
        }

        .listing-address {
            padding-bottom: 3em;
            font-size: 1.5em;
            font-weight: 200;
        }

        /*
        #property-details {
            opacity: 0;
            transition: opacity .25ms ease-in-out;
        }
        
        
*/

        .gradient_line {
            display: block;
            border: none;
            color: white;
            height: 1px;
            background: black;
            background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#000), to(#fff));
        }

        .property-highlights {
            font-weight: 100;
            font-size: 1.75em;
        }

        .property-highlights .col-sm {
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .property-price {
            font-size: 2em;
            padding-top: 1em;
        }

        .highlights-box > span > .h1-second-line {
            font-size: .75em;
        }

        @media (max-width: 575px) {
            .property-highlights > .container-lg > .row {
                padding-top: 1em;
                padding-bottom: 1em;
            }
        }


        /*SLICK SLIDER CLASSES*/

        .slick-container {
            padding: 0;
            height: 70vh;
            max-height: 900px;
            position: relative;
        }

        .prev,
        .next {
            position: absolute;
            z-index: 1;
            color: white;
            border: none;
            font-size: 6em;
            opacity: .5;
            background-color: transparent;
            transition: .3s color;
        }

        .prev:hover,
        .next:hover,
        .prev:focus,
        .next:focus {
            color: aqua;
        }

        .prev {
            left: 0;
            top: 50%;
            transform: translate(50%, -50%);
        }

        .next {
            right: 0;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .slick-track,
        .slick-track img {
            height: 70vh;
            max-height: 900px;
        }

        .slick-initialized {
            overflow: hidden;
        }

        .slick-slide {
            margin: 0 20px;
        }

        .slick-slide img:hover {
            cursor: grab;
        }

        @media only screen and (max-width: 600px) {

            .slick-track,
            .slick-track img,
            .slick-container {
                height: 50vh;
            }


        }

        @media only screen and (max-width: 900px) {
            .slick-slide {
                margin: 0 10px;
            }

            .prev,
            .next {
                font-size: 4em;
            }
        }

        /*BOOTSTRAP CAROUSEL*/

        .carousel {
            max-width: 1400px;
            width: 90vw;
            margin: auto;
            padding-top: 75px;
        }

        .carousel-inner img {
            margin: auto;
        }

        .carousel-inner img {
            margin: auto;
            transition: .7s all;
        }

        .carousel-inner img:hover {
            transform: scale(1.1);
        }

        .carousel-control-next-icon,
        .carousel-control-prev-icon {
            height: 25%;
            width: 25%;
        }

        .carousel-control-prev-icon {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='DodgerBlue' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
        }

        .carousel-control-next-icon {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='DodgerBlue' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
        }

        /*        ADJUSTING the CAROUSEL INDICATORS for smaller screens*/

        @media only screen and (max-width: 720px) {

            .carousel-control-next-icon,
            .carousel-control-prev-icon {
                transform: translateY(30%);
            }
        }

        ol.carousel-indicators li,
        ol.carousel-indicators li.active {
            border-radius: 50%;
            height: 12px;
            width: 12px;
        }

        @media only screen and (max-width: 850px) {

            #carousel1 ol.carousel-indicators li,
            #carousel1 ol.carousel-indicators li.active {
                border-radius: 50%;
                height: 8px;
                width: 8px;
            }
        }

        @media only screen and (max-width: 600px) {

            #carousel1 ol.carousel-indicators li,
            #carousel1 ol.carousel-indicators li.active {
                border-radius: 50%;
                height: 4px;
                width: 4px;
            }
        }

        @media only screen and (max-width: 500px) {

            #carousel1 ol.carousel-indicators li,
            #carousel1 ol.carousel-indicators li.active {
                border-radius: 50%;
                height: 3px;
                width: 3px;
            }
        }

        #neighborhood-gallery {
            background-color: #ededed;
        }

        /*        3D WALKTHROUGH*/

        @media only screen and (min-width: 1200px) {
            .walkthrough-container {
                width: 1024px;
                height: 768px;
                margin: 0 auto;
            }
        }

        @media only screen and (max-width: 1200px) {
            .walkthrough-container {
                position: relative;
                padding-bottom: 75%;
                padding-top: 35px;
                height: 0;
                overflow: hidden;
                margin: 0 auto;
            }

            .walkthrough-container iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        }

        @media only screen and (max-height:) and (orientation: landscape) {}

        section {
            padding: 50px 0px 50px 0px;
        }

        .walkthrough-container {
            margin-bottom: 4em;
        }

        /*        VIDEO CSS*/

        .video-clip {
            width: 100%;
            height: auto;
        }

        .download-icon {
            max-width: 4em;
        }

        .floorplan-disclaimer {
            color: gray;
            font-size: .75em;
        }

        .listing-map {
            width: 100%;
            height: 400px;
            background-color: grey;
        }

        @media only screen and (max-width: 900px) {
            .listing-map {
                width: 100%;
                height: 300px;
            }
        }

        .agent-team-h1 {
            font-size: 2.5em;
            font-weight: 200;
            color: #707070;
        }

        @media only screen and (max-width: 500px) {
            .agent-team-h1 {
                font-size: 1.75em;
            }

        }

        .agent-info {
            max-width: 700px;
        }

        .agent-headshot {
            padding-bottom: 2em;
            margin-left: auto;
            margin-right: auto;
            border-radius: 1em;
            padding-bottom: 2em;
        }

        .agent-team-headshot {
            width: 100%;
            height: auto;
            max-width: 980px;
        }

        /*        FORM STYLES*/

        .form-input {
            width: 100%;
            border-left: 0px;
            border-top: 0px;
            border-right: 0px;
            border-bottom: 1px solid black;
            padding: .5em;
        }

        #form-message {
            width: 100%;
            border-left: 0px;
            border-top: 0px;
            border-right: 0px;
            border-bottom: 1px solid black;
        }

        .form-input-company {
            display: none !important;
        }

        .form-pw {
            display: none;
        }

        .btn-dark {
            background: rgb(44, 88, 131);
            background: radial-gradient(circle, rgba(44, 88, 131, 1) 0%, rgba(57, 115, 172, 1) 35%, rgba(67, 133, 198, 1) 100%);
            padding-left: 2em;
            padding-right: 2em;
            padding-top: 1em;
            padding-bottom: 1em;
            margin-top: 1em;
            float: right;
            border: none;
            transition: .3s all;
        }

        .btn-dark:hover {
            background: rgb(57, 115, 172);
            background: radial-gradient(circle, rgba(57, 115, 172, 1) 0%, rgba(66, 132, 198, 1) 35%, rgba(80, 157, 233, 1) 100%);
        }

        .realtor-address {
            margin: auto;
            padding-bottom: 2em;
        }

        .realtor-logo {
            max-width: 400px;
            padding-bottom: 2em;
        }

        #contact {
            padding-bottom: 100px;
        }

        .success {
            padding: 1em;
            margin-bottom: 0.75rem;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
            color: #468847;
            background-color: #dff0d8;
            border: 1px solid #d6e9c6;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
        }

        .error {
            padding: 1em;
            margin-bottom: 0.75rem;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
            color: #b94a48;
            background-color: #f2dede;
            border: 1px solid rgba(185, 74, 72, 0.3);
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
        }

        #legal-info {
            background-color: rgb(254, 254, 251);
        }

        #legal-info a {
            color: #3973ac;
            transition: .3s all;
        }

        #legal-info a:hover {
            color: black;
        }

        .disclaimer {
            font-size: 1em;
            margin: auto;
        }

        .re_icon {
            width: 1.5em;
        }

        .lead-p {
            font-weight: 100 !important;
            font-family: 'Roboto'sans-serif !important;
            font-size: 1.5em;

        }