*{
    box-sizing:border-box
}
html{
    -webkit-overflow-scrolling:touch;
    -webkit-text-size-adjust:none;
    font-family:'Roboto', sans-serif;
    font-size:4vw
}
body{
    margin:0
}
.wrapper{
    position:relative
}
img{
    max-width:100%;
    vertical-align:middle
}
input,button,select{
    font-size:1em;
    outline:none
}
.pxl,.hidden{
    display:none !important
}
@media (min-width: 568px){
    html{
        font-size:15px
    }
    .container{
        display:flex;
        align-items:center;
        font-size:.85em;
        max-width:44.55em;
        margin:0 auto
    }
}
@media (min-width: 768px){
    .container{
        font-size:1em;
        max-width:49.2em;
        margin:0 auto
    }
}
@media (min-width: 1880px) and (min-height: 885px){
    html{
        font-size:1.69vh
    }
}
button{
    cursor:pointer
}
.btn-login{
    display:block;
    width:2.5em;
    height:2.5em;
    background:url("/img/_btns/stp_login.svg") no-repeat center center;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover
}
.btn-close{
    position:absolute;
    top:0;
    right:0;
    display:block;
    background-color:#313131;
    text-align:center;
    font-size:1.5em;
    line-height:1.7;
    width:1.7em;
    height:1.7em;
    border-radius:2em .8em 2em 2em
}
.form-group-radio-buttons .form-group-inner .radio-button input:checked+label{
    border:none;
    background-color:#313131
}
.form-group-radio-buttons .form-group-inner .radio-button label{
    display:block;
    text-align:center;
    cursor:pointer;
    color:#fff;
    border:.1em solid #fff;
    border-radius:3em 1em 3em 3em;
    height:2.5em;
    line-height:2.5
}
.btn-arrow,.btn-location{
    position:absolute;
    width:2.5em;
    height:2.5em;
    border:0;
    padding:0
}
.btn-arrow.btn-location-loading,.btn-arrow.location-loading,.btn-location.btn-location-loading,.btn-location.location-loading{
    border:0.2em solid #f3f3f3;
    border-top:0.2em solid rgb(255, 183, 3);
    border-radius:50%;
    width:1.5em;
    height:1.5em
}
.btn-arrow.btn-location-loading img,.btn-arrow.location-loading img,.btn-location.btn-location-loading img,.btn-location.location-loading img{
    display:none
}
.btn-arrow{
    top:0;
    right:0;
    background-color:#fff;
    color:rgb(255, 183, 3);
    border-radius:3em 1em 3em 3em
}


.btn-arrow:disabled {
  background-color: dimgrey;
  color: linen;
  opacity: 1;
}

.btn-arrow.btn-location-loading{
    top:.5em;
    right:.5em;
    background-color:transparent;
    animation:spin 2s linear infinite;
	cursor: error;
}
.btn-location{
    top:50%;
    left:-.6em;
    transform:translateY(-50%);
    background-color:transparent
}
.btn-location.location-loading{
    left:0.5em;
    animation:spin2 2s linear infinite
}
.btn-location img{
    width:100%
}
@keyframes spin{
    0%{
        transform:rotate(0deg)
    }
    100%{
        transform:rotate(360deg)
    }
}
@keyframes spin2{
    0%{
        transform:translateY(-50%) rotate(0deg)
    }
    100%{
        transform:translateY(-50%) rotate(360deg)
    }
}
.btn-submit{
    width:100%;
    height:2.5em;
    border:0;
    border-radius:3em 1em 3em 3em;
    padding:0;
    color:#fff;
    background-color:#313131
}
.section-2 .area-text button,.section-3 .match-text button{
    color:#fff;
    border:none;
    border-radius:3em 1em 3em 3em;
    min-width:10em;
    height:2.5em;
    padding:0
}
.section-2 .area-text button{
    background-color:rgb(255, 183, 3)
}
.section-3 .match-text button{
    background-color:#313131
}
@media (min-width: 1240px){
    .section-2 .area-text button,.section-3 .match-text button{
        min-width:11em
    }
}
ul{
    margin:0;
    padding:0;
    list-style:none
}
p{
    margin:0
}
a{
    cursor:pointer;
    color:#fff
}
a:hover{
    text-decoration:none
}
.legal-warning-text{
    color:#ffd7d2;
    text-align:center;
    font-size:.7em
}
.legal-warning-text a{
    color:inherit
}
.required,.unknown-error-msg, #usererror, #response-box{
    font-size:.7em;
    color:#fff;
    margin-top:.5em;
    display:block;
	font-weight: bold;
}

.cerror {
	color: #f00 !important;
}

.cokay {
	color: #036b24 !important;
}

.text-field .form-group-inner .required{
    position:absolute;
    top:3.5em;
    left:0;
    right:0
}
.login-form-holder .required,.login-form-holder .unknown-error-msg{
    color:#ff0000;
    text-align:center
}
.section-2 .area-text h2,.section-3 .match-text h2{
    font-size:2.2em;
    font-weight:400;
    margin:0 0 .5em
}
.section-2 .area-text h2{
    color:#313131
}
.section-3 .match-text h2{
    color:rgb(255, 183, 3)
}
@media (min-width: 768px){
    .section-2 .area-text h2,.section-3 .match-text h2{
        font-size:2.3em
    }
}
.section-1{
    background:url("/img/_patterns/darkTriangles.png") no-repeat center center;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}
.section-1 .modal{
    border-radius:1.5em .33em 1.5em 1.5em;
    height:97vh;
    max-height:35em;
    display:flex;
    flex-direction:column
}
@media (min-width: 568px){
    .section-1 .modal{
        max-width:36.53em;
        margin:0 auto
    }
}
@media (min-width: 768px){
    .section-1{
        position:relative;
        height:52em;
        background-position:100% 0
    }
    .section-1 .modal{
        position:absolute;
        right:2em;
        bottom:2em;
        width:100%;
        max-width:32em;
        max-height:38em
    }
}
@media (min-width: 992px) and (max-height: 900px){
    .section-1{
        height:calc(100vh - 5em);
        background-position:center center
    }
    .section-1 .modal{
        max-width:31em;
        max-height:none;
        top:2em;
        height:auto
    }
}
@media (min-width: 1200px){
    .section-1{
        height:calc(100vh - 5em);
        background-position:100% center
    }
    .section-1 .modal{
        max-width:31em;
        max-height:none;
        top:2em;
        height:auto
    }
}
@media (min-width: 1880px) and (min-height: 885px){
    .section-1 .modal{
        max-width:35em
    }
}
.conversation-box{
    flex:auto;
    overflow-y:auto;
    -ms-overflow-style:none;
    scrollbar-width:none;
    margin:1em
}
.conversation-box::-webkit-scrollbar{
    width:0 !important
}
.conversation-box li{
    position:relative;
    margin:0 0 1.5em 5em;
    animation:animationFrames2 ease .5s;
    animation-iteration-count:1;
    transform-origin:0% 0%;
    animation-fill-mode:forwards
}
.conversation-box li.has-avatar{
    margin-top:1em
}
.conversation-box li .avatar{
    height:4em;
    border-radius:100%;
    position:absolute;
    left:-5em;
    top:0;
    transform:translateY(-25%)
}
.conversation-box li span{
    display:inline-block;
    animation:animationFrames ease .5s;
    animation-iteration-count:1;
    transform-origin:0% 0%;
    animation-fill-mode:forwards
}
.conversation-box li.has-avatar+li.has-avatar{
    margin-top:3.2em
}
@keyframes animationFrames{
    0%{
        transform:scaleX(0)
    }
    100%{
        transform:scaleX(1)
    }
}
@keyframes animationFrames2{
    0%{
        transform:scaleY(0)
    }
    100%{
        transform:scaleY(1)
    }
}
@keyframes animationColor{
    0%{
        color:#cccccc
    }
    100%{
        color:#1675ac
    }
}
@media (min-width: 1880px) and (min-height: 885px){
    .conversation-box{
        margin:1.5em
    }
    .conversation-box li span{
        font-size:.9em
    }
}
.form-box{
    background-color:rgb(255, 183, 3);
    padding:1em;
    border-radius:0 0 1.5em 1.5em
}
.form-box .registration-form-builder{
    margin:0 auto .5em;
    max-width:18em
}
.step:not(.step-btn) .step-inner{
    position:relative
}
.step:not(.step-btn) .step-inner .form-group-inner{
    display:flex;
    align-items:center;
    border-radius:3em 1em 3em 3em;
    border:0.1em solid #fff;
    min-height:2.5em;
    padding-left:.5em;
    padding-right:3em;
    gap:0.5em;
}
.step:not(.step-btn) .step-inner .form-group-inner input{
    width:100%;
    background:transparent;
    border:0;
    padding:0;
    color:#ffffff;
}
.form-group-radio-buttons .form-group-inner{
    display:flex;
    gap:1em
}
.form-group-radio-buttons .form-group-inner .radio-button{
    flex:1
}

.step-location-group .form-control-wrapper{
    position:relative
}
.step-location-group .form-control-wrapper:nth-child(1){
    min-width:2em
}
.step-location-group .form-control-wrapper:nth-child(2){
    max-width:2.5em
}
.step-location-group .form-control-wrapper:nth-child(2)::after{
    content:"-";
    color:#fff;
    position:absolute;
    display:inline-block;
    top:50%;
    right:-0.5em;
    transform:translateY(-50%)
}
.step-location-group .form-control-wrapper:nth-child(2) input{
    text-align:center
}
.step-location-group .form-control-wrapper:nth-child(3){
    flex:1;
    margin-left:.5em
}
.step-location-group .form-control-wrapper input.error{
    border:0.1em solid #ff0000;
    border-radius:3em
}
.step-location-group .form-control-wrapper .autocomplete{
    right:auto;
    position:absolute;
    z-index:1;
    overflow-y:auto;
    width:100%;
    max-width:100%;
    max-height:12em;
    border-radius:0.3em;
    background-color:#ffffff;
    color:#333333
}
.step-location-group .form-control-wrapper .autocomplete.autocomplete-loading li:before{
    content:"";
    display:block;
    margin:0 auto;
    border:0.2em solid #f3f3f3;
    border-top:0.2em solid rgb(255, 183, 3);
    border-radius:50%;
    width:1.5em;
    height:1.5em;
    animation:spin 2s linear infinite
}
.step-location-group .form-control-wrapper .autocomplete li{
    line-height:initial;
    padding:0.5em;
    width:100%;
    padding:0.3em;
    line-height:2em;
    text-align:left;
    white-space:nowrap;
    cursor:pointer
}
.step-birthday-group .form-control-wrapper{
    position:relative
}
.step-birthday-group .form-control-wrapper:nth-child(1){
    flex:3
}
.step-birthday-group .form-control-wrapper:nth-child(2){
    flex:7
}
.step-birthday-group .form-control-wrapper:nth-child(3){
    flex:4
}
.step-birthday-group .form-control-wrapper select{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    width:100%;
    color:#636363;
    padding:0 0.5em;
    border:none;
    background-color:transparent
}
.step-birthday-group .form-control-wrapper select::-ms-expand{
    display:none
}
.step-birthday-group .form-control-wrapper select.error{
    border:.07em solid #ff0000;
    border-radius:2em
}
.step-birthday-group .form-control-wrapper select option{
    color:#000
}
.text-field .form-group-inner{
    padding-left:1em;
    margin-bottom:1.7em
}
.shake{
    animation:shake 200ms linear;
    animation-iteration-count:infinite
}
@keyframes shake{
    0%{
        transform:rotate(0)
    }
    10%{
        transform:rotate(-1deg)
    }
    25%{
        transform:rotate(-2deg)
    }
    40%{
        transform:rotate(-1deg)
    }
    50%{
        transform:rotate(0)
    }
    60%{
        transform:rotate(1deg)
    }
    75%{
        transform:rotate(2deg)
    }
    90%{
        transform:rotate(1deg)
    }
    100%{
        transform:rotate(0)
    }
}
@media (min-width: 568px){
    .form-box .registration-form-builder{
        max-width:25em
    }
}
@media (min-width: 1880px) and (min-height: 885px){
    .form-box{
        padding:1em 1.5em
    }
}
.header{
    background-color:#FEF5F7;
    padding:1em;
    display:flex;
    justify-content:space-between;
    align-items:center
}
.header .logo img{
    height:3em;
    max-width:17em;
    object-fit:contain
}
.section-2{
    background:#fdedf1;
    background: linear-gradient(0deg, #f3f3f3 0%, white 100%);
    padding:3em 1em
}
.section-2 .area-img{
    position:relative
}
.section-2 .area-img .bg-box{
    border-radius:100% 50% 100% 100%
}
.section-2 .area-img .bg-box.bg-1{
    width:23em;
    height:23em;
    background-color:#FEF2F0
}
.section-2 .area-img .bg-box.bg-2,.section-2 .area-img .bg-box.bg-3,.section-2 .area-img .bg-box.bg-4{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%)
}
.section-2 .area-img .bg-box.bg-2{
    width:80%;
    height:80%;
    background-color:#F9CDD4
}
.section-2 .area-img .bg-box.bg-3{
    width:60%;
    height:60%;
    background-color:#F8B3B2
}
.section-2 .area-img .bg-box.bg-4{
    width:40%;
    height:40%;
    background-color:#F18394
}
.section-2 .area-img .area-avatar{
    position:absolute;
    width:5em;
    border-radius:100%;
    overflow:hidden;
    border:.15em solid #fff
}
.section-2 .area-img .area-avatar.man{
    top:50%;
    left:50%;
    transform:translate(-50%, -50%)
}
.section-2 .area-img .area-avatar.girl1{
    top:8%;
    right:15%
}
.section-2 .area-img .area-avatar.girl2{
    top:25%;
    left:8%
}
.section-2 .area-img .area-avatar.girl3{
    bottom:3%;
    right:7%
}
.section-2 .area-img .area-avatar img{
    width:100%
}
.section-2 .area-text{
    text-align:right;
    margin:1em 2em 0 0
}
@media (min-width: 568px){
    .section-2{
        padding:4em 1em
    }
    .section-2 .container{
        flex-direction:row-reverse
    }
    .section-2 .container>div{
        flex:1
    }
    .section-2 .area-img .bg-box.bg-1{
        width:100%;
        height:20.52em
    }
    .section-2 .area-img .area-avatar{
        width:4.5em
    }
    .section-2 .area-text{
        margin:0 1.5em 0 0
    }
}
@media (min-width: 768px){
    .header{
        padding:1em 2em
    }
    .section-2 .area-img .bg-box.bg-1{
        height:23.35em
    }
    .section-2 .area-img .area-avatar{
        width:5.3em
    }
    .section-2 .area-text{
        margin:0 2.5em 0 0
    }
}
@media (min-width: 1240px){
    .section-2{
        padding:4em 1em
    }
}
.login-form-holder{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:10;
    background-color:rgba(244,117,99,0.9);
    padding:1em
}
.login-form-holder .login-form-holder-inner{
    background-color:#fff;
    border-radius:1.5em .5em 1.5em 1.5em;
    padding:3em 2em 2em;
    position:relative
}
.login-form-holder .login-form-holder-inner .form-group{
    margin-bottom:1em
}
.login-form-holder .login-form-holder-inner .form-group ::-webkit-input-placeholder{
    color:rgb(255, 183, 3)
}
.login-form-holder .login-form-holder-inner .form-group :-ms-input-placeholder{
    color:rgb(255, 183, 3)
}
.login-form-holder .login-form-holder-inner .form-group ::placeholder{
    color:rgb(255, 183, 3)
}
.login-form-holder .login-form-holder-inner .form-group input{
    color:rgb(255, 183, 3);
    border:.1em solid rgb(255, 183, 3);
    border-radius:3em 1em 3em 3em;
    width:100%;
    height:2.5em;
    padding:0 1em;
    background-color:transparent
}
@media (min-width: 768px){
    .login-form-holder .login-form-holder-inner{
        max-width:25em;
        margin:3em auto 0
    }
}
.section-3{
    background:#fff;
    padding:3em 1em
}
.section-3 .match-img{
    padding:0 1em
}
.section-3 .match-img img{
    width:100%
}
.section-3 .match-text{
    text-align:right;
    margin:1em 2em 0 0
}

#zipresult li:hover {
	background-color: #dbdbd0;
}

@media (min-width: 568px){
    .section-3 .container{
        font-size:.85em
    }
    .section-3 .container>div{
        flex:1
    }
    .section-3 .match-img{
        padding:0
    }
    .section-3 .match-text{
        text-align:left;
        margin:0 0 0 1.5em
    }
}
@media (min-width: 768px){
    .section-3{
        padding:4em 1em
    }
    .section-3 .container{
        font-size:1em
    }
    .section-3 .match-text{
        margin:0 0 0 2.5em
    }
}
@media (min-width: 1240px){
    .section-3{
        padding:4em 1em
    }
}

.footer {
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    color: white;
}

.footer ul {
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    list-style: none;
}

.footer img {
	margin: 48px auto 32px;
    filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 0px 8px);
}

.footer li {
	padding: 0px 24px;
}

.footer li:not(:last-child) {
    border-right: 0.5px solid rgb(237, 185, 187);
}

.footer a {
	color: white;
	text-decoration: none;
}

.footer li a:hover {
	text-decoration: underline;
}

.footer small {
	display: block;
    max-width: 1200px;
    margin: 8px auto;
    padding: 0px 20px;
    color: rgb(237, 185, 187);
    font-size: 10px;
    font-weight: 400;
    text-align: center;
}

.footer p {
	margin: 16px auto;
    font-size: 12px;
    text-align: center;
    color: rgb(237, 185, 187);
}

#bgbox {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 0.67em;
}

@media (min-width: 1200px) {
	#bgbox {
		height: calc(100vh - 5em);
		background-position: 100% center;
	}
}

.modal {
	background-color: rgb(255 255 255 / 0.8);
}

@media (max-width: 768px) {
	
	.modal {
		position: absolute;
		top: 10px;
		margin: 10px;
		background-color: rgb(255 255 255 / 0.8);
	}
	
	#bgbox {
		position: relative;
		height: 38em;
		background-position: 20% 0;
	}
	
	.footer ul {
		flex-direction: column;
		-webkit-box-pack: center;
		justify-content: center;
		margin: 0px;
		padding: 0px;
	}
	
	.footer li {
		padding: 5px 0px;
		width: 100%;
		text-align: center;
		margin: 1px 0px;
		background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 30%, rgba(0,0,0,0.30) 50%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,0) 100%);
	}
	
	.footer li:not(:last-child) {
		border: none;
	}
	
	.footer small {
		margin: 30px 0px 10px 0px;
	}
}



.language-he .section-1 .modal,.language-he .login-form-holder .login-form-holder-inner .form-group input,.language-he .section-2,.language-he .section-3,.language-he .footer,.language-he .login-form-holder .required,.language-he .login-form-holder .unknown-error-msg{
    direction:rtl
}
.language-he .conversation-box li.has-avatar{
    margin-top:1em
}
.language-he .conversation-box li{
    margin:0 5em 1.5em 0
}
.language-he .conversation-box li .avatar{
    right:-5em;
    left:auto
}
.language-he .conversation-box li span{
    transform-origin:100% 0%
}
.language-he .text-field .step-inner input{
    border-radius:3em;
    padding:0 1em 0 3em
}
.language-he .btn-arrow{
    left:0;
    right:auto
}
.language-he .btn-arrow .fa-chevron-right:before{
    content:"\f053"
}
.language-he .step-birthday-group .step-inner{
    border-radius:3em;
    padding:0 .25em 0 2.75em
}
.language-he .step-birthday-group .btn-arrow{
    top:-.1em;
    left:-.1em;
    right:auto
}
.language-he .section-2 .area-text,.language-he .section-3 .match-text{
    margin:1em 0 0 2em;
    text-align:left
}
.language-he .section-2 .area-img{
    transform:rotateY(180deg)
}
.language-he .footer .legal__container>div:not(:last-child){
    border-left:.1em solid #ffd7d2;
    border-right:none
}
@media (min-width: 568px){
    .language-he .section-2 .area-text{
        margin:0 0 0 1.5em
    }
    .language-he .section-3 .match-text{
        text-align:right;
        margin:0 1.5em 0 0
    }
}
@media (min-width: 768px){
    .language-he .section-2 .area-text{
        margin:0 0 0 2.5em
    }
    .language-he .section-3 .match-text{
        margin:0 2.5em 0 0
    }
}