img.door-change,
img.window-change {
    max-width: 400%;
    height: 100px;
    width: 100%;
    object-fit: contain;
    object-position: bottom;
}

#menu-options .select-option-title img.menu-arrow {
    padding: 0;
    vertical-align: middle;
    transform: rotate(-180deg);
    max-width: 20px;
}

.select-option-title .cur-setting {
    margin: 5px 25px;
    font-size: 14px;
}

.menu-arrow{
    max-width: 25px;
}

#menu-options .select-option-title img.menu-arrow.open {
    transform: rotate(-90deg);
}

#select-option--door .select-option-title {
    padding: 10px 5px;
}

#select-option--doorstyle,
#select-option--trimstyle,
#select-option--sidingstyle,
#select-option--size,
.option-style-1 {
    padding: 0;
    width: calc(98% - 25px);
    background-color: #efefef;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    transition: all 300ms linear, border 0ms linear;
    margin-left: 25px;
}

.select-option.option-style-2 {
    display: flex;
    flex-wrap: wrap;
    margin-left: 25px;
    padding: 0;
}

#select-option--style {
    width: 95%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
}

#select-option--roof.select-option {
    width: calc(90% - 25px);
    margin-left: 25px;
}

.size-900 #select-option--roof.select-option {
    width: calc(95% - 10px);
    margin-left: 10px;
}

#select-option--doormodel.option-active,
#select-option--style.option-active,
#select-option--windowmodel.option-active,
.select-option.option-style-2.option-active {
    padding: 10px 0;
    border-top: solid 2px #000;
}

.doormodel-change,
.style-change,
.windowmodel-change,
.option-style-2 .item {
    width: 40%;
    text-align: center;
    margin: 5px auto;
}

.option-style-2 .item img{
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    border-radius: 10px;
    height: 100px;
    object-fit: contain;
}

.option-style-2 .item.fill img {
    object-fit: none;
}

.doormodel-change:nth-child(2n - 1),
.style-change:nth-child(2n - 1),
.windowmodel-change:nth-child(2n - 1) {
    margin: 5px auto 0 0;
}

.doormodel-change:nth-child(2n),
.style-change:nth-child(2n),
.windowmodel-change:nth-child(2n) {
    margin: 5px 0 0 auto;
}

#select-option--doorstyle.option-active,
#select-option--trimstyle.option-active,
#select-option--size.option-active,
.option-style-1.option-active,
#select-option--sidingstyle.option-active {
    border: solid 1px #ddd;
    border-top: solid 2px #000;
    padding: 0;
}

#select-option--doorstyle .door-change.type-change,
#select-option--trimstyle .trim-change.type-change,
#select-option--sidingstyle .siding-change.type-change,
#select-option--size .size-change,
.option-style-1 .item {
    padding: 10px 15px;
    letter-spacing: .1px;
    font-size: 14px;
    border-top: solid 2px #ddd;
}

#select-option--doorstyle .door-change.type-change:hover,
#select-option--trimstyle .trim-change.type-change:hover,
#select-option--sidingstyle .siding-change.type-change:hover,
#select-option--size .size-change:hover,
.option-style-1 .item:hover {
    background-color: #ddd;
    padding: 10px 10px 10px 20px;
    cursor: pointer;
}

#select-option--doorstyle .door-change.type-change:nth-child(1),
#select-option--trimstyle .trim-change.type-change:nth-child(1),
#select-option--sidingstyle .siding-change.type-change:nth-child(1),
#select-option--size .size-change:nth-child(1),
.option-style-1 .item:nth-child(1) {
    border-top: none;
}


#select-option--doorcolor.option-active {
    border-top: solid 2px;
}


#select-option--doorcolor .doorcolor-change {
    width: 40%;
    text-align: center;
    margin-top: 15px;
}

#select-option--doorcolor .doorcolor-change:nth-child(2n+1) {
    margin-left: 5px;
    margin-right: auto;
}

#select-option--doorcolor .doorcolor-change:nth-child(2n) {
    margin-left: auto;
    margin-right: 5px;
}

#select-option--doorcolor .doorcolor-change img {
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    border-radius: 10px;
    padding: 0;
    object-fit: contain;
    height: 100px;
    object-position: bottom;
}

#select-option--doorcolor .doorcolor-change img {
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    border-radius: 10px;
    padding: 0;
}

#select-option--doorcolor .doorcolor-change h4 {
    margin: 0;
    font-weight: 300;
    font-size: 16px;
}

.caption {
    margin: 0 15px 10px;
    font-size: 14px;
    color: #666;
}

.trimcolorblock {
    width: 100%;
    padding-top: 100%;
    border-radius: 5px;
    border: solid 1px #000;
}

.trimcolor-change {
    width: 40%;
    margin: 5px auto;
    text-align: center;
    border-radius: 5px;
}

.trimcolor-change:hover {
    transform: scale(.95) translateY(2px);
    cursor: pointer;
}

#select-option--trimcolor {
    display: flex;
    flex-wrap: wrap;
}

.select-option--trimcolor-change {
    margin: 0;
}

#select-option--sidingcolor {
    display: flex;
    flex-wrap: wrap;
}


.sidingcolor-change,
.roof-change {
    text-align: center;
    width: 40%;
}

.sidingcolor-change:hover,
.style-change:hover,
.doormodel-change:hover,
.doorcolor-change:hover,
.roof-change:hover,
.windowmodel-change:hover,
.option-style-2 .item:hover {
    transform: scale(.95) translateY(2px);
    cursor: pointer;
}

.sidingcolor-change:nth-child(2n),
.roof-change:nth-child(2n) {
    margin: 0 0 10px auto;
}

.sidingcolor-change:nth-child(2n + 1),
.roof-change:nth-child(2n + 1) {
    margin: 0 auto 10px 0;
}

.sidingcolor-change img,
.roof-change img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: none;
    border-radius: 10px;
}

.sidingcolor-change-name,
.roof-change-name,
.option-style-2 .item p {
    margin: 0;
}

.option-style-2 .item .block {
    width: 100%;
    padding-top: 100%;
    border-radius: 5px;
    border: solid 1px #000;
}

.ar-square {
    position: relative;
    width: 100%;
    padding-top: 100%;
}

.style-change {
    margin-top: 5px;
}

.style-change img {
    border-radius: 10px;
    width: 100%;
}

.style-change p,
.doormodel-name,
.doorcolor-change p,
.windowmodel-name,
.windowmodel-change p {
    margin: 10px 0;
    font-size: 16px;
}

.menu-heading {
    font-size: 34px;
    margin: 0px 10px;
    border-bottom: solid 2px #ccc;
    padding: 10px 0px;
    font-weight: lighter;
    color: #333;
}

.arrow {
    max-height: 50px;
    max-width: 55px;
}