*/
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clear floats after the columns*/
.row:after {
content: "";
display: table;
clear: both;
}
/* Create three unequal columns that floats next to each other
*/
.column2 {
float: left;
padding: 1%;
}
.left {
width: 60%;
}
.right {
width: 34%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.transparente {
opacity: 0.3;
z-index: 1000;
}
/** IMPORTANTE!!! COMIENZAN MODIFICACIONES DEL 2024 */
.fondo-fijo {
height: 100vh;
background: url("../images/casas-1800 webp/cibolo-amenity.webp");
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-attachment: fixed;
background-position: center;
}
/* 3D Text */
.texto {
position: absolute;
/* centrado */
top: 50%;
right: 50%;
transform: translate(50%,-50%);
/* mayusculas*/
text-transform: uppercase;
/* Familia */
font-family: verdana;
/* Tamano de letra */
font-size: 2em;
font-weight: 500;
color: #f5f5f5;
text-shadow: 1px 1px 1px #919191,
1px 2px 1px #919191,
1px 3px 1px #919191,
1px 4px 1px #919191,
1px 5px 1px #919191,
1px 6px 1px #919191,
1px 7px 1px #919191,
1px 8px 1px #919191,
1px 9px 1px #919191,
1px 10px 1px #919191,
1px 18px 6px rgba(16,16,16,0.4),
1px 22px 10px rgba(16,16,16,0.2),
1px 25px 35px rgba(16,16,16,0.2),
1px 30px 60px rgba(16,16,16,0.4);
}
/* Top navigation menu */
.topnav {
color: white;
text-shadow: 1px 1px 2px black, 0 0 5px blue, 0 0 3px black;
}
/* Responsive text by device by Frank */
/* Desktop */
@media only screen and (min-width: 767px) and (max-width: 2000px){
.topnav a {
font-size: 2.5vw;;
}
}
/* Tablets */
@media only screen and (min-device-width: 481px) and (max-width: 1024px) {
.topnav a {
font-size: 3.5vw;;
}
}
/* smartphone*/
@media only screen and (min-width: 0px) and (max-width: 767px) {
.topnav a {
font-size: 4.5vw;;
}
}
/* Posicion del primer div topando inicio de pantalla */
.top-div {
top:80px;
}
/* Div centrado 12/29/2023*/
.centered {
position: fixed; /* or absolute */
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
/* Texto con sombra resaltado */
text-shadow: 1px 1px 2px black, 0 0 5px blue, 0 0 3px black;
}
/* Glass box */
.glass1 {
left:40px;
text-align: center;
position: absolute; /* or absolute */
background-color: rgba(255, 255, 255, 0.95);
border-radius: 15px;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
color: #333;
line-height: 1.5;
max-width: 50%;
padding: 20px 30px
}
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
.glass1 {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.5);
}
}
/* smartphone*/
@media only screen and (min-width: 0px) and (max-width: 767px) {
.glass1 {
font-size: 4vw;
max-width: 80%;
left:3%;
}
}
.glass2 {
position: relative; /* or absolute */
left: 40%;
background-color: rgba(255, 255, 255, 0.95);
border-radius: 15px;
top: 25%;
height: 400px;
color: #333;
line-height: 1.5;
max-width: 50%;
padding: 10px 0px
}
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
.glass2 {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.4);
}
}
/* smartphone*/
@media only screen and (min-width: 0px) and (max-width: 767px) {
.glass2 {
left: 15px;
top: 15px;
font-size: 4vw;
max-width: 80%;
height: 90%;
}
}
.glass3 {
left:40px;
right:40px;
text-align: center;
position: relative; /* or absolute */
background-color: rgba(255, 255, 255, 0.95);
border-radius: 15px;
top: 15%;
height: 60%;
color: #333;
line-height: 1.5;
max-width: 70%;
padding: 20px 30px
}
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
.glass3 {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.5);
}
}
/* smartphone*/
@media only screen and (min-width: 0px) and (max-width: 767px) {
.glass3 {
top: 15px;
font-size: 4vw;
max-width: 80%;
height: 90%;
}
}
/* end glass */
.photo1 {
border-radius: 10px;
transform: rotate(5deg); /* rotate the image in 5 degrees */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* Font size auto */
.head1 {
font-size: 5vw;
}
.head2 {
font-size: 3.5em;
}
.head3 {
font-size: 2.8em;
}
.head4 {
font-size: 2em;
}
.parr{
font-size:1.8em
}
@media only screen and (max-width: 768px) {
.head1 {
font-size: 5vw;
}
.head2 {
font-size: 3.5em;
}
.head3 {
font-size: 2em;
}
.head4 {
font-size: 1.8em;
}
.parr{
font-size:1.2em
}
}
.photo2-buttom {
position: relative;
bottom: 0;
right: 5px;
z-index: 1000
}
.buttons {
background-color: #04AA6D; /* Green */
border: 2px solid #08F7D6; /* Green diferente */
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 12px;
}
/* Flip cards */
.flip-card {
background-color: transparent;
width: 300px;
height: 250px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
color :blue;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}
/*Fonts header */
.font-header {
position: absolute;
text-align: center;
opacity: .4;
bottom: 40px;
}
@media only screen and (min-width: 0px) and (max-width: 780px) {
.font-header {
text-align: left;
opacity: 0.2;
top: 5px;
}
}
.text-center {
text-align: center;
}
/* Crea un efecto neon en texto con animacion de luz */
.brilla{
-webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate;
}
@-webkit-keyframes glow {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}
to {
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
}
}
.neon-azul{
-webkit-animation: blue-neon 1s ease-in-out infinite alternate;
-moz-animation: blue-neon 1s ease-in-out infinite alternate;
animation: blue-neon 1s ease-in-out infinite alternate;
}
@keyframes blue-neon {
from {
text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 5px #fff, 0 0 4px #228dff,
0 0 10px #228dff, 0 0 10px #228dff, 0 0 5px #228dff, 0 0 10px #228dff;
}
to {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 6px #228dff,
0 0 15px #228dff, 0 0 30px #228dff, 0 0 40px #228dff, 0 0 5px #228dff;
}
}
/* end brilla */
.photo-position {
position: absolute;
bottom: 5px;
right: 8%;
z-index: 1000
}
.photo2-position {
position: absolute;
bottom: 0px;
right: 5px;
z-index: 10000
}
.photo-position3 {
position: relative;
top: 36%;
right: 8%;
z-index: 1000
}
.text-relative {
position: absolute;
top: 7%;
right: 70%;
}
.text-frank {
position: absolute;
bottom: 12px;
right: 1%;
z-index: 1001
}
.text-broker {
position: absolute;
bottom: 0;
right: 2%;
z-index: 1001
}
/*div.relativo {
position: relative;
}
/* Background banner main page */
.back-ground {
height: 25vh;
background: url("../images/headers WEBP/dominion.webp");
background-repeat: no-repeat;
background-size: cover;
width: 100%;
background-color: #0C15F7;
}
.back-ground2 {
height: 25vh;
background: url("../images/headers WEBP/amanecer.webp");
background-repeat: no-repeat;
background-size: cover;
width: 100%;
background-color: #0C15F7;
}
.back-ground3 {
height: 25vh;
background: url("../images/headers WEBP/luxury homes.webp");
background-repeat: no-repeat;
background-size: cover;
width: 100%;
background-color: #0C15F7;
}
.back-ground4 {
height: 25vh;
background: url("../images/headers WEBP/casas.webp");
background-repeat: no-repeat;
background-size: cover;
width: 100%;
background-color: #0C15F7;
}
.back-ground5 {
height: 25vh;
background: url("../images/headers WEBP/luxury golf.webp");
background-repeat: no-repeat;
background-size: cover;
width: 100%;
background-color: #0C15F7;
}
.back-ground6 {
height: 25vh;
background: url("../images/headers WEBP/golf-homes.webp");
background-repeat: no-repeat;
background-size: cover;
width: 100%;
background-color: #0C15F7;
}
.first-div {
position: absolute;
top: 0%;
}
.clear-position {
top: 0%;
}
/* end*/
/* Cubierta de crystal encima de un fondo 01/2024 */
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
.glassy {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: rgba(5,10,91,0.38); /* Color de cubierta y transparencia */
}
}
/* Posicion de foto dentro del DIV usar "divisor" en DIV y photo-ubicacion en la foto 01/2024 */
.divisor{
position: relative;
}
.clear-divisor {
position: static;
}
.photo-ubicacion {
position: absolute;
bottom: 0px;
left: 20px;
}
@media only screen and (min-width: 0px) and (max-width: 1180px) {
.photo-ubicacion {
z-index: 0;
opacity: 0.2;
}
}
.photo-bottom {
position: absolute;
bottom: 0px;
left: 5px;
}
@media only screen and (min-width: 0px) and (max-width: 1180px) {
.photo-bottom {
z-index: 0;
opacity: 0.2;
}
}
/* fin de photo ubicacion */
.texto-resaltado {
color: white;
text-shadow: 1px 1px 2px black, 0 0 2px blue, 0 0 5px white;
}
.texto-resaltado-negro {
color: black;
text-shadow: 1px 1px 2px #cccccc, 0 0 2px gray, 0 0 5px #999999;
}
.div-margenes {
border: 1px solid white;
margin-top: 5%;
margin-bottom: 5%;
margin-right: 3%;
margin-left: 2%;
background-color: #023262;
box-shadow: 5px 5px 8px blue;
border-radius: 25px;
}
.div-margenes-white {
border: 2px solid #009966;
margin-top: 1%;
margin-bottom: 1%;
margin-right: 2%;
margin-left: 1%;
box-shadow: 5px 5px 8px #003300;
border-radius: 15px;
font-color: black;
}
.Text-3D {
color: #fff;
font-weight: bold;
font-family: Helvetica;
text-shadow:
0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
.Text-3D-grey {
color: #272121;
font-weight: bold;
font-family: Helvetica;
text-shadow:
0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 grey,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
.center-text {
position: absolute;
margin-left: auto;
z-index: 10;
width: 70%;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
.imagen-centrada {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity : .35;
}
.imagen-izquierda {
position: absolute;
top: 5px;
left: 5px;
opacity : .35;
}
.imagen-derecha {
position: absolute;
bottom: 10%;
right: 5px;
opacity : .35;
}
.no-bar {
overflow: hidden; /* Hide scrollbars */
min-height: 200vh;
}
.same-row {
display: flex;
flex-flow: row nowrap;
}
.indentado {
text-indent: 10px;
}
/* Pone espacio arriva y abajo */
.separador {
padding-top: 1%;
padding-bottom: 8%;
}
.div-padding {
position: relative;
margin-top: 20px;
border-top: 1px solid #FAF6F6;
border-right: 1px solid #FAF6F6;
border-left: 1px solid #FAF6F6;
border-top-right-radius: 65px;
border-top-left-radius: 65px;
}
.logo-fantasma {
position: absolute;
top: 5%;
right: 5%;
opacity : .70;
}
.image-bottom {
position: absolute;
bottom: 0;
right:5px;
}
*/
img {
float: right;
}
/* Mortagage Calculator
Boton color blanco*/
.ghost
{
/* position centered */
display:inline-block;
position: absolute ;
top: 80%;
left:50%;
border: ridge #fff;;
border-width: 5px;
border-radius: 2px;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
/* text styles */
font-family: Tahoma, Verdana, Segoe, sans-serif;
font-size: .8em;
letter-spacing: 0.1em;
color:#ffffff;
/* modify text */
text-decoration:none;
text-transform:uppercase;
text-rendering:optimizeLegibility;
/* add a border */
padding:0.4em 0.6em;
/* animate the change */
-webkit-transition: color 300ms, background 500ms, border-color 700ms;
transition: color 300ms, background 500ms, border-color 700ms;
}
.ghost:hover
{
background: black;
border-color:#91f21b;
color:#91f21b;
font-size: .9em;
}
/* Fija contenido en scroll */
.sticky .hmy-content {
position: -webkit-sticky;
position: sticky;
top: 80px;
}
/* crea texto a tres columnas */
.newspaper3 {
column-count: 3;
}
/* crea texto a dos columnas */
.newspaper2 {
column-count: 2;
}
/* Create two equal columns that floats next to each other