@font-face {
font-family: 'AwesomeSerifVAR';
src: url(//www.venamicasa.com/wp-content/themes/venamicasa/fonts/AwesomeSerifVAR-VF.ttf);
}
@font-face {
font-family: 'AwesomeSerifItalicVAR';
src: url(//www.venamicasa.com/wp-content/themes/venamicasa/fonts/AwesomeSerifItalicVAR-VF.ttf);
font-style: italic;
}
body {
overflow-x: hidden;
margin: 0;
padding: 0;
width: 100%;
}
.main-contact {
background-color: #C1DCEF;
overflow-x: hidden;
} .contact-cover {
position: relative;
padding-top: 66px;
background-color: #C1DCEF;
display: flex;
flex-direction: column;
align-items: center;
}
.contact-cover-form {
width: clamp(850px, 70vw, 1260px);
margin-top: 84px;
position: relative;
margin-bottom: 60px;
}
.contact-cover-form p, 
.date-content {
font-family: 'AwesomeSerifVAR';
font-variation-settings: 'wght' 525, 'hght' 1000;
font-weight: 400;
font-size: 70px;
line-height: 102%;
color: #20313B;
text-align: start;
margin: 0;
}
.part {
margin-bottom: 40px;
}
.contact-star-one .star,
.contact-star-two .star,
.contact-star-three .star {
transition: transform 0.3s ease-out;
will-change: transform;
width: 200px;
}
.contact-star-three .star {
width: 120px !important;
}
.contact-star-one,
.contact-star-two,
.contact-star-three {
position: absolute;
z-index: 1;
animation: spin-and-wiggle 12s infinite linear;
}
.contact-star-one {
left: -220px;
top: 5px;
}
.contact-star-two {
left: 1050px;
top: 235px;
}
.contact-star-three {
left: 1200px;
top: 870px;
}
@keyframes spin-and-wiggle {
0% {
transform: rotate(0deg) translate(0, 0);
}
25% {
transform: rotate(90deg) translate(-40px, -35px);
}
50% {
transform: rotate(180deg) translate(0, 20px);
}
75% {
transform: rotate(270deg) translate(25px, -33px);
}
100% {
transform: rotate(360deg) translate(0, 0);
}
}
.name-input, 
.age-input, 
.email-input,
.country-input,
.languages-input,
.date-input,
.message-input {
width: 350px;
height: 60px;
background-color: #C1DCEF;
border-radius: 300px;
border: 2px solid #20313B;
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 102%;
font-size: 24px;
color: #20313B;
padding-left: 25px;
padding-right: 25px;
caret-color: #20313B;
vertical-align: bottom;
align-items: center;
box-sizing: border-box;
}
.date-in,
.date-out {
color: transparent;
position: relative;
background-color: #C1DCEF;
}
.date-content {
display: flex;
flex-direction: column;
}
.date-range-container {
display: flex;
flex-direction: row;
}
.date-wrapper {
position: relative;
display: inline-block;
width: 350px;
vertical-align: bottom;
margin-left: 5px;
margin-right: 5px;
}
.date-wrapper input {
vertical-align: bottom;
}
.date-input-hidden {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.formatted-date {
position: absolute;
left: 25px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
z-index: 2;
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 24px;
color: #20313B;
background-color: transparent;
width: calc(100% - 50px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.name-input::placeholder, 
.age-input::placeholder, 
.email-input::placeholder,
.country-input::placeholder,
.languages-input::placeholder,
.date-input::placeholder,
.message-input::placeholder {
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 102%;
font-size: 24px;
color: #20313B;
display: flex;
justify-content: center;
}
.date-in::placeholder,
.date-out::placeholder {
opacity: 1 !important;
position: relative;
z-index: 3;
}
.name-input:focus::placeholder, 
.age-input:focus::placeholder, 
.email-input:focus::placeholder,
.country-input:focus::placeholder,
.languages-input:focus::placeholder,
.date-input:focus::placeholder,
.message-input:focus::placeholder {
opacity: 0;
}
.date-in:not(:focus):placeholder-shown ~ .formatted-date,
.date-out:not(:focus):placeholder-shown ~ .formatted-date {
display: none;
}
.date-in:focus ~ .formatted-date,
.date-out:focus ~ .formatted-date {
display: block;
}
.name-input:focus, 
.age-input:focus,
.email-input:focus,
.country-input:focus,
.languages-input:focus,
.date-input:focus,
.message-input:focus {
outline: none;
padding-left: 25px;
padding-right: 25px;
}
.first-line, .select-line, .city-line {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.custom-select {
position: relative;
width: 360px;
height: 71.41px;
font-family: "neue-haas-grotesk-display", sans-serif;
font-size: 24px;
color: #20313B;
user-select: none;
margin-left: 10px;
display: flex;
align-items: end;
}
.selected-option {
background-color: #C1DCEF;
border: 2px solid #20313B;
border-radius: 300px;
padding: 15px 25px;
cursor: pointer;
width: 360px;
height: 60px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: flex-start;
}
.custom-select .selected-option p {
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 102%;
font-size: 24px;
}
.select-options {
position: absolute;
top: 11.41px;
left: 0;
right: 0;
background-color: #C1DCEF;
border-top: none;
border-radius: 30px;
list-style: none;
padding: 0;
margin: 0;
max-height: 0;
overflow: hidden;
z-index: 1;
}
.custom-select.open .select-options {
max-height: 500px;
border: 2px solid #20313B;
}
.select-options li {
padding: 15px 25px;
cursor: pointer;
display: flex;
align-items: center;
height: 60px;
box-sizing: border-box;
}
.select-options li p {
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 102%;
font-size: 24px;
}
.select-options .border {
border-bottom: 2px solid #20313B;
}
.select-options li:hover,
.select-options li:hover p,
.select-options li.selected,
.select-options li.selected p {
background-color: #20313B;
color: #FFFFF8;
}
select,
::picker(select) {
appearance: base-select;
background-color: #c1dcef00;
}
.level-select,
.city-select {
width: 350px;
height: 60px;
background-color: #C1DCEF;
border-radius: 300px;
border: 2px solid #20313B;
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 102%;
font-size: 24px;
color: #20313B;
padding-left: 25px;
vertical-align: bottom;
align-items: center;
}
.level-select:focus,
.city-select:focus {
outline: none;
}
select::picker-icon {
display: none;
}
::picker(select) {
border: none;
top: -60px;
bottom: -60px;
}
option {
border: 2px solid #20313B;
border-bottom: none;
background-color: #C1DCEF;
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 102%;
font-size: 24px;
color: #20313B;
height: 60px;
width: 350px;
box-sizing: border-box;
}
option:hover, option:checked {
background-color: #20313B;
color: #FFFFF8;
}
option:first-of-type {
border-radius: 30px 30px 0 0;
}
option:last-of-type {
border-radius: 0 0 30px 30px;
border-bottom: 2px solid #20313B;
}
option::checkmark {
content: "";
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
-webkit-appearance: none; 
margin: 0; 
}
input[type=number] { -moz-appearance:textfield; }
.email-input {
width: 550px;
}
input[type="date"]::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;
}
input[type="date"] {
-moz-appearance: textfield;
}
.contact-cover-form .message {
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 102%;
font-size: 24px;
padding-left: 15px;
margin-bottom: 0;
margin-top: 75px;
}
.message-input {
width: clamp(850px, 70vw, 1260px);
margin-top: 5px;
}
.submit-btn {
position: absolute;
right: 0;
margin-top: 50px;
border: none;
background-color: #E45A2C;
color: #FFFFF8;
border-radius: 300px;
width: 250px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
font-family: 'AwesomeSerifVAR';
font-variation-settings: 'wght' 525, 'hght' 1000;
font-weight: 400;
font-size: 32px;
line-height: 102%;
}
.submit-btn:hover {
background-color: #F8C81B;
}
.checkbox-date {
display: flex;
align-items: center;
height: 60px;
margin-top: 10px;
}
.checkbox-date .first {
display: flex;
}
.checkbox-date .first input {
appearance: none;
background-color: #C1DCEF;
border: 2px solid #20313B;
width: 60px;
height: 60px;
border-radius: 30px;
margin-right: 15px;
cursor: pointer;
}
.checkbox-date .first input:checked {
background-color: #20313B;
}
.checkbox-date .wpcf7-list-item-label {
font-size: 24px;
display: flex;
align-items: center;
line-height: 1;
width: 128px;
font-style: italic;
font-family: "neue-haas-grotesk-display", sans-serif;
}  .down-contact-cover {
position: relative;
}
.contact-cover-down {
padding-top: 87px;
padding-left: 92px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.contact-cover-down-text {
margin-bottom: 100px;
}
.contact-cover-down-text p {
font-family: 'AwesomeSerifVAR';
font-variation-settings: 'wght' 525, 'hght' 1000;
font-weight: 400;
font-size: 60px;
line-height: 102%;
margin: 0;
margin-bottom: 35px;
color: #20313B;
}
.contact-cover-down-text .contact p, 
.contact-cover-down-text .info p {
font-family: 'AwesomeSerifVAR';
font-variation-settings: 'wght' 175, 'hght' 1000;
font-weight: 100;
text-align: center;
font-size: 32px;
line-height: 102%;
}
.contact-cover-down-text .contact-info {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 396px;
padding-left: 0;
margin-bottom: 50px;
}
.contact-cover-down-text .contact p, 
.contact-cover-down-text .info p {
margin-top: 0;
margin-bottom: 0;
}
.contact-cover-down-text .info {
display: flex;
align-items: flex-end;
}
.contact-cover-down-text .info p {
text-align: end;
}
.contact-cover-down-text .contact p {
text-align: start;
}
.contact-cover-down-text .contact-long-text p {
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 102%;
font-size: 24px;
width: 510px;
text-align: start;
}
.contact-cover-down-img {
width: 600px;
margin-right: 100px;
margin-top: 270px;
display: flex;
}
.contact-cover-down-img img {
width: 100%;
}
.send-raton {
position: absolute;
width: 80px;
right: 180px;
bottom: -100px;
animation: mouse 2s linear infinite;
}
@keyframes mouse {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(-15px, 15px);
}
100% {
transform: translate(0, 0);
}
}
.submit-btn:hover + .send-raton {
animation: mouse-far 2s infinite linear;
}
@keyframes mouse-far {
0% {
transform: translate(-15px, 15px);
}
50% {
transform: translate(-30px, 30px);
}
100% {
transform: translate(-15px, 15px);
}
}
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form .wpcf7-response-output {
border: none;
position: absolute;
margin-left: 100px;
right: 300px;
bottom: -50px;
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 102%;
font-size: 24px;
color: #20313B;
}
.wpcf7-not-valid-tip {
display: none;
}
.wpcf7-form-control.wpcf7-not-valid {
border-color: #E45A2C;
}  .pika-single {
background-color: #C1DCEF;
color: #20313B;
border-radius: 30px;
border: 2px solid #20313B;
width: 350px;
height: 300px;
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 102%;
font-size: 24px;
z-index: 1;
box-shadow: none;
}
.pika-single.is-bound {
box-shadow: none;
}
.pika-lendar {
float: center;
width: 350px;
margin: 0;
padding: 10px 0;
}
.pika-title {
background-color: #C1DCEF;
color: #20313B;
border-bottom: 2px solid #20313B;
width: 350px;
text-align: center;
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 102%;
font-size: 24px;
box-sizing: border-box;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
.pika-label {
z-index: 1;
overflow: hidden;
margin: 0;
padding: 5px 3px;
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 102%;
font-size: 24px;
background-color: #C1DCEF;
color: #20313B;
}
.pika-prev, .pika-next {
color: #20313B;
width: 50px;
text-indent: 50px;
}
.pika-table th {
color: #20313B;
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 102%;
font-size: 24px;
padding: 10px 5px;
text-decoration: none;
}
.pika-button {
color: #20313B;
background: none;
border-radius: 30px;
width: 36px;
height: 36px;
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 102%;
font-size: 24px;
margin: 0;
text-align: center;
}
.pika-button:hover {
background-color: #20313B;
color: #C1DCEF;
border-radius: 30px;
}
.is-selected .pika-button,
.has-event .pika-button {
color: #C1DCEF;
background: #20313B;
box-shadow: none;
border-radius: 30px;
font-weight: normal;
}
.is-today .pika-button {
color: #20313B;
font-weight: normal;
}
td.is-selected.is-today .pika-button {
color: #C1DCEF !important;
}
.is-today .pika-button:hover {
color: #C1DCEF;
}
.pika-button.is-outside-current-month {
color: #20313b80;
}
.is-disabled .pika-button,
.is-inrange .pika-button {
background: none;
}
.pika-button:hover {
cursor: pointer;
}
.pika-table abbr {
border-bottom: none;
cursor: default;
text-decoration: none;
}
.from-to-div {
display: flex;
} @media (max-width: 1000px) { .contact-cover {
padding-top: 0;
min-height: calc(100vh - 66px);
justify-content: center;
}
.contact-cover-form {
width: 341px;
margin-top: 25px;
margin-bottom: 50px;
z-index: 55;
}
.contact-cover-form p, 
.date-content {
font-size: 34px;
}
.part {
margin-bottom: 20px;
position: relative;
}
.contact-star-one .star,
.contact-star-two .star,
.contact-star-three .star {
width: 55px;
z-index: 0;
}
.contact-star-one {
left: 290px;
top: 5px;
}
.contact-star-two {
left: 0;
top: 235px;
}
.contact-star-three {
left: 270px;
top: 680px;
}
.contact-star-one,
.contact-star-two,
.contact-star-three {
z-index: 0;
}
.name-input, 
.age-input, 
.email-input,
.country-input,
.languages-input,
.date-input,
.message-input {
width: 170px;
height: 30px;
border-radius: 145px;
font-size: 12px;
padding-left: 15px;
padding-right: 15px;
}
.date-wrapper {
width: 170px;
}
.formatted-date {
left: 25px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
width: calc(100% - 50px);
}
.name-input::placeholder, 
.age-input::placeholder, 
.email-input::placeholder,
.country-input::placeholder,
.languages-input::placeholder,
.date-input::placeholder,
.message-input::placeholder {
font-size: 12px;
}
.name-input:focus, 
.age-input:focus,
.email-input:focus,
.country-input:focus,
.languages-input:focus,
.date-input:focus,
.message-input:focus {
padding-left: 15px;
padding-right: 15px;
}
.select-line .custom-select {
width: 140px;
}
.custom-select {
width: 170px;
height: 30px;
font-size: 12px;
}
.city-line .custom-select {
width: 330px;
margin: 0;
margin-top: 5px;
}
.city-line .custom-select .selected-option {
width: 330px;
}
.selected-option {
border-radius: 145px;
padding: 10px 15px;
width: 170px;
height: 30px;
}
.custom-select .selected-option p {
font-size: 12px;
}
.select-options {
top: 0;
border-radius: 15px;
}
.custom-select.open .select-options {
max-height: 300px;
}
.select-options li {
padding: 10px 15px;
height: 30px;
}
.select-options li p {
font-size: 12px;
}
.level-select,
.city-select {
width: 170px;
height: 30px;
border-radius: 145px;
font-size: 12px;
padding-left: 15px;
}
.first-line, .select-line, .city-line {
align-items: end;
}
::picker(select) {
border: none;
top: -30px;
bottom: -30px;
}
option {
font-size: 12px;
height: 30px;
width: 170px;
}
option:first-of-type {
border-radius: 15px 15px 0 0;
}
option:last-of-type {
border-radius: 0 0 15px 15px;
}
.email-input {
width: 170px;
}
.contact-cover-form .message {
font-size: 12px;
padding-left: 15px;
margin-bottom: 0;
margin-top: 20px;
}
.message-input {
width: 330px;
position: relative;
z-index: 23;
}
.submit-btn {
right: 11px;
margin-top: 25px;
border-radius: 145px;
width: 100px;
height: 30px;
font-size: 18px;
}
.date-range-container {
flex-wrap: wrap;
}
.from-to-div {
display: flex;
}  .contact-cover-down {
padding-top: 50px;
padding-left: unset;
flex-direction: column;
justify-content: unset;
align-items: center;
}
.contact-cover-down-text {
margin-bottom: 75px;
}
.contact-cover-down-text p {
font-size: 36px;
margin-bottom: 20px;
}
.contact-cover-down-text .contact p, 
.contact-cover-down-text .info p {
font-size: 20px;
}
.contact-cover-down-text .contact-info {
width: 256px;
margin-bottom: 40px;
}
.contact-cover-down-text .contact-long-text p {
font-size: 20px;
width: 330px;
}
.contact-cover-down-img {
width: 90vw;
margin-right: unset;
margin-top: unset;
margin-bottom: 45px;
}
.contact-cover-down-img img {
width: 100%;
}
.send-raton {
width: 40px;
right: 80px;
bottom: -45px;
}
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form .wpcf7-response-output {
font-size: 12px;
width: 200px;
bottom: -30px;
right: 120px;
}  .pika-single {
border-radius: 15px;
width: 250px;
height: 215px;
font-size: 16px;
z-index: 122;
}
.pika-lendar {
width: 250px;
}
.pika-title {
width: 250px;
font-size: 16px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.pika-label {
z-index: 122;
font-size: 16px;
}
.pika-prev, .pika-next {
width: 30px;
text-indent: 30px;
}
.pika-table th {
font-size: 16px;
}
.pika-button {
border-radius: 15px;
width: 26px;
height: 26px;
font-size: 16px;
}
.pika-button:hover {
border-radius: 15px;
}
.is-selected .pika-button,
.has-event .pika-button {
border-radius: 15px;
} .checkbox-date {
height: unset;
}
.checkbox-date .first input {
width: 20px;
height: 20px;
margin-right: 5px;
}
.checkbox-date .first {
margin-left: 25px;
margin-top: -3px;
}
.checkbox-date .wpcf7-list-item-label {
font-size: 11px;
width: 70px;
}
}