/*
Theme Name: The Klein Residences
Author: Steven Crocker, SmartTouch Interactive.
Version: 1.0
Requires at least: 6.0
Requires PHP: 8.0
*/


.smarttouch-button span{
	letter-spacing:0.20em;
}

.logo-mark{
mix-blend-mode: multiply;
}


.text-bdr {
    position: relative;
	padding-bottom:10px;
}

.text-bdr::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 5%;
    width: 90%;
    height: 1px;
    background: #6f6b52;
}

html {
    scroll-behavior: auto !important;
}

html.vip-popup-open {
    overflow: hidden !important;
    width: 100% !important;
}

body.vip-popup-open {
    overflow: hidden !important;
    width: 100% !important;
}

#vip-form-popup {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(256, 256, 256, 1);
    padding: 20px;
    display: flex;
	
	align-items: flex-start;
	justify-content: flex-start;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-y: contain;	
	perspective: 1200px;
	
	height: 100vh;
	height: 100dvh;
	box-sizing: border-box;
	
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.45s ease,
        visibility 0s linear 0.45s;
}

#vip-form-popup.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition:
        opacity 0.45s ease,
        visibility 0s;
}

#vip-form-popup .vip-popup-content {
    position: relative;
    width: 100%;
    background: #fff;
	padding:40px 100px;
	
	margin: auto;
    flex: 0 1 1050px;
    width: 100%;
	
    opacity: 0;
    transform: rotateY(-12deg) scale(0.96);
    transform-origin: left center;

    transition:
        opacity 0.5s ease,
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);

    backface-visibility: hidden;
}

#vip-form-popup.active .vip-popup-content {
	opacity: 1;
    transform: rotateY(0deg) scale(1);
}

#vip-form-popup .vip-popup-form-container{
    background: #d8c7af;
    padding: 0;
    border-radius: 0px;
    border: solid 1px #534e36;
}


#vip-form-popup .vip-popup-form-bdr {
	padding: 40px 6vw;
	border: solid 10px #fff;
}

#vip-form-popup .vip-popup-close {
    position: absolute;
    top: -13px;
    right: 15px;
    border: 0;
    background: transparent;
    font-size: 48px;
    cursor: pointer;
    z-index: 5;
    transition: transform 0.3s ease;
}

.vip-popup-close:hover {
    transform: scale(1.2);
}

#vip-form-popup .roudbox {
    position: absolute;
    right: -96px;
    width: 150px;
    top: 70px;
    z-index: 9999;
	mix-blend-mode: multiply;
}

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

    #vip-form-popup {
        position: fixed;
        inset: 0;

        width: 100%;
        height: 100vh;
        height: 100dvh;

        display: block;

        overflow-x: hidden;
        overflow-y: auto;
		
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;

        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;

        padding: max(15px, env(safe-area-inset-top))
                 15px
                 max(20px, env(safe-area-inset-bottom));
    }
	

	#vip-form-popup .vip-popup-content {
		width: 100%;
		max-width: 100%;
		height: auto;
		min-height: 0;
		flex: 0 0 auto;
		padding: 0;
		margin: 0;
		transform: translateY(15px);
		backface-visibility: visible;
	}

    #vip-form-popup.active .vip-popup-content {
        transform: translateY(0);
    }

    #vip-form-popup .vip-popup-form-container {
        width: 100%;
        height: auto;
    }

    #vip-form-popup .vip-popup-form-bdr {
        padding: 25px 5vw;
        height: auto;
        border: 7px solid #fff;
    }

    #vip-form-popup .vip-popup-close {
        top: 0;
        right: 8px;
    }

    #vip-form-popup .roudbox {
        display: none;
    }
}
@media screen and (min-width: 481px) and (max-width: 1080px) {
#vip-form-popup .roudbox {
	right: -70px;
	width: 109px;
	top: 39px;
}
}

#vip-form-popup .iconbox {
    width: 70px;
    margin: 0 auto 25px;
}
#vip-form-popup h3 {
    color: #fff;
    margin: 20px 0 40px;
	text-align:center;
}

.vip-popup-content smarttouch-nexgen .stFields{
	gap:0px 20px;
}

.vip-popup-content smarttouch-nexgen input[type="text"],
.vip-popup-content smarttouch-nexgen input[type="email"],
.vip-popup-content smarttouch-nexgen input[type="tel"] {
    width: 100%;
    height: 53px;
    padding: 0 18px;
    background: #fff;
    border: none;
    border-radius: 0;
    box-shadow: 5px 7px 12px rgba(0, 0, 0, 0.18);
    color: #8e8d87;
    font-family: "adobe-aldine",sans-serif;
    font-size: 18px;
    letter-spacing: 1px;
    outline: none;
    margin-bottom: 16px;
}


.vip-popup-content smarttouch-nexgen .stFields .stError input{
	 margin-bottom: 0px;
}

.vip-popup-content smarttouch-nexgen input::placeholder {
    color: #8e8d87;
    opacity: 1;
}

.vip-popup-content smarttouch-nexgen .stCheckBox label span{
	font-family: "gotham",sans-serif;
	color: #784928;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.20em;
}

.vip-popup-content smarttouch-nexgen .stSubmit{
	flex-direction: column !important;
}

.vip-popup-content smarttouch-nexgen .stSubmit button {
	width:350px;
    max-width: 100%;
    margin: 0 auto;
    background: #784928;
    border: none;
    border-radius: 0;
	font-family: "gotham",sans-serif;
	font-weight:350px;
    color: #fff;
    font-size: 16px;
    font-weight: 350;
    letter-spacing: 4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease;
}

.vip-popup-content smarttouch-nexgen .stSubmit button:hover {
    background: #534e36;
}

.vip-popup-content smarttouch-nexgen .stMessage{
	background: #534e36;
	color: #fff;
	border: 0;
	font-size: 19px;
	line-height: 1.5em;
	font-family: "gotham",sans-serif;
	font-weight: 350;
	letter-spacing: 0.05em;
}

.st-button-readmore {
    --flex: 1;
    --alignItems: center;
    --justifyContent: center;
    --textAlign: left;
    --iconWidth: 24px;
    --iconHeight: 24px;
    --iconGap: 10px;
    --outlineWidth: 0px;
    --rounding: 0px;
    /*--backgroundColor: #d8c7af;*/
    --textColor: #784928;
    /*--backgroundColorHover: #784928;*/
    --textColorHover: #d8c7af;
    font-family: var(--wp--preset--font-family--gotham);
    font-weight: 200;
    --paddingTop: 12px;
    --paddingBottom: 12px;
    --paddingRight: 0px;
    --paddingLeft: 0px;
	margin:0 auto 30px;
	max-width:200px !important;
}

.st-button-readmore:hover {
    /*background-color: var(--backgroundColorHover);*/
    border-color: var(--outlineColorHover);
    color: var(--textColorHover) !important;
}
.st-button-readmore:before{
	content:"";
	position:absolute;
    top: 28px;
    z-index: 1;
    border-bottom: dotted 1px #784928;
    left: calc(10% - 100px);
    height: 0px;
    width: 41%;
}
.st-button-readmore:after{
	content:"";
	position:absolute;
    top: 28px;
    z-index: 1;
    border-bottom: dotted 1px #784928;
    right: calc(10% - 95px);
    height: 0px;
    width: 41%;
}
@media screen and (max-width: 480px) {

.st-button-readmore:before{
    top: 25px;
    left: calc(30% - 100px);
    width: 30%;
}
.st-button-readmore:after{
    top: 25px;
    right: calc(30% - 100px);
    width: 30%;
}

}
#read-more-content {
    box-sizing: border-box;
    width: 100%;
}

#read-more-content > .smarttouch-group {
    width: 100%;
    box-sizing: border-box;
}

.st-button-readmore {
    display: flex;
}