.hp-slide-img:before,
.hp-slide-img:after {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.2);
    z-index: 1;
}

    .hp-slide-img:after {        
        background: -webkit-linear-gradient(rgba(0,0,0,0.32) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.33) 100%);
        background: -o-linear-gradient(rgba(0,0,0,0.32) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.33) 100%);
        background: linear-gradient(rgba(0,0,0,0.32) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.33) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        z-index: 2;
    }

.hp-cta {
    position: absolute;
    left: 0;
    bottom: 110px;
    width: 100%;
    padding: 0 15px;
    z-index: 9;
}
    
    .hp-cta-inner {
        max-width: 71.250vw;
        margin: 0 auto;
    }

        .hp-cta-item {
            width: 31%;
        }

            .hp-cta a {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 6.063vw;
                font-size: 1.500vw;
                color: var(--white-text);
                letter-spacing: .1em;
                transition: var(--animate);
                border: 2px solid #fff;
            }

                .hp-cta a:is(:hover, :focus) {
                    background: var(--accent);
                    border-color: var(--accent);
                }

.hp-qs {
    margin-top: -50px;
    z-index: 9;
}
    
    .hp-qs-inner {
        max-width: 75vw;
        margin: 0 auto;
        border-bottom: 2px solid var(--accent);
        padding: 25px 30px;
        background: #fff;
        -webkit-box-shadow: 3px 3px 40px 0px rgba(0,0,0,0.14);
        -moz-box-shadow: 3px 3px 40px 0px rgba(0,0,0,0.14);
        box-shadow: 3px 3px 40px 0px rgba(0,0,0,0.14);
    }

        .hp-qs-wrap > span {
            font-size: 40px;
            color: var(--accent);
            margin-right: 22px;
            font-weight: bold;
            transform: rotate(270deg);
        }

        .hp-qs-form {
            width: 100%;
        }

            .hp-qs-col {
                width: 10.3%;
                position: relative;
            }

                .hp-qs-col.wide {
                    width: 41%;
                }

                .hp-qs-col.select:after {
                    position: absolute;
                    content: '';
                    top: 50%;
                    transform: translateY(-50%);
                    right: 12px;
                    width: 0; 
                    height: 0; 
                    border-left: 4px solid transparent;
                    border-right: 4px solid transparent;
                    border-top: 4px solid #565656;
                }

                .hp-qs-col input,
                .hp-qs-col select {
                    width: 100%;
                    height: max(30px, 2.625vw);
                    padding: 0 10px;
                    font-size: max(10px, 0.813vw);
                    color: #6c6c6c;
                    border: 0;
                    outline: 0;
                    border-bottom: 1px solid #bfbfbf;
                    background: transparent;
                    -webkit-appearance: none;
                    -moz-appearance: none;
                }

            .hp-qs-form input[type="submit"] {
                width: 13%;
                border: 0;
                outline: 0;
                -webkit-appearance: none;
                -moz-appearance: none;
                height: max(30px, 2.625vw);
                background: var(--accent);
                color: var(--white-text);
                text-transform: uppercase;
                font-size: 0.813vw;
                letter-spacing: .05em;
                margin-left: 2.5%;
                transition: var(--animate);
            }

                .hp-qs-form input[type="submit"]:is(:hover, :focus) {
                    background: var(--secondary);
                }

    .hp-qs .idx-disc {
        margin-top: 15px;
        font-size: 13px;
        color: #5b5b5b;
        text-align: right;
    }

/* welcome */

.hp-welcome {
    padding: 70px 30px 0;
}
    
    .hp-welcome-inner {
        width: 79.063vw;
        margin: 0 auto;
    }

        .hp-welcome-left {
            width: 57.7%;
            padding-left: 3.750vw;
            padding-bottom: 75px;
        }

            .hp-welcome-title {
                margin-bottom: 40px;
            }

                .hp-welcome-title img {
                    width: max(76px, 9.813vw);
                }

                .hp-welcome-left h1 {
                    font-size: max(34px, 4.813vw);
                    font-weight: 600;
                    letter-spacing: .05em;
                    padding-left: 20px;
                    margin-left: 20px;
                    border-left: 1px solid #cfcfcf;
                    color: var(--secondary);
                    text-align: left;           
                }

            .hp-welcome-left p {
                font-size: max(12px, 0.875vw);
                line-height: max(20px, 1.500vw);
                letter-spacing: .05em;
                color: #6b6b6b;                
                margin-bottom: 2.188vw;
                padding-right: 8%;
            }

            .hp-welcome-left .hp-btn {
                width: 11.375vw;
                margin-top: 15px;
            }

        .hp-welcome-right {
            width: 37.47%;
            position: relative;
        }

            .hp-welcome-right:after {
                position: absolute;
                content: '';
                right: 0;
                top: 0;
                width: 55%;
                height: 100%;                
                background: -webkit-linear-gradient(left, rgba(255,255,255,0) 20%, rgba(255,255,255,1) 100%);
                background: -o-linear-gradient(left, rgba(255,255,255,0) 20%, rgba(255,255,255,1) 100%);
                background: linear-gradient(to right, rgba(255,255,255,0) 20%, rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                z-index: 5;
                pointer-events: none;
            }

            .hp-welcome-right img {
                width: 100%;
            }

/* featured and sold listings */

.hp-fl,
.hp-sold {
    padding: clamp(50px, 5.625vw, 90px) 15px clamp(50px, 5.938vw, 95px);
}
    
    .hp-fl .accent:before {
        background: rgba(255,255,255,.9);
    }

    .hp-fl .accent:after {        
        background: -webkit-linear-gradient(rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
        background: -o-linear-gradient(rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
        background: linear-gradient(rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    }
    
    .hp-fl-inner,
    .hp-sold-inner {
        width: 84.500vw;
        margin: 0 auto;
    }

        .hp-fl-list,
        .hp-sold-list {
            margin: 45px -12px 0;
        }

            .hp-fl-item,
            .hp-sold-item {
                width: 33.33%;
                padding: 0 12px;
            }

                .hp-fl-item a,
                .hp-sold-item a {
                    display: block;
                    position: relative;
                }

                    .hp-fl-item a:before,
                    .hp-fl-item a:after,
                    .hp-sold-item a:before,
                    .hp-sold-item a:after {
                        position: absolute;
                        content: '';
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;                        
                        background: -webkit-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%);
                        background: -o-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%);
                        background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                        pointer-events: none;
                        z-index: 1;
                        transition: var(--animate);
                    }

                        .hp-fl-item a:after,
                        .hp-sold-item a:after {
                            background: var(--accent);
                            opacity: 0;
                            z-index: 2;
                        }

                            .hp-fl-item a:is(:hover, :focus):after,
                            .hp-sold-item a:is(:hover, :focus):after {
                                opacity: .87;
                            }

                    .hp-fl-item a:is(:hover, :focus) .canvas-img img,
                    .hp-sold-item a:is(:hover, :focus) .canvas-img img {
                        transform: scale(1.5);
                    }

                    .hp-fl-item .hp-fl-info,
                    .hp-sold-item .hp-sold-info {
                        position: absolute;
                        left: 0;
                        bottom: 30px;
                        width: 100%;
                        padding: 0 24px;
                        font-size: 1.125vw;
                        letter-spacing: .05em;
                        color: var(--white-text);
                        z-index: 9
                    }

                        .hp-fl-info .hp-fl-price,
                        .hp-sold-info .hp-sold-price {
                            font-size: 2.063vw;
                            margin: 10px 0 15px;
                        }

                        .hp-fl-info .hp-beds-baths,
                        .hp-sold-info .hp-sold-baths {
                            font-size: 0.875vw;
                        }

        .hp-fl-navs,
        .hp-sold-navs {
            margin-top: 50px;
        }

            .hp-fl-navs .hp-btn,
            .hp-sold-navs .hp-btn {
                margin: 0 10px;
            }

            .hp-fl-navs button,
            .hp-sold-navs button {
                padding: 0;
                background: transparent;
                font-size: 0;
                width: 3.313vw;
                height: 3.313vw;               
                border: 1px solid var(--accent);
                position: relative;
                transition: var(--animate);
            }

                .hp-fl-navs button span,
                .hp-sold-navs button span {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 1vw;
                    height: 1.438vw;
                    background: url('../images/slick-arrow.png');
                    background-size: cover;
                    pointer-events: none;
                    z-index: 1;
                    transition: var(--animate);
                }

                .hp-fl-navs button.hp-fl-prev span,
                .hp-sold-navs button.hp-sold-prev span {
                    transform: translate(-50%, -50%) rotate(180deg);
                }

            .hp-fl-navs button:is(:hover, :focus),
            .hp-sold-navs button:is(:hover, :focus) {
                background: var(--accent);               
            }

            .hp-fl-navs button:is(:hover, :focus) span,
            .hp-sold-navs button:is(:hover, :focus) span {                
                filter: grayscale(1) invert(1) brightness(10);     
            }

.hp-islands {}
    
    .hp-islands-list {
        margin-top: 70px;
    }

        .hp-islands-item a {
            display: block;
            position: relative;
            color: var(--white-text);
            letter-spacing: .05em;
            background: var(--dark);
        }

            .hp-islands-item a:before {
                position: absolute;
                content: '';
                left: 0;
                top: 0;
                width: 80%;
                height: 100%;                                
                background: -webkit-linear-gradient(left, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 100%);
                background: -o-linear-gradient(left, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 100%);
                background: linear-gradient(to right, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */            
                z-index: 1;                             
                transition: var(--animate);
            }

                .hp-islands-item:nth-of-type(even) a:before {
                    left: auto;
                    right: 0;
                    background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 90%);
                    background: -o-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 90%);
                    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 90%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */                
                }

                .hp-islands-item a:is(:hover, :focus):before {
                    opacity: 0 !important;
                }

            .hp-islands-item a:after {
                position: absolute;
                content: '';
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,.8);
                opacity: 0;
                transition: var(--animate);
            }

                .hp-islands-item a:is(:hover, :focus):after {
                    opacity: 1;
                }

            .hp-islands-info {
                position: absolute;
                left: 14.063vw;
                top: 50%;
                transform: translateY(-50%);                
                padding: 0;
                display: flex;
                flex-direction: column;
                transition: var(--animate2);
                z-index: 5;
            }

                .hp-islands-item:nth-of-type(even) .hp-islands-info {
                    align-items: flex-end;
                    text-align: right;
                    left: auto;
                    right: 14.063vw;
                }

                .hp-islands-item a:is(:hover, :focus) .hp-islands-info {
                    align-items: center;
                    text-align: center;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

                .hp-islands-info .ip-community-listings {
                    display: none;
                }

            .hp-islands-item a h2 {
                font-family: var(--font-family-title);
                font-size: max(34px, 3.375vw);
                line-height: 1;                
                text-transform: uppercase;
                margin-bottom: 25px;
                font-weight: 600;
            }

            .hp-islands-item a p {
                font-size: max(12px, 0.875vw);
                line-height: max(20px, 1.500vw);
                width: max(400px, 38.125vw);
            }

.hp-testimonials {
    padding: clamp(65px, 6.563vw, 105px) 15px;
}
    
    .hp-testimonials .accent:before {
        background: rgba(255,255,255,.9);
    }

    .hp-testimonials .accent:after {                        
        background: -webkit-linear-gradient(rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.15) 100%);
        background: -o-linear-gradient(rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.15) 100%);
        background: linear-gradient(rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.15) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */    
    }

    .hp-testimonials .accent2 {
        width: 14%;
        z-index: 1;
        left: auto;
        right: 0;
    }

        .hp-testimonials .accent2 canvas {
            background-position: right center
        }
    
    .hp-test-inner {
        width: 92.500vw;
        margin: 0 auto;
        padding-left: 5.938vw;
    }

        .hp-test-wrap {
            background: #fff;            
            z-index: 9;
        }

        .hp-test-left {
            width: 47%;
            padding: 0 4vw 0 4.375vw;
        }

            .hp-test-list {
                margin: max(40px, 4.063vw) 0;
            }

                .hp-test-item {
                    font-size: max(12px, 0.875vw);
                    line-height: max(20px, 1.500vw);
                    letter-spacing: .05em;
                    color: #6b6b6b;
                }        

            .hp-test-navs button {
                padding: 0;
                background: transparent;
                font-size: 0;
                width: 3.313vw;
                height: 3.313vw;
                display: flex;
                align-items: center;
                justify-content: center;                
                color: var(--accent);
                font-size: 1vw;
                transition: var(--animate);
                border: 0;
                position: relative;
            }

                .hp-test-navs button span {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 1vw;
                    height: 1.438vw;
                    background: url('../images/slick-arrow.png');
                    background-size: cover;
                    pointer-events: none;
                    z-index: 1;
                    transition: var(--animate);
                }

                .hp-test-navs button.hp-test-prev span {
                    transform: translate(-50%, -50%) rotate(180deg);
                }

            .hp-test-navs button:is(:hover, :focus) {
                background: var(--accent);
                color: var(--white-text);                
            }

                .hp-test-navs button:is(:hover, :focus) span {
                    filter: grayscale(1) invert(1) brightness(10);
                }

            .hp-test-navs .hp-btn {
                width: 9.063vw;
                border: 0;
            }

        .hp-test-right {
            width: 53%;
        }

            .hp-test-right img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                right: -1px;
                position: relative;
            }

.img-wrap {
    position: relative;
    overflow: hidden;
}

.img-wrap canvas {
    display: block;
    width: 100%;
    height: auto;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.img-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    top: 0;
    left: 0;
}

.hp-instagram {
    padding: clamp(50px, 5.625vw, 90px) 15px clamp(50px, 6.563vw, 105px);
}
    
    .hp-instagram-inner {
        max-width: 92.500vw;
        margin: 0 auto;
    }

    .hp-ig-list,
    .hp-instagram .aios-social-media-feed {
        margin-top: 80px;
		display: flex;
		flex-flow: row wrap;
    }

        .hp-ig-item,
        .sm-item {
            width: 20%;
            padding: 12px;
        }

            .hp-ig-item a,
            .sm-item a {
                display: block;
                position: relative;
            }

                .hp-ig-item a:before,
                .sm-item a:before {
                    position: absolute;
                    content: '';
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(248,179,184,.9);
                    opacity: 0;
                    z-index: 3;
                    pointer-events: none;
                    transition: var(--animate);
                }

                .hp-ig-item .ai-font-instagram,
                .sm-item .ai-font-instagram {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    color: var(--white-text);
                    font-size: 3.375vw;
                    z-index: 9;
                    pointer-events: none;
                    transition: var(--animate);
                    opacity: 0;
                }


                    .hp-ig-item a:is(:hover, :focus):before,
                    .sm-item a:is(:hover, :focus):before,
                    .sm-item a:is(:hover, :focus) .ai-font-instagram,
                    .hp-ig-item a:is(:hover, :focus) .ai-font-instagram {
                        opacity: 1;
                    }

.hp-referral {
    padding: clamp(50px, 6.563vw, 105px) 30px clamp(50px, 5.625vw, 90px);
    text-align: center;
}
    
    .hp-referral .accent:before {        
        background: rgba(255,255,255,.85);
    }

    .hp-referral .section-title :is(h1, h2) {
        font-size: max(28px, 3.375vw) !important;
    }

    .hp-referral p {
        font-size: max(12px, 0.875vw);
        line-height: max(20px, 1.500vw);
        letter-spacing: .05em;        
        color: #6b6b6b;
        margin: 30px auto 38px;
        text-align: center;
        width: 68.125vw;        
    }

    .hp-referral .hp-btn {
        width: max(175px, 11.250vw);
    }

.hp-connect {
    padding: clamp(50px, 4.500vw, 72px) 15px;
}
    
    .hp-connect .accent:before {                        
        background: -webkit-linear-gradient(left, rgba(255,255,255,1) 20%, rgba(255,255,255,0) 90%);
        background: -o-linear-gradient(left, rgba(255,255,255,1) 20%, rgba(255,255,255,0) 90%);
        background: linear-gradient(to right, rgba(255,255,255,1) 20%, rgba(255,255,255,0) 90%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */    
    }
    
    .hp-connect-inner {
        width: 82.813vw;
        margin: 0 auto;
    }

        .hp-connect-wrap {
            width: 100%;
            max-width: 51.250vw;
            background: #fff;
            padding: max(45px, 5vw) 5.313vw 45px;
            position: relative;
        }

            .hp-connect-wrap p {
                font-size: max(12px, 0.875vw);
                line-height: max(20px, 1.500vw);
                letter-spacing: .05em;                
                color: #6b6b6b;
                text-align: center;
                padding: 0 5%;
                margin: 30px 0 35px;
            }

            .hp-connect-form .form-row {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
            }

                .hp-connect-form .form-col {
                    width: 47%;
                }

                    .hp-connect-form .form-col.wide {
                        width: 100%;
                        margin-top: 40px;
                    }
                    
                    .hp-connect-form .form-col input,
                    .hp-connect-form .form-col textarea {
                        width: 100%;
                        height: 52px;
                        border: 0;
                        border-bottom: 1px solid #b2b2b2;
                        -webkit-appearance: none;
                        -moz-appearance: none;
                        outline: 0;
                        font-size: max(13px, 0.875vw);
                        letter-spacing: .05em;                        
                        color: #6b6b6b;
                    }

                        .hp-connect-form .form-col textarea {
                            padding-top: 12px;
                            height: 85px;
                            resize: none;
                        }

                .hp-connect-form input[type="submit"] {
                    display: flex;
                    width: max(175px, 11.250vw);
                    margin: 50px auto 0;
                    /* background: transparent; */
                    -webkit-appearance: none;
                    -moz-appearance: none;
                }

                    /* .hp-connect-form input[type="submit"]:is(:hover, :focus) {
                        background: var(--accent);
                    } */

                body .hp-connect-form div.wpcf7-response-output {
                    position: absolute;
                    left: 0;
                    width: 100%;
                    margin: 10px 0 0;
                    color: #000 !important;
                    text-align: center;
                    font-size: 12px;
                }

.hp-quick-search .bootstrap-select.btn-group .dropdown-toggle {
    width: 100%;
    height: max(30px, 2.625vw);
    padding: 0 10px;
    border-radius: 0;
    border: 0;
    outline: 0;
    border-bottom: 1px solid #bfbfbf;
    background: transparent;
    -webkit-appearance: none;
}
.hp-quick-search .bootstrap-select.btn-group .dropdown-toggle .filter-option {
    font-size: max(10px, 0.813vw);
    color: #6c6c6c;
}
.hp-quick-search .dropdown-menu.open {
    max-height: 300px !important;
}
.hp-quick-search ul.dropdown-menu.inner {
    max-height: 250px !important;
}


.sm-btn-wrap{
    margin-top: 30px;
}
.sm-smi-wrap{
    display: flex;
    margin-top: 30px;
    gap: 30px;
}
.sm-smi-wrap a{
    color: var(--accent);
    font-size: 30px;
    transition: var(--animate);
}
.sm-smi-wrap a:hover{
    color: var(--secondary);
}

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

    .hp-qs-col {
        width: 13.3%;
    }
    
        .hp-qs-col.wide {
            width: 30%;
        }


}

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

    .hp-qs {
        margin-top: 30px;
    }

    .hp-cta {
        position: relative;
        bottom: 0;
        margin: 50px 0;
    }

        .hp-cta a {
            max-width: 360px;
            color: var(--accent);
            border-color: var(--accent);
            margin: 10px auto;
            height: 90px;
            font-size: 20px;
        }

            .hp-cta a:is(:hover, :focus) {
                color: var(--white-text);
            }

    .hp-qs-inner {
        max-width: 360px;
    }

        .hp-qs-form-top {
            flex-wrap: wrap;
            margin-top: 30px;
        }

            .hp-qs-col {
                width: 48%;
                margin-bottom: 10px;
            }

                .hp-qs-col.wide {
                    width: 100%;
                }

                .hp-qs-col input, .hp-qs-col select {
                    font-size: 12px;
                }

            .hp-qs-form input[type="submit"] {
                width: 100%;
                margin: 0;
                height: 40px;
                font-size: 12px;
            }

    .hp-welcome-left {
        padding-left: 0;
    }

        .hp-welcome-title {
            justify-content: center;
        }

        .hp-welcome-left p {
            padding-right: 0;
        }

        .hp-welcome-left .hp-btn {
            width: 160px;
        }

    .hp-fl-item .hp-fl-info, 
    .hp-sold-item .hp-sold-info {
        font-size: 16px;
    }

    .hp-fl-info .hp-fl-price, 
    .hp-sold-info .hp-sold-price {
        font-size: 30px;
    }

    .hp-fl-info .hp-beds-baths,
    .hp-sold-info .hp-sold-baths {
        font-size: 13px;
    }

    .hp-fl-navs button, 
    .hp-sold-navs button {
        width: 45px;
        height: 45px;
    }

        .hp-fl-navs button span,
        .hp-sold-navs button span {
            width: 13px;
            height: 19px;
        }

    .hp-islands-item a:before {
        width: 100%;
    }

    .hp-islands-item a .canvas-img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .hp-islands-info {
        left: 0;
        width: 100%;
        padding: 50px 30px;
        position: relative;
        top: 0;
        transform: translateY(0);
    }

        .hp-islands-item:nth-of-type(even) .hp-islands-info {
            right: 0;
        }

        .hp-islands-item a:is(:hover, :focus) .hp-islands-info {
            left: 0;
            transform: translate(0,0);
        }

    .hp-test-inner {
        padding-left: 0;
    }

        .hp-test-left {
            padding: 50px 30px 30px;
        }

        .hp-test-right img {
            right: 0;
        }

        .hp-test-navs {
            justify-content: center;
        }

            .hp-test-navs button {
                width: 45px;
                height: 45px;
            }

                .hp-test-navs button span {
                    width: 13px;
                    height: 19px;
                }

                .hp-test-navs .hp-btn {
                    width: 150px;
                }

    .hp-ig-list {
        margin: 40px -5px 0;
    }

        .hp-ig-item {
            padding: 5px;
        }

    .hp-connect-wrap {
        max-width: 100%;
    }

        .hp-connect-wrap p {
            padding: 0;
        }
	
	        .sm-item {
            width: 50%;
        }

}

/* Galaxy Tab 3(portrait) | Galaxy S5(landscape) */
@media only screen and (max-width: 767px) {

     
}
/* Galaxy S5(portrait) | iPod Touch(landscape) | iPod Touch(portrait) */

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

    .hp-fl-navs,
    .hp-sold-navs {
        flex-wrap: wrap;
    }

        .hp-fl-navs button,
        .hp-sold-navs button {
            margin: 0 10px;
        }

        .hp-fl-navs .hp-btn,
        .hp-sold-navs .hp-btn {
            order: 3;
            margin-top: 20px;
        }

    .hp-islands-item a p {
        width: 100%;
    }

    .hp-ig-item {
        width: 50%;
    }

        .hp-ig-item .ai-font-instagram {
            font-size: 30px;
        }

    .hp-connect-form .form-col,
    .hp-connect-form .form-col.wide {
        width: 100%;
        margin-top: 15px;
    }
	
	        .sm-item {
            width: 100%;
        }
 
}