/* JellyBean ROW */

.house{
    width: 80px;
    height: 100px;
    position: relative;
    box-shadow: 0px 0px 5px rgba(0,0,0, 0.8);
}

.house-lg{
    height: 130px;
}

.house-md{
    height: 105px;
}

.house-sm{
    height: 90px;
}

.house::before{
    content: " ";
    background-color: white;
    width: 100%;
    position: absolute;
    height: 10px;;
}

.house .line-container{
    display: flex;
    position: absolute;
    flex-direction: column;
    justify-content: space-evenly;
    width: 100%;
    height: 100%;
}

.house .house-line{
    width: 100%;
    height: 5px;
}

.house-red{
    background-color: #fd5353;
}

.house-red .house-line{
    background-color: #e74949;
}

.house-green{
    background-color: #36d155;
}

.house-green .house-line{
    background-color: #36bc51;
}

.house-yellow{
    background-color: #dfce35;
}

.house-yellow .house-line{
    background-color: #cbbc36;
}

.house-blue{
    background-color: #2d7ded;
}

.house-blue .house-line{
    background-color: #2c6ec9;
}

.house-orange{
    background-color: #ebb146;
}

.house-orange .house-line{
    background-color: #dea233;
}

.house .window{
    width:20px;
    height: 25px;
    background-color: rgb(172,172,172);
    border: 2px solid #FFF;
    position: relative;
}

.house .window::before{
    content: " ";
    background-color: white;
    width: 100%;
    height: 2px;
    position: absolute;
    top: 50%;;
}

.house .door{
    width: 20px;
    height: 30px;
    background-color: #c47d2f;
    position: relative;
    align-self: flex-end;
    margin-bottom: 10px;
}

.house .door::before{
    content: " ";
    background-color: rgb(117, 117, 117);
    width: 25px;
    position: absolute;
    height: 5px;
    bottom: -5px;
    left: -2.5px;
}

.house .door::after{
    content: " ";
    background-color: rgb(117, 117, 117);
    width: 30px;
    position: absolute;
    height: 5px;
    bottom: -10px;  
    left: -5px;
}

.dot{
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background-color: #707070;
    margin: 0px 10px;
}

.display-sub{
    font-size: 18px;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    
    .title-name{
        text-align: center;
        font-size: 300%;
    }

    #title-header{
        min-height: 200px;
    }

    .display-name{
        font-size: 3rem;
        line-height: 2.4rem;
    }
} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

    #title-header{
        min-height: 300px;
    }

    .display-name{
        font-size: 4rem;
        line-height: 3.3rem;
    }

}


/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

    .display-name{
        font-size: 6rem;
        line-height: 4.8rem;
    }

    .display-sub{
        font-size: 32px;
    }
    
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

}