:root {
--color-primario: #5E3C32; --color-secundario: #e3dfd6;
--color-evidenciado: #d7c8b4; --color-hover: #b46a0a; }
body {
font-family: 'Rubik', sans-serif;
font-weight: 300;
strong {
font-weight: 500;
}
}
body.privacy-policy,
body.politica-de-las-cookies {
h1 {
color: var(--color-primario) !important;
}
h2 {
font-size: 2rem !important;
}
}  @font-face {
font-family: 'Fahkwang-Regular';
src: url(//magnum-boadilla.com/wp-content/themes/magnum-web/assets/fonts/Fahkwang-Regular.ttf) format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Fahkwang-Bold';
src: url(//magnum-boadilla.com/wp-content/themes/magnum-web/assets/fonts/Fahkwang-Bold.ttf) format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
.rubik-light {
font-family: "Rubik", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
}
.rubik-regular {
font-family: "Rubik", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
.rubik-medium {
font-family: "Rubik", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
}
.bg-fondo {
background-image: url(//magnum-boadilla.com/wp-content/themes/magnum-web/assets/img/logo-fondo.svg) !important;
background-size: contain;
background-position: right;
background-repeat: no-repeat;
}
.bg-fondo-cover {
background-image: url(//magnum-boadilla.com/wp-content/themes/magnum-web/assets/img/logo-fondo.svg) !important;
background-size: cover;
background-position: right;
background-repeat: no-repeat;
}
.full-image-parallax {
background-size: cover;
background-position: center bottom;
background-attachment: fixed;
width: 100%;
height: 100vh;
} @supports (-webkit-touch-callout: none) {
.full-image-parallax {
background-attachment: scroll;
background-position: center center;
height: 60svh;
min-height: 60vh;
padding-bottom: 0;
}
}
h1 {
font-size: 5.5rem !important;
margin-bottom: 0px !important;
font-weight: 100;
text-align: right;
line-height: 110% !important;
color: var(--color-secundario) !important; font-family: 'Fahkwang-Regular';
font-optical-sizing: auto;
strong {
font-family: 'Fahkwang-Bold';
}
}
h2 {
font-size: 3rem !important; font-family: 'Fahkwang-Regular';
font-optical-sizing: auto;
strong {
font-family: 'Fahkwang-Bold';
}
line-height: 100% !important;
}
h1.title  {
font-size: 3rem !important;
color: var(--color-primario) !important;
}
.bg-red {
background-color: red;
}
.bg-green {
background-color: green;
}
#main {
height: 100vh;
width: 100%;
position: relative;
z-index: 11;
}
body.home #main { background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2)), url(//magnum-boadilla.com/wp-content/themes/magnum-web/assets/img/magnum/ARCHIMIA_MAGNUM_IE03_JARDIN_FACHADA.jpg);
background-size: cover;
background-position: center;    
}
.columna {
border-right: 1px solid var(--color-evidenciado);
padding: 10px; display: flex;
flex-direction: column;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 9;
transition: all 0.6s ease-in-out;
&.open { background-color: rgba(227, 223, 214, 0.7);
}
}
.contenido {
padding: 0px;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: end;
.contenido_content {
padding: 50px;
}
.contenido_ul {
height: 100vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
list-style: none;
li {
height: 100vh;
width: 70px;
border-left: 1px solid #ccc;
transition: all 0.5s ease-in-out;
&:hover {
width: 100px;
}
}
}
}
.vertical-item {
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
&:hover {
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
}
.vertical-item > a {
position: absolute;
bottom: 30px;
left: 75%;
display: inline-block;
white-space: nowrap;
text-decoration: none;
color: #ccc;
font-size: 25px;   transform: rotate(-90deg) translateY(-50%);
transform-origin: left center; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.vertical-item > a::after {
content: attr(data-text);
position: absolute;
top: 120%; left: 0;
width: 100%; height: 100%; display: flex;
align-items: center; transition: all 0.5s ease-in-out;
font-size: 50px;
text-transform: uppercase;
opacity: 0;
} .vertical-item:hover > a { transform: rotate(-90deg) translateY(-150%);
color: var(--color-evidenciado);
left: 65%;
}
.vertical-item:hover > a span {
opacity: 0;
}
.vertical-item:hover > a::after {
opacity: 1;
} #menu {
width: 0px;
background-color: var(--color-secundario);
height: 100vh;
position: fixed;
top: 0;
left: 170px;
transition: all 0.5s ease-in-out;
overflow: hidden; display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 10px 0px 10px rgba(0,0,0,0.1);
ul {
padding:0px;
list-style: none;
text-align: center;
width: 100%;   li {
padding-bottom: 10px;
opacity: 0;  transform: translateX(-300px); 
transition: all 0.5s ease-in-out;
a {
color:var(--color-primario);
text-transform: uppercase;
text-decoration: none;
font-size: 30px;
padding: 2px 10px;
transition: color 0.3s ease-in-out;
display: inline-block;
position: relative;
z-index: 1;  .char {
display: inline-block;
opacity: 0;
transform: translateX(10px); transition: opacity calc(0.5s + (var(--char-fade-random) * 1.2s)) ease, transform 0.5s ease;
} &::after {
content: '';
position: absolute;
top: 0;
right: 0; width: 0; height: 100%;
background-color: var(--color-primario);
transition: width 0.4s ease-in-out;
z-index: -1;
} &:hover {
color: var(--color-secundario);
} &:hover::after {
width: 100%; left: 0; right: auto; }
}
&.active {
a {
background-color: var(--color-primario);
color: var(--color-secundario);
}
}
}
}
&.open { ul {  li {
opacity: 1;
transform: translateX(0);
} li:nth-child(1) { transition-delay: 0.1s; --li-delay: 0.1s; }
li:nth-child(2) { transition-delay: 0.2s; --li-delay: 0.2s; }
li:nth-child(3) { transition-delay: 0.3s; --li-delay: 0.3s; }
li:nth-child(4) { transition-delay: 0.4s; --li-delay: 0.4s; }
li:nth-child(5) { transition-delay: 0.5s; --li-delay: 0.5s; }
li:nth-child(6) { transition-delay: 0.6s; --li-delay: 0.6s; }
li:nth-child(7) { transition-delay: 0.7s; --li-delay: 0.7s; } li a .char {
opacity: 1;
transform: translateX(0); transition-delay: calc(var(--li-delay) + (var(--char-random) * 1.0s));
}
}
.social ul {
opacity: 1;
}
}
.social {
position: absolute;
bottom: 50px;
left: 50%;
transform: translate(-50%, -50%);
ul {
padding:0px;
list-style: none;
text-align: center;
opacity: 0;
display: flex;
transition: all 0.7s ease-in-out;
li {
padding-bottom: 10px;
a {
color:var(--color-primario);
text-transform: uppercase;
text-decoration: none;
font-size: 20px;
padding: 10px;
transition: all 0.5s ease-in-out;
&:hover {
background-color: var(--color-primario);
color: #fff;
}
}
}
}
}
} .ham {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 400ms;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.hamRotate.active {
transform: rotate(45deg);
}
.hamRotate180.active {
transform: rotate(180deg);
}
.line {
fill:none;
transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, stroke 400ms;
stroke:var(--color-secundario);
stroke-width:5.5;
stroke-linecap:round;
} .menu-hamburger.color-oscuro .line {
stroke: var(--color-primario); }
.ham1 .top {
stroke-dasharray: 40 139;
}
.ham1 .bottom {
stroke-dasharray: 40 180;
}
.ham1.active .top {
stroke-dashoffset: -98px;
}
.ham1.active .bottom {
stroke-dashoffset: -138px;
} .btn-detalle {
padding: 10px 40px;
display: inline-block;
border:1px solid var(--color-primario) !important;
color: var(--color-primario) !important;
text-decoration: none;
transition: all 0.5s ease-in-out;
border-radius: 30px;
text-transform: uppercase;
}
.btn-detalle:hover {
background-color: var(--color-primario);
color: #fff !important;
}
.btn-info {
padding: 10px 40px;
display: inline-block;
border:1px solid var(--color-primario) !important;
color: white !important;
text-decoration: none;
transition: all 0.5s ease-in-out;
border-radius: 30px;
text-transform: uppercase;
background-color: var(--color-primario);
}
.btn-info:hover {
background-color: var(--color-secundario);
color: var(--color-primario) !important;
} .bg-oscuro {
background-color: var(--color-primario);
color: #fff;
&.full100 {
height: 100vh;
}
.top-title {
display: inline-block;
font-family: 'Fahkwang-Regular';
font-size: 18px;
font-weight: light;
margin-bottom: 20px;
padding: 10px 10px;
border-radius: 5px;
border-bottom:2px solid #fff;
border-top:2px solid #fff;
}
}
.bg-claro {
background-color: #fff;
color: var(--color-primario);
&.full100 {
height: 100vh;
}
.top-title {
display: inline-block;
font-family: 'Fahkwang-Regular';
font-size: 18px;
font-weight: light;
margin-bottom: 20px;
padding: 10px 10px;
border-radius: 5px;
border-bottom:2px solid var(--color-primario);
border-top:2px solid var(--color-primario);
}
}
.bg-gris {
background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
} .citacion {
height: 100vh;
width: 100%; color: #151515;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;  background-color: #FDFCFC !important; }
.cta-leads {
padding: 80px 0;
}
.cta-leads p {
margin-top: 20px;
margin-bottom: 0;
}
.cta-leads .cta-form .form-control {
border-radius: 0;
border-color: var(--color-primario);
}
.cta-form {
.btn-submit {
display: inline-block;
position: relative;
.wpcf7-spinner {
position: absolute;
top: 11px;
right: -55px;
z-index: 999;
}
}
}
.cta-leads .info .brochure-link {
display: inline-flex;
align-items: stretch;
margin-top: 12px;
background-color: #825b50;
color: #fff;
text-decoration: none;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
.cta-leads .info .brochure-link span {
display: flex;
align-items: center;
padding: 18px 36px;
font-size: 1.1rem;
font-weight: 500;
line-height: 1;
}
.cta-leads .info .brochure-link .brochure-link__icon {
display: flex;
align-items: center;
justify-content: center;
min-width: 78px;
padding: 0 18px;
position: relative;
background-color: #704f45;
border-left: 1px solid rgba(255, 255, 255, 0.15);
}
.cta-leads .info .brochure-link .brochure-link__icon i {
font-size: 1.9rem;
line-height: 1;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.cta-leads .info .brochure-link .icon-default {
opacity: 1;
}
.cta-leads .info .brochure-link .icon-hover {
position: absolute;
opacity: 0;
transform: translateY(4px);
}
.cta-leads .info .brochure-link:hover {
color: #fff;
text-decoration: none;
transform: translateY(-1px);
}
.cta-leads .info .brochure-link:hover span {
background-color: #704f45;
}
.cta-leads .info .brochure-link:hover .brochure-link__icon {
background-color: #825b50;
}
.cta-leads .info .brochure-link:hover .icon-default {
opacity: 0;
transform: translateY(-4px);
}
.cta-leads .info .brochure-link:hover .icon-hover {
opacity: 1;
transform: translateY(0);
} .horizontal-scroll-wrapper {
height: 300vh; position: relative;
z-index: 10; }
.horizontal-sticky {
position: sticky;
top: 0;
height: 100vh;
width: 100%;
overflow: hidden;
z-index: 10;
background-color: var(--color-secundario); }
.horizontal-track {
display: flex;
height: 100%;
width: 300%; will-change: transform;
}
.horizontal-item {
width: 100vw; height: 100vh;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
border-right: 5px solid var(--color-primario);
border-left: 5px solid var(--color-primario);
}
.horizontal-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel-progress-bar {
position: absolute;
bottom: 0;
left: 0;
height: 10px;
background-color: #dfc283; width: 0%;
z-index: 10; } .featured {
color: var(--color-primario);
text-transform: uppercase;
text-decoration: none;
font-size: 18px;
padding: 2px 10px;
transition: color 0.3s ease-in-out;
display: inline-block;
position: relative;
z-index: 1;  &::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: var(--color-primario);
transition: width 0.4s ease-in-out;
z-index: -1;
}
&:hover {
color: #fff;
}
&:hover::after {
width: 100%;
}
}
.bg-oscuro,
.bg-claro {
.featured {
color: var(--color-evidenciado);
text-transform: uppercase;
text-decoration: none;
font-size: 18px;
padding: 10px 30px;
border-radius: 30px;
border:1px solid;
transition: color 0.3s ease-in-out;
display: inline-block;
position: relative;
overflow: hidden;
z-index: 1;  &::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
border-radius: 30px;
background-color: var(--color-evidenciado);
transition: width 0.4s ease-in-out;
z-index: -1;
}
&:hover {
color: var(--color-primario);
border:1px solid var(--color-evidenciado);
}
&:hover::after {
width: 100%;
}
}   
h3 {
color: var(--color-evidenciado);
}
}
.bg-claro {
.featured {
color: var(--color-primario);
&::after {
background-color: var(--color-primario);
}
&:hover {
color: var(--color-evidenciado) !important;
border:1px solid var(--color-primario);
}
}
h3 {
color: var(--color-primario);
}
}
.bg-white {
background-color: #fff;
}
.block-sticky {
position: sticky;
top: 0;
z-index: 1;
}
footer {
background-color: #efefef;
color: #333;
h3, p {
padding: 0px 5px;
}
ul {
li {
margin-bottom: 5px;
}
}
a {
color: var(--color-primario);
text-decoration: none;
transition: color 0.3s ease-in-out;
display: inline-block;
position: relative;
padding: 0px 5px;
z-index: 1; &:visible {
color: var(--color-primario);
} &::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: var(--color-primario);
transition: width 0.4s ease-in-out;
z-index: -1;
}
&:hover {
color: #fff;
}
&:hover::after {
width: 100%;
}
}
.bottom-footer {
background-color: var(--color-secundario);
padding: 20px 0px;
}
}
.social {
li {
display: inline-block;
margin-right: 5px;
a {
&:hover {
color: #fff;
}
}
}
}
#seccion_pictos {
small {
color: #cccccc;
}
} .random-fade-char {
display: inline-block;
opacity: 0;
will-change: transform, opacity;
transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1s ease-out;
}
.random-fade-char.visible {
opacity: 1;
transform: translate(0, 0) rotate(0deg) !important;
}
.colomnas-img {
width: 20%;
}
body.scroll-img-lock { overflow: hidden; }
form {
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
background-color: var(--color-primario) !important;
color: var(--color-secundario) !important;
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 0 !important;
border-bottom: 2px solid var(--color-secundario) !important;
border-color: var(--color-secundario) !important;
border-radius: 5px;
box-sizing: border-box; outline: none; &:focus {
border-color: var(--color-evidenciado) !important;
background-color: var(--color-primario) !important;
color: var(--color-secundario) !important;
box-shadow: none !important;
} &::placeholder {
color: var(--color-secundario) !important;
font-style: italic;
opacity: 0.6;
} &:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus {
background-color: var(--color-primario) !important;
-webkit-box-shadow: 0 0 0 1000px var(--color-primario) inset !important;
box-shadow: 0 0 0 1000px var(--color-primario) inset !important;
-webkit-text-fill-color: var(--color-secundario) !important;
}
}
a {
color: var(--color-evidenciado) !important;
}
input[type="submit"],
button {
color: var(--color-primario) !important;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
}
ul.info {
li {
margin-bottom: 5px;
a {
color: var(--color-secundario) !important;
text-decoration: none;
transition: color 0.3s ease-in-out;
&:hover {
color: var(--color-evidenciado) !important;
}
}
}
} #info_pagina {
transition: opacity 0.5s ease-in-out;
opacity: 1; }
.v-none {
opacity: 0 !important;
pointer-events: none; }
.mapa { height: auto;
width: 100%;
background-color: var(--color-secundario);
h2.small {
font-size: 2rem !important;
line-height: 120% !important;
}
} .parallax-wrapper {
overflow: hidden;
position: relative;
height: 100%;
width: 100%;
}
.img-parallax {
will-change: transform; transform: scale(1.2);
transform-origin: center center; }
.accordion-item {
margin-bottom: 3px;
.accordion-button {
padding: 5px 10px;
box-shadow: none !important;
}
}
#btn_salud {
.accordion-button {
border-left: 10px solid #B0CECE;
background-color: #B0CECE !important;
&.collapsed {
background-color: transparent !important;
color: var(--color-primario) !important;
}
}
}
#btn_educacion {
.accordion-button {
border-left: 10px solid #273B40;
background-color: #273B40 !important;
color: var(--color-secundario) !important;
&.collapsed {
background-color: transparent !important;
color: var(--color-primario) !important;
}
}
}
#btn_parques {
.accordion-button {
border-left: 10px solid #81CDE1;
background-color: #81CDE1 !important;
&.collapsed {
background-color: transparent !important;
color: var(--color-primario) !important;
}
}
}
#btn_deportes {
.accordion-button {
border-left: 10px solid #B3DEEA;
background-color: #B3DEEA !important;
&.collapsed {
background-color: transparent !important;
color: var(--color-primario) !important;
}
}
}
#btn_comercio {
.accordion-button {
border-left: 10px solid #3F6068;
background-color: #3F6068 !important;
color: var(--color-secundario) !important;
&.collapsed {
background-color: transparent !important;
color: var(--color-primario) !important;
}
}
}
#btn_cultural {
.accordion-button {
border-left: 10px solid #3B8EA0;
background-color: #3B8EA0 !important;
color: var(--color-secundario) !important;
&.collapsed {
background-color: transparent !important;
color: var(--color-primario) !important;
}
}
}
.puntos {
transition: all 0.5s ease-in-out;
&.hide {
opacity: 0 !important;
}
}
#list-contact {
li {
a {
font-size: 1.2rem;
color: var(--color-primario) !important;
text-decoration: none;
transition: color 0.3s ease-in-out;
&:hover {
color: var(--color-secundario) !important;
}
}
}
}
body.ubicacion {
footer {
margin-top: -7px;
}
} #info_viviendas {
position: fixed;
top: 0;
right: -100%; height: 100vh;
background-color: rgba(94, 60, 50, 0.8);
color: var(--color-secundario);
padding: 20px;
box-sizing: border-box;
transition: right .7s ease-in-out;
z-index: 13;
&.open {
right: 0;
}
table tr th,
table tr td {
background-color: transparent;
border-bottom: 1px solid var(--color-primario);
color: var(--color-secundario);
}
} #table_viviendas {
table tr th,
table tr td {
font-size: 0.8rem;
background-color: transparent;
border-bottom: 1px solid var(--color-primario);
color: var(--color-primario);
}
thead {
tr td,
tr th {
font-weight: bold;
}
}
tbody {
tr td,
tr th {
a {
color: var(--color-primario);
&:visited {
color: var(--color-primario);
}
&:hover {
color: var(--color-hover);
}
}
}
}
table tbody tr.res td {
color: rgb(189, 73, 73) !important;
font-style: italic;
}
}
.info_girar {
border: 1px solid var(--color-primario);
color: var(--color-primario);
padding: 5px 10px;
border-radius: 5px;
i {
font-weight: bold;
}
span {
font-size: 0.9rem;
}
}
.close-btn {
position: absolute;
right: 20px;
top: 20px;
z-index: 999999;
width: 30px;
height: 30px;
transition: all 0.5s ease-in-out;
i {
font-size: 1.6rem;
color: var(--color-secundario);
}
&:hover {
cursor: pointer;
i {
color: var(--color-evidenciado);
}
}
}
#plano_viviendas .viv {
fill:#EEEBEA;
stroke:#553730;
stroke-width:0.3;
stroke-miterlimit:10; 
transition: all 0.5s ease;
transform-box: fill-box;
transform-origin: center center;
}
#plano_viviendas .viv:hover {
fill:#553730;
cursor: pointer;
}
#plano_viviendas .no_disponible {
fill: #dc4646ff;
opacity: 0.5;
}
#plano_viviendas .no_disponible:hover {
fill: #dc4646ff;
opacity: 0.5;
}
#plano_viviendas .viv.active {
fill: #553730; transform: translate(var(--move-x, 0px), var(--move-y, 0px)) scale(2.5);
z-index: 999999; }
#plano_viviendas:has(.viv.active) .viv:not(.active) { opacity: 0;
pointer-events: none; }
#plano_viviendas.has-active .viv:not(.active) {
opacity: 0;
pointer-events: none;
}
#plano_viviendas:has(.viv.active) .viv:not(.active) *,
#plano_viviendas.has-active .viv:not(.active) * {
pointer-events: none !important;
}
#plano_viviendas #varios.hide { opacity: 0.1;
}
#main.politica-de-privacidad,
#main.politica-de-cookies {
height: auto !important;
min-height: 100vh;
}
footer {
ul {
li {
&.active {
a {
background-color: var(--color-primario);
color: white;
}
}
}
}
} .accordion-button:not(.collapsed) {
background-color: var(--color-secundario);
}
#accordionFlushVivMobile .accordion-item {
border-bottom: 1px solid var(--color-primario);
}
#accordionFlushVivMobile .accordion-item,
#accordionFlushVivMobile .accordion-button {
background-color: transparent !important;
font-size: 12px;
}
#accordionFlushVivMobile .accordion-button:not(.collapsed) {
color: var(--color-primario);
}
#accordionFlushVivMobile .accordion-body {
position: relative;
.btn-descargar {
position: absolute;
bottom: 20px;
right: 50%;
transform: translateX(50%);
border: 1px solid var(--color-primario);
color: var(--color-primario);
border-radius: 0px;
padding: 5px 10px;
transition: all 0.5s ease-in-out;
&:hover {
background-color: var(--color-primario);
color: white;
}
}
}
#accordionFlushVivMobile .accordion-item.res {
ul li {
color: #af4b4b !important;
font-style: italic;
}
.btn-descargar {
display: none !important;
}
}