#gallery{
    color: var(--logo-yellow);
}

body
{
    background-color: var(--apple-gray);
    font-display: block;
    font-family: "SF Pro Text","SF Pro Icons","Calibri", "Helvetica Neue","Helvetica","Arial",sans-serif;
    font-size: var(--global-font-size);
    font-weight: var(--global-font-weight);
    margin: 0px;
    position: relative;
    overflow-x:hidden;
}
.main-container
{
    position: relative;
    /*max-width: 980px;*/
    width:100%;
    /*padding-left:22px;
    padding-right:22px;*/
    margin:auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--apple-black);
    
    .options-container{
        position:relative;
        width: max-content;
        margin: auto;
        height:48px;
        background-color: var(--apple-black);
        border-radius:30px;
        
        display:flex;
        /*justify-content: space-around;*/
        align-items: center;
        font-weight: 500;
        
        .active
        {
            color: var(--menu-text-color);
            background-color: var(--logo-yellow);
        }
        
        .options{
            margin: 0px 6px 0px 6px;
            cursor: pointer;
            
            .opts
            {
                text-decoration:none;
                cursor:pointer;
                color:black;
                font-size:16px;
                padding-left:15px;
                padding-right:15px;
                padding-top:8px;
                padding-bottom:8px;
                border-radius: 20px;
            }
        }
        
    
    }
    
    
    .details-realestate
    {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        
        .gallery-container
        {
            
            display:flex;
            justify-content:center;
            border-radius:20px;
            cursor: pointer;
            transition: transform 0.4s ease;
            
            
            img{
                border-radius:20px;
            }
            
            .data{
                position:absolute;
                z-index:3;
                display:flex;
                justify-content: center;
                align-items:center;
                height:50px;
                
                .numbers{
                    display:flex;
                    justify-content:center;
                    align-items:center;
                    color:white;
                    background-color:black;
                    padding:5px;
                    border-radius:20px;
                    width:60px;
                }
            }
            
            .gallery-controls{
                position:absolute;
                z-index:2;
                display:flex;
                justify-content: space-between;
                
                .button-box
                {
    
                    border-radius:5px;
                    background-color:black;
                    opacity:0.6;
                }
                
                .left-side{
                    display:none;
                    justify-content:center;
                    align-items:center;
                    font-size:32px;
                    font-weight:500;
                    color:white;
                    text-shadow: 1px 1px 5px black;
                    width:10%;
                    cursor:pointer;
                }
                .middle-container{
                    width:80%;
                    cursor:pointer;
                }
                .right-side{
                    display:none;
                    justify-content:center;
                    align-items:center;
                    font-size:32px;
                    font-weight:500;
                    color:white;
                    text-shadow: 1px 1px 5px black;
                    width:10%;
                    cursor:pointer;
                }
            
            }
            
        }
        
        
        .buttons-container
        {
            position:relative;
            cursor:pointer;
            display:flex;
            flex-direction:row;
            justify-content:space-between;
            align-items:center;
            
            .buttons{
                padding:10px;
                color:white;
                background-color: var(--apple-black);
                border-radius: 10px;
                display:flex;
                justify-content: center;
                align-items: center;
            }
            .path{
                padding:10px;
                color: var(--apple-black);
                background-color: white;
                border-radius: 10px;
                display:flex;
                justify-content: center;
                align-items: center;
                font-size:18px;
                font-weight:500;
            }
        }
        
        
        
        .details-container
        {
            position:relative;
            background-color: white;
            border-radius:20px;
            display:flex;
            flex-direction:row;
            justify-content:space-between;
            align-items:flex-start;
            
            .links{
                
                flex-direction:column;
                justify-content:center;
                align-items:flex-start;
                padding: 20px 20px 20px 0px;
                
                button{
                    cursor:pointer;
                    margin:5px;
                    display:flex;
                    justify-content: center;
                    align-items: center;
                    border-radius:10px;
                    border:none;
                    font-weight:500;
                    background-color:green;
                    color:white;
                }
                
            }
            
            .details
            {
                padding:20px 0px 20px 20px;
                display:flex;
                flex-direction:column;
                justify-content: space-between;
                align-items:flex-start;
                
                .firstline
                {
                    position: relative;
                    display: flex;
                    flex-direction: row;
                    justify-content: left;
                    align-items: center;
                    padding:5px;
                }
                .house-address{
                    position: relative;
                    display: flex;
                    flex-direction: row;
                    justify-content: left;
                    align-items: center;
                    
                    .icons
                    {
                        display: flex;
                    }
                    .house-details
                    {
                        position: relative;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: flex-start;
                        padding-left:10px;
                        
                        .address
                        {
                            position: relative;
                            font-weight: bold;
                        }
                        .type{
                            position:relative;
                        }
                    }
                }
                .house-container
                {
                    position: relative;
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: center;
                    padding-top:10px;
                }
                .metrics-container
                {
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    margin:5px;
                    padding:10px;
                    border-radius:10px;
                    background-color: var(--apple-gray);
                    
                    .metrics
                    {
                        position:relative;
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;
                        
                        font-weight:bold;
                        
                        .m-number{
                            padding-left:10px;
                        }
                    }
                    .m-title
                    {
                        position:relative;
                    }
                }
            }
        }
        
        .divider-1
        {
            display:flex;
            justify-content: space-between;
            align-items: center;
        }
        .scores-container
        {
            position:relative;
            background-color: white;
            color:black;
            border-radius:20px;
            display:flex;
            flex-direction:column;
            /*justify-content:center;*/
            cursor: pointer;
            
            
            .scores{
                margin:20px;
                display:flex;
                flex-direction:column;
                justify-content: space-between;
                
                .score-details
                {
                    margin-bottom: 5px;
                    .score-title
                    {
                        font-weight: 550;
                    }
                    .score-description
                    {
                        font-size:10px;
                    }
                }
                
                .score-type
                {
                    display:flex;
                    flex-direction:row;
                    justify-content: center;
                    align-items:center;
                    padding:6px;
                    margin:5px 10px 5px 0px;
                    width:auto;
                    border-radius:60px;
                    background-color: var(--apple-gray);
                    
                    .logo
                    {
                        
                        display:flex;
                        justify-content: center;
                        align-items: center;
                        background-color: var(--logo-yellow);
                        margin-right:10px;
                    }
                    .data{
                        margin-right:10px;
                        display:flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        
                        .score-data{
                            font-weight: 600;
                        }
                        
                    }
                }
                
                .score-explain-container
                {
                    display:flex;
                    flex-direction: column;
                    align-items: left;
                    
                    .score-type1
                    {
                        display:flex;
                        justify-content: left;
                        align-items: center;
                        margin: 2px;
                        
                        .explain-type
                        {
                            margin-right:10px;
                            width:30px;
                            display: flex;
                            justify-content: center;
                        }
                    }
                }
            }
        }
        
        .realtors-container
        {
            border-radius:20px;
            height:220px;
            background-color:white;
            display:flex;
            overflow: hidden;
            
            .realtor-image{
                cursor: pointer;
                height:220px;
                width:165px;
                background-color:gray;
                overflow: hidden;
                
                img{
                    /*height:220px;
                    width:165px;*/
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center;
                    
                }
            }
            .realtor-data{
                margin:20px;
                
                .r-data-container{
                    height:100%;
                    display:flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: left;
                    
                    .realtor-brokerage{
                        font-weight:600;
                    }
                    
                    .realtor-type{
                        font-size:10px;
                    }
                    .realtor-name{
                        font-weight:600;
                    }
                    .realtor-description{
                        color: gray;
                    }
                    .realtor-buttons{
                        margin: 5px 5px 5px 0px;
                        
                        button{
                            padding:10px;
                            background-color: green;
                            color:white;
                            border-radius:5px;
                            border:none;
                            margin: 5px 5px 5px 0px;
                            cursor: pointer;
                        }
                        a{
                            text-decoration: none;
                            color:white;
                        }
                        .abbr{
                            
                        }
                    }
                }
            }
        }
        
    }
    
    .pics-realestate{
        position: relative;
        /*margin-top: 20px;*/
        display:none;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        
        .image-container{
            cursor:pointer;
            position:relative;
            width:500px;
            height:333px;
            border-radius:10px;
            overflow: hidden;
            margin:5px;
            
            .number
            {
                background-color: var(--logo-yellow);
                width: 20px;
                height: 20px;
                font-size: 12.5px;
                font-weight: bold;
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                z-index:3;
            }
            
            img{
                position: relative;
                width:500px;
                height:333px;
                object-fit:cover;
            
            }
            
        }
        
        
    }
    
    .hometour-realestate{
        position: relative;
        display:none;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-bottom: 350px;
        
        .video-container{
            position:relative;
            width:100%;
            max-width:980px;
            
            .video{
                padding-left:10px;
                padding-right:10px;
                display:flex;
                flex-wrap: wrap;
                justify-content:center;
                
                .yt-video, .yt-short
                {
                    border:none;
                    border-radius:10px;
                    padding:5px;
                }
            }
        }
    }

}

@media only screen and (min-width:1530px)
{
    .main-container
    {
        .options-container
        {
            margin-top:10px;
            margin-bottom:10px;
        }
        
        .details-realestate
        {
            .gallery-container
            {
                margin-bottom:15px;
                width:980px;
                height:653px;
            
                img{
                    width:980px;
                    height:653px;
                }
                .data{
                    width:980px;
                    height:50px;
                }
                .gallery-controls{
                    width:980px;
                    height:653px;
                    
                    .button-box
                    {
                        padding:20px;
                    }
                }
                .gallery-controls:hover > .left-side
                {
                    display:flex;
                }
                .gallery-controls:hover > .right-side
                {
                    display:flex;
                }
            }
            .details-container
            {
                width:100%;
                max-width:980px;
                margin: 0px 10px 20px 10px;
                
                .links{
                    button{
                        width:180px;
                        height:40px;
                        
                        i{
                            margin-right:10px;
                        }
                    }
                }
            }
            .divider-1
            {
                width:100%;
                max-width: 980px;
                flex-direction: row;
            }
            .scores-container
            {
                width:450px;
                height:220px;
                margin: 0px 10px 20px 0px;
                align-items:flex-start;
                
                .all-scores{
                    display:flex;
                    flex-direction:row;
                    justify-content: center;
                    align-items:center;
                }
                
                .scores
                {
                    align-items: flex-start;
                
                    .score-details
                    {
                        .score-title
                        { 
                            font-size:24px; 
                        }
                    }
                    
                    .score-type
                    {
                        .logo
                        { 
                            font-size:18px;
                            width:30px;
                            height:30px;
                            border-radius:40px;
                        
                        }
                        .score-data{ font-size:24px; }
                    }
                    
                    .scores-explain-container
                    {
                        width:100%;
                    }
                }
            }
            .realtors-container
            {
                width:510px;
                margin-bottom:20px;
                
                .realtor-data
                {
                    width: 305px;
                    
                    .realtor-brokerage{
                        font-size:14px;
                        text-align: center;
                    }
                    .realtor-name{
                        font-size:22px;
                    }
                    .realtor-description{
                        font-size:14px;
                    }
                    .realtor-tag{
                        font-size:14px;
                    }
                }
            }
            .buttons-container
            {
                width:100%;
                max-width:980px;
                margin: 0px 0px 15px 0px;
                .buttons { width:15%; }
                .path { width:60%; }
            }
            .links
            {
                display:flex;
                button{
                    font-size:var(--global-font-size);
                }
            }
            .details
            {
                .icons{
                    font-size:48px;
                }
                .house-details
                {
                    .address{
                        font-size:24px;
                    }
                    .type{
                        font-size:16px;
                    }
                }
                .metrics{
                    font-size:28px;
                }
            }
            
        }
    }
    .yt-video{
        height:360px;
        width:640px;
    }
    .yt-short{
        height:360px;
        width:210px;
    }
}
@media only screen and (min-width: 1025px) and (max-width: 1529px)
{
    
    .main-container
    {
        .options-container
        {
            margin-top:10px;
            margin-bottom:10px;
        }
        
        .details-realestate
        {
            .gallery-container
            {
                margin-bottom:15px;
                width:980px;
                height:653px;
            
                img{
                    width:980px;
                    height:653px;
                }
                .data{
                    width:980px;
                    height:50px;
                }
                .gallery-controls{
                    width:980px;
                    height:653px;
                    
                    .button-box
                    {
                        padding:20px;
                    }
                }
                .gallery-controls:hover > .left-side
                {
                    display:flex;
                }
                .gallery-controls:hover > .right-side
                {
                    display:flex;
                }
            }
            .details-container
            {
                width:100%;
                max-width:980px;
                margin: 0px 10px 20px 10px;
                
                .links{
                    button{
                        width:180px;
                        height:40px;
                        
                        i{
                            margin-right:10px;
                        }
                    }
                }
            }
            .divider-1{
                width:100%;
                max-width: 980px;
                flex-direction: row;
            }
            .scores-container
            {
                width:450px;
                height:220px;
                align-items: flex-start;
                margin: 0px 10px 20px 0px;
                .all-scores{
                    display:flex;
                    flex-direction:row;
                    justify-content: center;
                    align-items:center;
                }
                .scores
                {
                    align-items:flex-start;
                
                    .score-details
                    {
                        .score-title{ font-size:24px; }
                    }
                    .score-type
                    {
                        .logo
                        { 
                            font-size:18px;
                            width:30px;
                            height:30px;
                            border-radius:40px;
                        
                        }
                        .score-data{ font-size:24px; }
                    }
                    .scores-explain-container
                    {
                        width:100%;
                    }
                }
            }
            .realtors-container
            {
                width:510px;
                margin-bottom:20px;
                
                .realtor-data
                {
                    width: calc(560px - 180px);
                    
                    .realtor-brokerage{
                        font-size:14px;
                        text-align: center;
                    }
                    .realtor-name{
                        font-size:22px;
                    }
                    .realtor-description{
                        font-size:14px;
                    }
                    .realtor-tag{
                        font-size:14px;
                    }
                }
            }
            .buttons-container{
                width:100%;
                max-width:980px;
                margin: 0px 0px 15px 0px;
                .buttons { width:15%; }
                .path { width:60%; }
            }
            .links{
                display:flex;
                button{
                    font-size:var(--global-font-size);
                }
            }
            .details{
                .icons{
                    font-size:48px;
                }
                .house-details
                {
                    .address{
                        font-size:24px;
                    }
                    .type{
                        font-size:16px;
                    }
                }
                .metrics{
                    font-size:28px;
                }
            }
            
        }
        .pics-realestate{
            
            .image-container{
                width:400px;
                height:266px;
                
                img{
                    width:400px;
                    height:266px;
                }
            }
        }
    }
    .yt-video{
        height:360px;
        width:640px;
    }
    .yt-short{
        height:360px;
        width:210px;
    }
    
}
@media only screen and (min-width: 650px) and (max-width: 1024px)
{
    body{
        font-size:16px;
    }
    .main-container{
        
        .options-container
        {
            margin-top:10px;
            margin-bottom:10px;
        }
        
        .pics-realestate{
            
            .image-container{
                width:300px;
                height:200px;
                
                img{
                    width:300px;
                    height:200px;
                }
            }
        }
        .details-realestate
        {
            .metrics
            {
                font-size:24px;
            }
            .gallery-container
            {
                margin-bottom:15px;
                width:90vw;
                height:60vw;
            
                img{
                    width:90vw;
                    height:60vw;
                }
                .data{
                    width:90vw;
                    height:50px;
                }
                .gallery-controls{
                    width:90vw;
                    height:60vw;
                    
                    .button-box
                    {
                        padding:10px;
                    }
                }
                .gallery-controls:hover > .left-side
                {
                    display:flex;
                }
                .gallery-controls:hover > .right-side
                {
                    display:flex;
                }
            }
            .details-container
            {
                width:90vw;
                margin: 0px 10px 20px 10px;
                
                .links{
                    button{
                        width:40px;
                        height:40px;
                    }
                }
            }
            .divider-1{
                width: 90vw;
                flex-direction: column;
            }
            .scores-container{
                width:90vw;
                margin: 0px 10px 20px 10px;
                align-items:center;
                
                .all-scores{
                    display:flex;
                    flex-direction:row;
                    justify-content: center;
                    align-items:center;
                }
                .scores
                {
                    align-items:center;
                
                    .score-details
                    {
                        .score-title{ font-size:24px; }
                    }
                    .score-type
                    {
                        .logo
                        { 
                            font-size:18px;
                            width:30px;
                            height:30px;
                            border-radius:40px;
                        
                        }
                        .score-data{ font-size:24px; }
                    }
                    
                }
            }
            .realtors-container
            {
                width:90vw;
                margin-bottom:20px;
                
                .realtor-data
                {
                    width: calc(90vw - 180px);
                    
                    .realtor-brokerage{
                        font-size:14px;
                        text-align: center;
                    }
                    .realtor-name{
                        font-size:22px;
                    }
                    .realtor-description{
                        font-size:14px;
                    }
                    .realtor-tag{
                        font-size:14px;
                    }
                }
            }
            .buttons-container{
                width:90vw;
                margin: 0px 0px 15px 0px;
                .buttons { width:15%; }
                .path { width:60%; }
            }
            .links{
                display:flex;
                button{
                    font-size:var(--global-font-size);
                }
            }
            .details{
                .icons{
                    font-size:48px;
                }
                .house-details
                {
                    .address{
                        font-size:24px;
                    }
                    .type{
                        font-size:16px;
                    }
                }
                .metrics{
                    font-size:28px;
                }
            }
        }
    }
    .menu-bar-container{
        height:60px;
        
        .action{
            padding:8px;
        }
    }
    .yt-video{
        height:60vw;
        width:90vw;
    }
    .yt-short{
        height:360px;
        width:210px;
    }
    
}
@media only screen and (max-width: 650px)
{
     body{
        font-size:16px;
    }
    .main-container{
        
        .options-container
        {
            margin-top:5px;
            
            .options
            {
                /*margin-top:5px;*/
                
                
                {
                    padding-left:10px;
                    padding-right:10px;
                    padding-top:5px;
                    padding-bottom:5px;
                    border-radius: 20px;
                    font-size:12px;
                }
            }
        }
        
        .details-realestate
        {
            .metrics
            {
                font-size:20px;
            }
            .gallery-container
            {
                width:95vw;
                height:60vw;
                margin-top:5px;
                margin-bottom:10px;
            
                img{
                    width:95vw;
                    height:60vw;
                }
                .data{
                    width:95vw;
                    height:50px;
                }
                .gallery-controls{
                    width:95vw;
                    height:60vw;
                    
                    .button-box
                    {
                        padding:8px;
                    }
                }
                .gallery-controls  .left-side
                {
                    display:flex;
                }
                .gallery-controls .right-side
                {
                    display:flex;
                }
            }
            
            .details-container
            {
                width:95vw;
                margin: 0px 10px 10px 10px;
            }
            
            .divider-1
            {
                width: 95vw;
                flex-direction: column;
            }
            .scores-container
            {
                width:95vw;
                margin: 0px 10px 10px 10px;
                align-items:flex-start;
                
                .all-scores
                {
                    display:flex;
                    flex-direction:row;
                    justify-content: center;
                    align-items:center;
                }
                .scores
                {
                    align-items:flex-start;
                    width:calc(95vw - 40px);
                
                    .score-details
                    {
                        .score-title{ font-size:18px; }
                    }
                    .score-type
                    {
                        .logo
                        { 
                            font-size:14px;
                            width:30px;
                            height:30px;
                            border-radius:30px;
                        
                        }
                        .score-data{ font-size:18px; }
                    }
                    .scores-explain-container
                    {
                        width:100%;
                    }
                }
                
            }
            .realtors-container
            {
                width:95vw;
                margin-bottom:10px;
                
                .realtor-data
                {
                    width: calc(95vw - 180px);
                    
                    .abbr{
                        display:none;
                    }
                    .realtor-buttons{
                        display: inline-flex;
                    }
                    button{
                        width:40px;
                        height:40px;
                        display:flex;
                        justify-content: center;
                        align-items: center;
                    }
                    .realtor-brokerage{
                        font-size:10px;
                        text-align: left;
                        
                    }
                    .realtor-name{
                        font-size:15px;
                    }
                    .realtor-description{
                        font-size:10px;
                    }
                    .realtor-tag{
                        font-size:10px;
                    }
                }
            }
            .buttons-container
            {
                width:95vw;
                margin: 0px 0px 10px 0px;
                .buttons { width:auto; }
                .path { width:62%; }
            }
            .details
            {
                .icons
                {
                    font-size:36px;
                }
                .house-details
                {
                    .address{
                        font-size:18px;
                    }
                    .type{
                        font-size:14px;
                    }
                }
                .metrics{
                    font-size:18px;
                }
            }
            .links{
                display:none;
            }
        }
        
        .pics-realestate
        {
            
            .image-container{
                position: relative;
                width:180px;
                height:120px;
                overflow: hidden;
                margin:5px;
                
                img{
                    position: relative;
                    width:180px;
                    height:120px;
                    object-fit:cover;
                }
            }
        }
    }
    .hometour-realestate{
        
        .video-container
        {
            margin-top:5px;
            
            .yt-video
            {
                height:60vw;
                width:95vw;
            }
            .yt-short
            {
                height:260px;
                width:150px;
            }
            
        }
    }
    
    
    
}