* {
margin: 0;
padding: 0;
box-sizing: border-box;
} :root {
--color-primary: #3e3c3b;
--color-primary-light: #6f6d6c;
--color-secondary: #aa9e8f;  --col1: #D5C9B6;
--col2: #3e3c3b;
--color-red: #3e3c3b;
--color-black: #151515;
}
.hide {
display: none !important;
}
.bg-primary {
background-color: var(--color-primary) !important;
color: var(--color-secondary) !important;
.top-title {
border: 1px solid var(--color-secondary);
color: var(--color-secondary);
}
h2 {
color: var(--color-secondary) !important;
span {
color: #f5f1ec;
}
}
}
.bg-secondary {
background-color: var(--color-secondary) !important;
color: #333 !important; font-family: "Roboto", sans-serif;
}    @keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.refresh {
position: absolute;
top: 20px;
right: 30px;
z-index: 1000;
z-index: 999999999;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease;
&.visible {
opacity: .5;
visibility: visible;
}
a {
display: block;
width: 100%;
height: 100%;
cursor: pointer;
i {
font-size: 2rem;
color: var(--color-secondary);
display: inline-block;
}
&:hover i {
animation: spin 2s linear infinite;
}
}
} #call-to-action {
position: fixed;
top: 50px;
right: 45px;
z-index: 999999999;
transform: rotate(-90deg);
transform-origin: top right;
transition: all 0.3s ease-in-out;
&:hover {
right: 50px;
}
}
#call-to-action span {
display: flex;
justify-content: center;
align-items: center;
font-family: "Roboto", sans-serif; text-transform: uppercase;
text-decoration: none;
color: var(--color-secondary);
background-color: var(--color-red);
border-radius: 10px 10px 0 0; a {
transition: all 0.3s ease-in-out;
height: 50px;
border:1px solid var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
color: var(--color-secondary);
text-decoration: none;
background-color: var(--color-red);
border-radius: 10px 10px 0 0;
}
&:hover { a {
background-color: var(--color-secondary);
color: var(--color-red);
}
}
} #video-completo {
position: fixed;
top: 190px; right: -100%;
z-index: 999999999;
transform: rotate(-90deg);
transform-origin: top right;
transition: all 0.5s ease-in-out;
}
#video-completo.visible {
right: 45px;
&:hover {
right: 50px;
}
}
#video-completo span {
display: flex;
justify-content: center;
align-items: center;
font-family: "Roboto", sans-serif; text-transform: uppercase;
text-decoration: none;
color: var(--color-secondary);
background-color: var(--color-black);
border-radius: 10px 10px 0 0; a {
transition: all 0.3s ease-in-out;
height: 50px;
border:1px solid var(--color-black);
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
color: var(--color-secondary);
text-decoration: none;
background-color: var(--color-black);
border-radius: 10px 10px 0 0;
}
&:hover { a {
background-color: var(--color-secondary);
color: var(--color-black);
}
}
} #myModal {
z-index:99999999;
}
.hystmodal__window {
width: 80% !important;
}
.hystmodal__window {
background-color: #000 !important;
}
.hystmodal__shadow--show {
opacity: .9 !important;
}
.hystmodal__window .vimeo-embed {
position: relative;
overflow: hidden;
background-color: #000;
}
.hystmodal__window .vimeo-embed video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
#loading {
position: absolute;
top: 20px;
right: 30px;
width: 40px;
height: 40px;
z-index: 999999999;
display: flex;
justify-content: center;
align-items: center;
.loading-circle {
transform: rotate(-90deg); .progress {
transition: stroke-dashoffset 0.1s linear;
}
}
}
body, html {
font-family: "Roboto", sans-serif;
font-size: 16px;
background-color: var(--color-primary); height: auto;   -ms-overflow-style: none; scrollbar-width: none; }
body.no-scroll {
overflow: hidden !important;
height: 100vh !important;
}
.quote {
font-family: "Nata Sans", sans-serif;
font-size: 3rem;
font-weight: 100;
}
.h100vh {
height: 100vh;
}
.h100vhpadd {
height: calc(100vh - 6rem);
}
.top-title {
display: inline-block;
font-family: "Nata Sans", sans-serif;
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
padding: 5px 10px;
border: 1px solid var(--color-primary);
color: var(--color-primary);
margin-bottom: 10px;
}
h2 { color: var(--color-primary-light);
font-size: 2.5rem;
font-weight: 300;  line-height: 1; span {
color: var(--color-primary);
}
}
.contenido { font-size: 1.1rem;
} #animation-spacer {
height: 500vh; width: 100%;
pointer-events: none;
} #main-content {
position: relative;
z-index: 50; background-color: var(--color-primary); 
width: 100%;
min-height: 100vh;
color: #ccc !important;
h2 {
color: var(--color-secondary) !important;
}
.info-contacto {
.subtitulo {
color: #ccc !important;
}
a {
color: var(--color-secondary) !important;
text-decoration: none;
}
}
label.form-check-label {
color: #ccc !important;
a {
color: var(--color-secondary) !important;
text-decoration: none;
transition: color 0.3s ease-in-out;
&:hover {
color: #fff;
text-decoration: underline;
}
}
}
}
.new-section { display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.site-footer {
padding: 3rem;
background-color: var(--color-primary);
color: var(--color-secondary);
text-align: center;
a {
color: var(--color-secondary);
text-decoration: none;
transition: color 0.3s ease-in-out;
&:hover {
text-decoration: underline;
}
}
}
footer {
height: 120px;
}
.container {
max-width: 1200px;
margin: 0 auto;
text-align: center;
} body::-webkit-scrollbar {
display: none;
}
h1 {
font-size: 2rem;
}
.logo-animation {
width: 100%;
height: 100vh;
pointer-events: none; z-index: 10;
} #logo_texto {
opacity: 1;
}
#logo_texto .st0.letter {
stroke: #DDD3C4;
stroke-width: 1px;
stroke-opacity: 1;
fill: #DDD3C4;
fill-opacity: 0;
transition: fill-opacity 1s ease-in-out, stroke-opacity 1s ease-in-out;
}
#logo_texto .st0 {
fill: #DDD3C4;
}
#logo_texto .st0.letter.filled {
fill-opacity: 1 !important;
stroke-opacity: 0 !important;
}
.logo-animation svg {
position: absolute;
bottom: 0;
left: 0; width: 90%;
height: auto; transform-origin: center center;
will-change: transform;
}
.logo-animation .home-cover {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 1;
}
.logo-animation .home-cover.visible {
opacity: 1;
}
#intro-exit-cursor {
position: fixed;
top: 0;
left: 0;
transform: translate3d(-9999px, -9999px, 0);
opacity: 0;
transition: opacity 0.2s ease-in-out;
z-index: 1000000;
pointer-events: none;
font-family: "Roboto", sans-serif;
font-size: 12px; text-transform: uppercase;
color: #fff;
background: rgba(0, 0, 0, 0.35);
padding: 6px 10px;
border-radius: 999px;
}
#intro-exit-cursor.visible {
opacity: 1;
}
.claim {
opacity: 1;
h2 {  font-weight: 400;  color: #ccc !important;
text-shadow: 0 0 5px #333;
}
}
.coming {
position: absolute; left: 50%;
transform: translateX(-50%);
opacity: 1;
h2 {
font-size: 1.5rem;
font-family: "Roboto", sans-serif;
font-weight: 300;
text-transform: uppercase;
color: white !important;
opacity: 0.8;
}
}
.claim.visible {
opacity: 1;
}
.coming.visible {
opacity: 1;
}
#video-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20%;
height: auto;
z-index: 20; opacity: 0; will-change: width, opacity;
} #vimeo-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5; opacity: 0;
pointer-events: none; transition: opacity 1s ease-in-out; }
#vimeo-wrapper.visible {
opacity: 1;
pointer-events: auto;
}
#video-container img, #video-container video {
width: 100%;
height: auto;
display: block;
}
.form-check-input {
border-radius: 0px !important;
}
.form-check {
a {
color: var(--color-primary);
transition: all 0.3s ease-in-out;
&:hover {
color: var(--color-primary);
text-decoration: none;
}
}
} #bg-video {
width: 100%;
height: auto;
border-radius: 20px;
box-shadow: 0 0 20px #333;
cursor: pointer;
transition: transform 0.3s ease;
img {
border-radius: 20px;
}
}
#bg-video:hover {
transform: scale(1.02);
}
#contenido_logo_texto {
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
z-index: 9;
opacity: 1;
transition: opacity 1s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#info_abajo {
opacity: 1;
}
#info_abajo.visible {
opacity: 1;
}
#btn-bottom {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
width: 25px;
height: 50px;
z-index: 999999;
opacity: 0;
transition: opacity 1s ease-in-out;
a {
display:block;
width: 100%;
height: 100%;
cursor: pointer;
}
}
#btn-bottom.visible {
opacity: 1;
} .line-container {
width: 1px;
height: 44px;
position: relative;
margin-bottom: 100px;  }
.line {
position: absolute;
width: 2px;
height: 0px;
background-color: rgb(255, 255, 255);
top: 0;
bottom: initial;
animation: line-animation 2.5s ease-in-out 0s infinite normal;
}
@keyframes line-animation {
0% {height: 0px; top: 0px;}
50% {height: 44px; top: 0px;}
100% {height: 0px; top: 44px;}
}  .scroll-down {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 34px;
height: 55px;
}
.mouse {
width: 3px;
padding: 8px 10px;
height: 25px;
border: 2px solid #fff;
border-radius: 25px;
opacity: 0.75;
box-sizing: content-box;
}
.scroller {
width: 3px;
height: 10px;
border-radius: 25%;
background-color: #fff;
animation-name: scroll;
animation-duration: 2.2s;
animation-timing-function: cubic-bezier(.15,.41,.69,.94);
animation-iteration-count: infinite;
}
@keyframes scroll {
0% { opacity: 0; }
10% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(15px); opacity: 0;}
}
#ubicacion { position: relative;
}
#mapa {
position: relative;
background-color: #D3C8B8;
padding: 25px 25px 0px 25px;
z-index: 9999;
}
#lifestyle {
padding-left: 10px;
padding-right: 10px;
margin-top: -7px;
position: sticky;
top: 0;
height: 110vh !important;
z-index: 9999;
}
#proyecto {
display: flex;
align-items: center;
justify-content: center;
background-color: white;
min-height: 100vh !important;
position: relative;
z-index: 9999;
}
#full-section { position: sticky;
top: 0;
z-index: 9999999;
height: 100vh !important;
}
.bg-gradient {
background-image: linear-gradient(0deg, #ffffff 0%, #D3C8B8 100%) !important;
}
.fancybox-container {
z-index: 9999999 !important;
} #contact-form-container {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%); opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s ease;
width: 90%;
max-width: 700px;
h2 {
font-size: 2rem;
}
}
.contenidor_form {
background-color: rgba(211, 200, 184, 0.9) !important;
}
input[type="email"] {
border:1px solid var(--color-primary) !important;
background-color: #f5f5f5 !important;
font-size: 1rem;
}
.form-check-input {
border-radius: 0px;
width: 20px;
height: 20px;
border:1px solid var(--color-primary) !important;
}
.form-check-label {
font-size: 0.9rem;
color: #333;
font-style: italic;
padding-left: 5px;
}
input[type="submit"] {
border:1px solid var(--color-primary) !important;
background-color: var(--color-secondary) !important;
color: var(--color-primary) !important;
font-size: 1.1rem;
text-transform: uppercase;
transition: all 0.6s ease;
&:hover {
border:1px solid var(--color-secondary) !important;
background-color: var(--color-primary) !important;
color: var(--color-secondary) !important;
}
}
.wpcf7-list-item-label {
padding-left: 10px;
a {
color: var(--color-secondary);
transition: all 0.6s ease;
&:hover {
color: white;
}
&:visited {
color: var(--color-secondary);
}
}
}
.wpcf7-form {
input[type="text"],
input[type="email"] {
text-indent: 10px;
}
input[type="submit"] {
min-height: 40px;
}
} #animation-menu {
position: sticky;
top: 0;
height: 100vh !important;
background-image: url(//heritage-condedeorgaz.com/wp-content/themes/heritage/assets/img/PORTADA_2.jpg);
color: var(--color-secondary);
background-size: cover;
background-position: center;
.menu {
display: flex;
justify-content: end;
.vertical-item {
width: 100px;
height: 100vh;
border-left: 1px solid var(--color-secondary);
position: relative;
transition: width 1s ease;
a {
text-decoration: none;
}
h3 {
transform: rotate(-90deg);
position: absolute;
bottom: 50%;
right: -50px;
left: auto;
width: 200px;
text-align: center;
font-size: 2rem;
opacity: 1;
transition: opacity 0.2s ease 0.8s; }
.info {
opacity: 0;
margin: 30px;
.thumbnail {
width: 100%;
height: 400px;
background-color: var(--color-secondary);
}
h2 { line-height: 1.1; color: var(--color-secondary);
font-size: 2.5rem;
margin-top: 30px;
opacity: 0;
height: 150px;
transition: opacity 0.2s ease;
}
.numero { font-size: 25rem; color: #999;
display:flex;
align-items: start;
opacity: 0;
transition: opacity 0.2s ease;
span {
line-height: .5;
}
}
h4 {
opacity: 0;
}
}
&:hover {
width: 30vw;
height: 100vh;
cursor: pointer;
background-color: rgba(77, 34, 39, 0.7);
backdrop-filter: blur(15px);
h3 {
opacity: 0;
transition: opacity 0.2s ease 0s; }
.info {
opacity: 1;
h2{
opacity: 1;
transition: opacity 0.5s ease .7s;
}
.numero {
opacity: 0.2;
transition: opacity 0.5s ease .6s;
}
h4 {
position: absolute;
border: 1px solid;
padding: 5px 15px;
bottom: 30px;
opacity: 0.5;
font-size: 1rem;
color: var(--color-secondary);
transition: opacity 0.5s ease .4s;
}
}
}
}
}
.quote-text {
position: absolute;
top: 0;
left: 100px;
width: auto;
height: 100vh;
text-align: center;
font-size: 2rem;
font-style: italic;
color: var(--color-secondary);
display: flex;
align-items: center;
justify-content: center;
}
}
#menu-visible {
position: fixed;
top: -100px;
right: 0;
min-width: 500px;
height: 40px; background-image: url(//heritage-condedeorgaz.com/wp-content/themes/heritage/assets/img/PORTADA_2.jpg);
background-size: cover;
background-position: center;
z-index: 99999999999999;
display: flex;
align-items: center;
justify-content: center;
transition: all 1s ease-in-out;
.item {
width: 100px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-left: 1px solid var(--color-secondary);
color: var(--color-secondary);
transition: all 0.5s ease;
text-align: center;
position: relative;
a {
color: var(--color-secondary);
text-decoration: none;
}
span.txt {
opacity: 0;
position: absolute;
bottom: -30px;
left: 0;
width: 100%;
height: 40px;
text-transform: uppercase;
transition: all 0.5s ease;
}
span.num {
text-align: center;
opacity: 1;
position: absolute;
top: 5px;
left: 0;
width: 100%;
height: 40px;
transition: all 0.5s ease;
}
&:hover {
width: 200px;
cursor: pointer;
span.num {
opacity: 0;
top: -30px;
}
span.txt {
opacity: 1;
bottom: -7px;
}
}
&.active {
width: 200px;
cursor: pointer;
span.num {
opacity: 0;
top: -30px;
}
span.txt {
opacity: 1;
bottom: -7px;
}
}
}
}
#amenities {
position: relative;
width: 100%;
min-height: 100vh;
z-index: 9999;
background-color: white; }
.video-popup {
position: fixed;
inset: 0;
z-index: 1000000000000000;
background-color: rgba(0, 0, 0, 0.88);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.9s cubic-bezier(0.16, 1, 0.3, 1);
&.visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
video {
width: 100vw;
height: 100vh;
display: block;
object-fit: cover;
object-position: center;
background-color: #000;
pointer-events: none;
opacity: 0;
transform: translateY(10px) scale(1.02);
transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
border-radius: 0;
box-shadow: none;
}
&.visible video {
opacity: 1;
transform: translateY(0) scale(1);
}
iframe {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100vw;
height: 56.25vw;
min-height: 100vh;
min-width: 177.7777778vh;
border: 0;
pointer-events: none;
opacity: 0;
transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
&.visible iframe {
opacity: 1;
}
}
.video-poster {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100vw;
height: 100vh;
object-fit: cover;
object-position: center;
border: 0;
pointer-events: none;
opacity: 1;
transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.video-poster.hide {
opacity: 0;
}
.video-popup-inner {
position: relative;
width: 100vw;
height: 100vh;
display: inline-flex;
align-items: center;
justify-content: center;
}
.video-popup-close {
position: absolute;
top: 18px;
right: 18px;
width: 44px;
height: 44px; border: 0px solid rgba(255, 255, 255, 0.35);
background: none !important;
color: rgba(255, 255, 255, 0.95);
font-size: 48px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(8px);
transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
z-index: 2;
} .intro-video-replay {
position: absolute;
left: 50%;
bottom: 26px;
transform: translateX(-50%) translateY(10px);
width: 66px;
height: 66px; border: 0px solid rgba(255, 255, 255, 0.4); background: none !important;
color: rgba(255, 255, 255, 0.95);
z-index: 100000000000000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
backdrop-filter: blur(8px);
transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.35s ease;
i {
font-size: 44px;
line-height: 1;
transform: translateX(1px);
}
&.visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
} header {
min-height: 100px;
background-color: var(--color-primary);
.row {
justify-content:space-between;
align-items: center;
.col-12 {
img {
height: 70px;
width: auto;
}
}
}
h4 {
color: white;
}
}
.btn-volver {
padding: 15px;
border-radius: 0px;
border:1px solid var(--color-secondary);
color: var(--color-secondary);
transition: all 0.3s ease-in-out;
&:visited {
color: var(--color-secondary);
}
&:hover {
border:1px solid white;
background-color: var(--color-primary);
color: white;
}
} .page-gracias {
h4 {
color: var(--color-secondary);   }
} input[type="email"],
input[type="text"] {
border:1px solid var(--color-primary) !important;
background-color: #f5f5f5 !important;
font-size: 0.9rem;
margin-top: 10px;
}
label.form-check-label {
font-size: 0.8rem;
}
.small-info {
font-size: 0.65rem;
text-align: justify;
color: #333;
a {
color:#4D2327;
transition: all 0.3s ease-in-out;
&:hover {
color: var(--color-primary);
text-decoration: none;
}
}
}
input[type="submit"] {
font-size: 0.9rem;
}
.capa-imagen {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
opacity: 1;
background-color: rgba(0, 0, 0, 0.35);
transition: opacity 0.6s ease-in-out;
z-index: 1;
pointer-events: none;
} #main-content {
h3 {
text-transform: uppercase;
color: var(--color-primary);
padding-bottom: 10px;
}
h2 {
color: #333;
font-size: 4rem;
line-height: 1.1;
font-weight: 800;
}
.info-contacto {
margin-top: 50px;
.subtitulo {
margin-bottom: 5px;
font-size: 1.2rem;
color: #000;
}
a {
display: block;
font-size: 1rem;
color: #555;
text-decoration: none;
transition: all 0.3s ease-in-out;
&:hover {
color: var(--color-primary);
}
}
}
}
.contenido-textual {
a {
color:rgb(77, 34, 39);
transition: all 0.3s ease-in-out;
&:hover {
color: var(--color-primary);
text-decoration: none;
}
}
}
#map {
height: 600px;
position: relative;
z-index: 9;
iframe {
height: 100%;
width: 100%;
position: relative;
z-index: 1;
}
}
.grecaptcha-badge {
z-index: 9999999;
}
.wpcf7-spinner {
position: absolute !important;
right: -15px;
bottom: 16px;
} body.page-template-page-micro-gracias {
#main-content {
background-image: url(//heritage-condedeorgaz.com/wp-content/themes/heritage/assets/img/cafe-svgrepo-com.svg);
background-size: contain;
background-position: right bottom;
background-repeat: no-repeat;
}
}
#main-content {
h3.respuesta {
color:#ccc !important; 
text-transform:none !important;
p {
color:#ccc !important; 
text-transform:none !important;
margin-bottom: 0px;
}
}
}