@import url('https://fonts.googleapis.com/css2?family=Playball&display=swap');
:root
{
    --medidas-burbuja-imagenes: 100px;
    --medida-circlo-contenedor: 500px;
    --medidas-presentacion: 180px;
}
header
{
    width:100%;
    background:rgb(0, 0, 0);
}
header.tema_claro
{
    background:white;
}
header .contenedor
{
    width:80%;
    margin:0 auto;
    justify-content: center;
}
header .contenedor .left
{
    text-align:center;
    margin:0 auto;
    width:543.5px;
}
header .contenedor .left div
{
    padding:40px 10px;
    position:relative;
    z-index:3;
}
header .contenedor .left div p
{
    font-size:1.2rem;
    font-weight: 600;
}
header.tema_claro .contenedor .left h3
{
    color:rgb(34, 34, 34);
}
header .contenedor .left h3
{
    color:#fff;
    font-size:1.7rem;
}
header.tema_claro .contenedor .left h1
{
    color:rgb(4, 4, 37);
}
header .contenedor .left h1
{
    font-weight: bold !important;
    color:white;
    font-size:1.8rem;
}
header .contenedor .left a
{
    display:table;
    margin:0px auto;
    margin-top:40px;    
    cursor:pointer;
    border-radius:100px;
    text-decoration:none;
    background:rgb(18, 23, 63);
    color:white;
    padding:15px 25px;
    transition: background, 0.5s;

}
header .contenedor .left a:hover
{
    background:rgb(177, 17, 17);
    transition: background, 0.5s;
    color:white;
}

header .contenedor .right
{
    overflow: hidden;
    padding:80px 0;
    position:relative;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}

header .contenedor .right .circulo
{
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transition: transform, 2s;
    position:relative;
    margin:0 auto;
    width: var(--medida-circlo-contenedor);
    height: var(--medida-circlo-contenedor);
    border-width:0;
    border-radius:100%;
}
header.tema_claro .contenedor .right .presentacion
{
    background:rgb(196, 173, 173);
    color: black;
}
header .contenedor .right .presentacion
{
    position:absolute;
    top:calc(50% - (var(--medidas-presentacion)/2));
    left: calc(50% - (var(--medidas-presentacion)/2));
    width: var(--medidas-presentacion);
    height: var(--medidas-presentacion);
    border-radius:100%;
    background: white;
    z-index:20 !important;
    padding:3px;
    cursor:pointer;
}
header .contenedor .right .presentacion img
{
    width:100%;
    height:100%;
    border-radius:100%;
}
header .contenedor .right .circulo .min-circulo
{
    cursor:pointer;
    position:absolute;
    top: calc(50% - (var(--medidas-burbuja-imagenes)/2));
    left: calc(50% - (var(--medidas-burbuja-imagenes)/2));
    width: var(--medidas-burbuja-imagenes);
    height: var(--medidas-burbuja-imagenes);
    border-radius:100%;
    -o-border-radius:100%;
    -moz-border-radius:100%;
    -webkit-border-radius:100%;
    background: white;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transition: transform, 2s;
}
header.tema_claro .contenedor .right .circulo .min-circulo span
{
    color:rgb(24, 24, 24);
}
header .contenedor .right .circulo .min-circulo span
{
    position:absolute;
    display: block;
    width:100%;
    color: rgb(194, 194, 194);
    text-align: center;
    padding:5px 0;
    font-weight: bold;
}
header .contenedor .right .circulo .min-circulo img
{
    width:100%;
    border-radius:100%;
    height:100%
}
header .contenedor .right .circulo .casas
{
    top: calc(5%);
    left:calc(0% - -20px);
}
header .contenedor .right .circulo .apartamentos
{
    left:calc(100% - (var(--medidas-burbuja-imagenes)/2));
}
header .contenedor .right .circulo .solares
{
    left:calc(0% - (var(--medidas-burbuja-imagenes)/2));
}
header .contenedor .right .circulo .penthouse
{
    top: calc(0% - (var(--medidas-burbuja-imagenes)/2));
}
header .contenedor .right .circulo .torres
{
    top: calc(100% - ( (var(--medidas-burbuja-imagenes)/2) ));
    left: calc(50% - ( ( var(--medidas-burbuja-imagenes)/2) ));
}
header .contenedor .right .circulo .villas
{
    top: calc(5%);
    left:calc(75% - 0px);
}
header .contenedor .right .circulo .mansiones
{
    top: calc(75%);
    left:20px;
}
header .contenedor .right .circulo .locales
{  
    top: calc(75%);
    left:calc(100% - 125px);
} 
header.tema_claro .contenedor .right .tapa
{
    background:#fff;
}
header .contenedor .right .tapa
{
    content: '';
    position:absolute;
    width:100%;
    height:50%;
    border-radius:0 !important;
    background:rgb(0, 0, 0);
    bottom:0;
    z-index:2;
    text-align:center;
}
header.tema_claro .contenedor .right .tapa h3
{
    color:rgb(34, 34, 34);
}
header .contenedor .right .tapa h3
{
    color: white;
    font-size: 2rem;
    font-weight: bold;
    padding-top:70px;
}
header.tema_claro .contenedor .right .tapa button
{
    background:rgb(22, 23, 65);
    color:white;

}
header .contenedor .right .tapa button
{
    width:50px;
    height:50px;
    position:relative;
    top:100px;
    margin:0 auto;
    border-radius:100%;
    -moz-border-radius:100%;
    -webkit-border-radius:100%;
    -o-border-radius:100%;
    background:rgb(228, 228, 228);
    color:rgb(0, 0, 0);
    border:1px solid transparent;
    cursor:pointer;
}
header .contenedor .right .tapa button.down-left
{
    left:-200px;
}
header .contenedor .right .tapa button.down-right
{
    left:200px;
}
header a
{
    text-decoration: none !important;
}
@media(max-width: 330px)
{
    header
    {
        background:rgb(224, 224, 224);
    }
    header .contenedor
    {
        width:100%;
        margin:20px auto;
        display: block;
    }
    header .contenedor .left
    {
        margin:0 0;
        width:100%;
    }
    header .contenedor .left div a
    {
        margin:10px auto;
    }
    header .contenedor .left div
    {
        padding:0 20px;
        padding-top: 0;
        text-align: center;
        /* z-index:3; */
    }
    header .contenedor .left hr
    {
        width:100px;
        margin:5px auto;
    }
    header .contenedor .left h3
    {
        color:rgb(31, 30, 30);
        font-size:1.4rem;
    }
    header .contenedor .left h1
    {
        color:rgb(20, 20, 20);
        font-size:1.2rem;
    }
    header .contenedor .right
    {
        background:rgb(255, 255, 255);
        margin-top:40px;
        overflow: hidden;
        border-top-right-radius: 50px;
        border-top-left-radius: 50px;
        height:100%;
        padding:60px 0;
        width: 100%;
    }
    :root
    {
        --medidas-burbuja-imagenes: 50px;
        --medida-circlo-contenedor: 230px;
        --medidas-presentacion: 100px;
    }
    header .contenedor .right .presentacion
    {
        background: rgb(31, 34, 61);
        padding:5px;
    }
    header .contenedor .right .circulo
    {
        /* border:1px solid #ccc; */
        margin:0 auto;
    }
    header .contenedor .right .circulo .min-circulo
    {
        background:rgb(168, 168, 168);
        border:none;
    }
    header .contenedor .right .circulo .min-circulo span
    {
        position:relative;
        color: rgb(44, 44, 44);
        padding:3px 0;
        left:-0.5px;
        font-size:0.6rem;
    }
    header .contenedor .right .circulo .casas
    {
        /* top: 3%;
        left:calc(0% - -5px); */
        top: 10px !important;
        left:10px !important;
    }
    header .contenedor .right .circulo .villas
    {
        top: calc(5%);
        left:calc(75% - 0px);
    }
    header .contenedor .right .circulo .mansiones
    {
        top: calc(75%);
        left: 10px;
    }
    header .contenedor .right .circulo .locales
    {
        top: calc(75%);
        left:calc(95% - var(--medidas-burbuja-imagenes));
    } 
    header .contenedor .right .tapa
    {
        background:rgb(255, 255, 255);
    }
    header .contenedor .right .tapa h3
    {
        color: rgb(33, 39, 48);
        font-size: 1.5rem;
        padding-top:50px;
    }
    header .contenedor .right .tapa button
    {
        width:30px;
        height:30px;
        top:30px;
        background:#131632;
        color:rgb(233, 230, 230);
        font-size:0.5rem;
    }
    header .contenedor .right .tapa button.down-left
    {
        left:-100px;
    }
    header .contenedor .right .tapa button.down-right
    {
        left:100px;
    }
}
@media(min-width: 331px) and (max-width: 400px)
{
    header
    {
        background:rgb(224, 224, 224);
    }
    header .contenedor
    {
        width:100%;
        margin:20px 0;
        display: block;
    }
    header .contenedor .left
    {
        margin:0 0;
        width:100%;
    }
    header .contenedor .left div a
    {
        margin:10px auto;
    }
    header .contenedor .left div
    {
        padding:0 20px;
        padding-top: 0;
        text-align: center;
        /* z-index:3; */
    }
    header .contenedor .left hr
    {
        width:100px;
        margin:5px auto;
    }
    header .contenedor .left h3
    {
        color:rgb(31, 30, 30);
        font-size:1.4rem;
    }
    header .contenedor .left h1
    {
        color:rgb(20, 20, 20);
        font-size:1.2rem;
    }
    header .contenedor .right
    {
        background:rgb(255, 255, 255);
        margin-top:40px;
        overflow: hidden;
        border-top-right-radius: 50px;
        border-top-left-radius: 50px;
        height:100%;
        padding:60px 0;
        width: 100%;
    }
    :root
    {
        --medidas-burbuja-imagenes: 50px;
        --medida-circlo-contenedor: 230px;
        --medidas-presentacion: 100px;
    }
    header .contenedor .right .presentacion
    {
        background: rgb(31, 34, 61);
        padding:5px;
    }
    header .contenedor .right .circulo
    {
        /* border:1px solid #ccc; */
        margin:0 auto;
    }
    header .contenedor .right .circulo .min-circulo
    {
        background:rgb(168, 168, 168);
        border:none;
    }
    header .contenedor .right .circulo .min-circulo span
    {
        position:relative;
        color: rgb(44, 44, 44);
        padding:3px 0;
        left:-0.5px;
        font-size:0.6rem;
    }
    header .contenedor .right .circulo .casas
    {
        /* top: 3%;
        left:calc(0% - -5px); */
        top: 10px !important;
        left:10px !important;
    }
    header .contenedor .right .circulo .villas
    {
        top: calc(5%);
        left:calc(75% - 0px);
    }
    header .contenedor .right .circulo .mansiones
    {
        top: calc(75%);
        left: 10px;
    }
    header .contenedor .right .circulo .locales
    {
        top: calc(75%);
        left:calc(95% - var(--medidas-burbuja-imagenes));
    } 
    header .contenedor .right .tapa
    {
        background:rgb(255, 255, 255);
    }
    header .contenedor .right .tapa h3
    {
        color: rgb(33, 39, 48);
        font-size: 1.5rem;
        padding-top:50px;
    }
    header .contenedor .right .tapa button
    {
        width:30px;
        height:30px;
        top:30px;
        background:#131632;
        color:rgb(233, 230, 230);
        font-size:0.5rem;
    }
    header .contenedor .right .tapa button.down-left
    {
        left:-100px;
    }
    header .contenedor .right .tapa button.down-right
    {
        left:100px;
    }
}
@media(min-width: 401px) and (max-width: 450px)
{
    header
    {
        background:rgb(224, 224, 224);
    }
    header .contenedor
    {
        width:100%;
        margin:20px 0;
        display: block;
    }
    header .contenedor .left
    {
        margin:0 0;
        width:100%;
    }
    header .contenedor .left div a
    {
        margin:10px auto;
        font-size:12px;
    }
    header .contenedor .left div
    {
        padding:0 20px;
        padding-top: 0;
        text-align: center;
        /* z-index:3; */
    }
    header .contenedor .left hr
    {
        width:100px;
        margin:5px auto;
    }
    header .contenedor .left h3
    {
        color:rgb(31, 30, 30);
        font-size:1.4rem;
    }
    header .contenedor .left h1
    {
        color:rgb(20, 20, 20);
        font-size:1.2rem;
    }
    header .contenedor .right
    {
        background:rgb(255, 255, 255);
        margin-top:40px;
        overflow: hidden;
        border-top-right-radius: 60px;
        border-top-left-radius: 60px;
        height:100%;
        padding:60px 0;
        width: 100%;
    }
    :root
    {
        --medidas-burbuja-imagenes: 60px;
        --medida-circlo-contenedor: 270px;
        --medidas-presentacion: 120px;
    }
    header .contenedor .right .presentacion
    {
        background: rgb(31, 34, 61);
        padding:5px;
    }
    header .contenedor .right .circulo
    {
        /* border:1px solid #ccc; */
        margin:0 auto;
    }
    header .contenedor .right .circulo .min-circulo
    {
        background:rgb(168, 168, 168);
        border:none;
    }
    header .contenedor .right .circulo .min-circulo span
    {
        position:relative;
        color: rgb(44, 44, 44);
        padding:3px 0;
        left:-0.5px;
        font-size:0.6rem;
    }
    header .contenedor .right .circulo .casas
    {
        /* top: 3%;
        left:calc(0% - -5px); */
        top: 10px !important;
        left:10px !important;
    }
    header .contenedor .right .circulo .villas
    {
        top: calc(5%);
        left:calc(75% - 0px);
    }
    header .contenedor .right .circulo .mansiones
    {
        top: calc(75%);
        left: 10px;
    }
    header .contenedor .right .circulo .locales
    {
        top: calc(75%);
        left:calc(95% - var(--medidas-burbuja-imagenes));
    } 
    header .contenedor .right .tapa
    {
        background:rgb(255, 255, 255);
    }
    header .contenedor .right .tapa h3
    {
        color: rgb(33, 39, 48);
        font-size: 1.5rem;
        padding-top:50px;
    }
    header .contenedor .right .tapa button
    {
        width:30px;
        height:30px;
        top:30px;
        background:#131632;
        color:rgb(233, 230, 230);
        font-size:0.5rem;
    }
    header .contenedor .right .tapa button.down-left
    {
        left:-100px;
    }
    header .contenedor .right .tapa button.down-right
    {
        left:100px;
    }
}
@media(min-width: 451px) and (max-width: 500px)
{
    header
    {
        background:rgb(224, 224, 224);
    }
    header .contenedor
    {
        width:90%;
        margin:20px auto;
        display: block;
    }
    header .contenedor .left
    {
        margin:0 0;
        width:100%;
    }
    
    header .contenedor .left div a
    {
        margin:10px auto;
        font-size:12px;
    }
    header .contenedor .left div
    {
        padding:0 20px;
        padding-top: 0;
        text-align: center;
        /* z-index:3; */
    }
    header .contenedor .left hr
    {
        width:100px;
        margin:5px auto;
    }
    header .contenedor .left h3
    {
        color:rgb(31, 30, 30);
        font-size:1.3rem;
    }
    header .contenedor .left h1
    {
        color:rgb(20, 20, 20);
        font-size:1.2rem;
    }
    header .contenedor .right
    {
        background:rgb(255, 255, 255);
        overflow: hidden;
        border-top-right-radius: 60px;
        border-top-left-radius: 60px;
        height:100%;
        padding:60px 0;
        width: 90%;
        margin:40px auto;
    }
    :root
    {
        --medidas-burbuja-imagenes: 70px;
        --medida-circlo-contenedor: 300px;
        --medidas-presentacion: 130px;
    }
    header .contenedor .right .presentacion
    {
        background: rgb(31, 34, 61);
        padding:5px;
    }
    header .contenedor .right .circulo
    {
        /* border:1px solid #ccc; */
        margin:0 auto;
    }
    header .contenedor .right .circulo .min-circulo
    {
        background:rgb(168, 168, 168);
        border:none;
    }
    header .contenedor .right .circulo .min-circulo span
    {
        position:relative;
        color: rgb(44, 44, 44);
        padding:3px 0;
        left:-0.5px;
        font-size:0.8rem;
    }
    header .contenedor .right .circulo .casas
    {
        /* top: 3%;
        left:calc(0% - -5px); */
        top: 10px !important;
        left:10px !important;
    }
    header .contenedor .right .circulo .villas
    {
        top: calc(5%);
        left:calc(75% - 0px);
    }
    header .contenedor .right .circulo .mansiones
    {
        top: calc(75%);
        left: 10px;
    }
    header .contenedor .right .circulo .locales
    {
        top: calc(75%);
        left:calc(95% - var(--medidas-burbuja-imagenes));
    } 
    header .contenedor .right .tapa
    {
        background:rgb(255, 255, 255);
    }
    header .contenedor .right .tapa h3
    {
        color: rgb(33, 39, 48);
        font-size: 1.5rem;
        padding-top:50px;
    }
    header .contenedor .right .tapa button
    {
        width:40px;
        height:40px;
        top:30px;
        background:#131632;
        color:rgb(233, 230, 230);
        font-size:0.5rem;
    }
    header .contenedor .right .tapa button.down-left
    {
        left:-120px;
    }
    header .contenedor .right .tapa button.down-right
    {
        left:120px;
    }
}
@media(min-width: 501px) and (max-width: 600px)
{
    header .contenedor
    {
        width:100%;
        margin:0;
        margin-top:30px;
        display: block;
    }
    header .contenedor .left
    {
        margin:0 auto;
        width:80%;
        order:2;
    }
    header .contenedor .left div a
    {
        margin:10px auto;
        margin-top:20px;
        font-size:14px;
    }
    header .contenedor .left div
    {
        padding:0 20px;
        padding-top: 0;
        text-align: center;
        /* z-index:3; */
    }
    header .contenedor .left hr
    {
        width:100px;
        margin:5px auto;
    }
    header .contenedor .left h3
    {
        color:rgb(31, 30, 30);
        font-size:1.3rem;
    }
    header .contenedor .left h1
    {
        color:rgb(20, 20, 20);
        font-size:1.2rem;
    }
    header .contenedor .right
    {
        order:1;
        background:rgb(255, 255, 255);
        overflow: hidden;
        border-top-right-radius: 60px;
        border-top-left-radius: 60px;
        height:100%;
        padding:60px 0;
        width: 80%;
        margin:40px auto;
    }
    :root
    {
        --medidas-burbuja-imagenes: 70px;
        --medida-circlo-contenedor: 300px;
        --medidas-presentacion: 130px;
    }
    header .contenedor .right .presentacion
    {
        background: rgb(31, 34, 61);
        padding:5px;
    }
    header .contenedor .right .circulo
    {
        /* border:1px solid #ccc; */
        margin:0 auto;
    }
    header .contenedor .right .circulo .min-circulo
    {
        background:rgb(168, 168, 168);
        border:none;
    }
    header .contenedor .right .circulo .min-circulo span
    {
        position:relative;
        color: rgb(44, 44, 44);
        padding:3px 0;
        left:-0.5px;
        font-size:0.8rem;
    }
    header .contenedor .right .circulo .casas
    {
        /* top: 3%;
        left:calc(0% - -5px); */
        top: 10px !important;
        left:10px !important;
    }
    header .contenedor .right .circulo .villas
    {
        top: calc(5%);
        left:calc(75% - 0px);
    }
    header .contenedor .right .circulo .mansiones
    {
        top: calc(75%);
        left: 10px;
    }
    header .contenedor .right .circulo .locales
    {
        top: calc(75%);
        left:calc(95% - var(--medidas-burbuja-imagenes));
    } 
    header .contenedor .right .tapa
    {
        background:rgb(255, 255, 255);
    }
    header .contenedor .right .tapa h3
    {
        color: rgb(33, 39, 48);
        font-size: 1.5rem;
        padding-top:50px;
    }
    header .contenedor .right .tapa button
    {
        width:40px;
        height:40px;
        top:30px;
        background:#131632;
        color:rgb(233, 230, 230);
        font-size:0.5rem;
    }
    header .contenedor .right .tapa button.down-left
    {
        left:-120px;
    }
    header .contenedor .right .tapa button.down-right
    {
        left:120px;
    }
}
@media(min-width: 601px) and (max-width: 700px)
{
    header
    {
        background:black;
    }
    header .contenedor
    {
        width:100%;
        margin:0 0;
        display: block;
    }
    header .contenedor .left
    {
        text-align:center;
        margin:0 auto;
        width:80%;
    }
    header .contenedor .left div a
    {
        margin:20px auto;
    }
    header .contenedor .left div
    {
        padding:0 20px;
        padding-top: 50px;
    }
    header .contenedor .left hr
    {
        width:100px;
        margin:5px auto;
    }
    header .contenedor .left h3
    {
        font-size:1.2rem;
    }
    header .contenedor .left h1
    {
        font-size:1.7rem;
    }
    header .contenedor .right
    {
        background:transparent;
        overflow: hidden;
        border-top-right-radius: 60px;
        border-top-left-radius: 60px;
        height:100%;
        padding:60px 0;
        width: 80%;
        margin:0px auto;
    }
    :root
    {
        --medidas-burbuja-imagenes: 70px;
        --medida-circlo-contenedor: 300px;
        --medidas-presentacion: 130px;
    }
    header .contenedor .right .presentacion
    {
        background: rgb(31, 34, 61);
        padding:5px;
    }
    header .contenedor .right .circulo
    {
        /* border:1px solid #ccc; */
        margin:0 auto;
    }
    header .contenedor .right .circulo .min-circulo
    {
        background:rgb(168, 168, 168);
        border:none;
    }
    header .contenedor .right .circulo .min-circulo span
    {
        position:relative;
        color: rgb(240, 233, 233);
        padding:3px 0;
        left:-0.5px;
        font-size:0.8rem;
    }
    header .contenedor .right .circulo .casas
    {
        top: 10px !important;
        left:10px !important;
    }
    header .contenedor .right .circulo .villas
    {
        top: calc(5%);
        left:calc(75% - 0px);
    }
    header .contenedor .right .circulo .mansiones
    {
        top: calc(75%);
        left: 10px;
    }
    header .contenedor .right .circulo .locales
    {
        top: calc(75%);
        left:calc(95% - var(--medidas-burbuja-imagenes));
    } 
    header .contenedor .right .tapa
    {
        background:black;
    }
    header .contenedor .right .tapa h3
    {
        color: rgb(255, 255, 255);
        font-size: 1.5rem;
        padding-top:50px;
    }
    header .contenedor .right .tapa button
    {
        width:40px;
        height:40px;
        top:30px;
        background:#e4e4e9;
        color:rgb(17, 16, 16);
        font-size:0.8rem;
    }
    header .contenedor .right .tapa button.down-left
    {
        left:-120px;
    }
    header .contenedor .right .tapa button.down-right
    {
        left:120px;
    }
}
@media(min-width: 701px) and (max-width: 800px)
{
    
    header .contenedor
    {
        width:90%;
        margin:0 auto;
        display: block;
    }
    header .contenedor .left
    {
        text-align:text;
        margin:0 auto;
    }
    header .contenedor .left div a
    {
        float:none;
    }
    header .contenedor .left div
    {
        
        text-align:center;
        padding:0 20px;
        padding-top: 50px;
    }
    header .contenedor .left hr
    {
        width:100px;
        border:none;
        margin:5px auto;
    }
    header .contenedor .left h3
    {
        color:rgb(255, 255, 255);
        font-size:1.4rem;
    }
    header .contenedor .left h1
    {
        color:rgb(255, 255, 255);
        font-size:1.6rem;
    }
    header .contenedor .right
    {
        overflow: hidden;
        border-top-right-radius: 60px;
        border-top-left-radius: 60px;
        height:100%;
        padding:60px 0;
        width: 100%;
        margin:0px auto;
    }
    :root
    {
        --medidas-burbuja-imagenes: 70px;
        --medida-circlo-contenedor: 300px;
        --medidas-presentacion: 130px;
    }
    header .contenedor .right .presentacion
    {
        background: rgb(31, 34, 61);
        padding:5px;
    }
    header .contenedor .right .circulo
    {
        /* border:1px solid #ccc; */
        margin:0 auto;
    }
    header .contenedor .right .circulo .min-circulo
    {
        background:rgb(168, 168, 168);
        border:none;
    }
    header .contenedor .right .circulo .min-circulo span
    {
        position:relative;
        color: rgb(240, 233, 233);
        padding:3px 0;
        left:-0.5px;
        font-size:0.8rem;
    }
    header .contenedor .right .circulo .casas
    {
        top: 10px !important;
        left:10px !important;
    }
    header .contenedor .right .circulo .villas
    {
        top: calc(5%);
        left:calc(75% - 0px);
    }
    header .contenedor .right .circulo .mansiones
    {
        top: calc(75%);
        left: 10px;
    }
    header .contenedor .right .circulo .locales
    {
        top: calc(75%);
        left:calc(95% - var(--medidas-burbuja-imagenes));
    } 
    header .contenedor .right .tapa
    {
        background:black;
    }
    header .contenedor .right .tapa h3
    {
        color: rgb(255, 255, 255);
        font-size: 1.5rem;
        padding-top:50px;
    }
    header .contenedor .right .tapa button
    {
        width:50px;
        height:50px;
        top:30px;
        background:#e4e4e9;
        color:rgb(17, 16, 16);
        font-size:1rem;
    }
    header .contenedor .right .tapa button.down-left
    {
        left:-120px;
    }
    header .contenedor .right .tapa button.down-right
    {
        left:120px;
    }
}
@media(min-width: 801px) and (max-width: 900px)
{
    header
    {
        background:black;
    }
    header .contenedor
    {
        width:70%;
        margin:0 auto;
        display: block;
    }
    header .contenedor .left
    {
        margin:0 auto;
        width:90%;
    }
    header .contenedor .left div a
    {
        float:none;
    }
    header .contenedor .left div
    {
        
        text-align:center;
        padding:0 20px;
        padding-top: 50px;
    }
    header .contenedor .left hr
    {
        width:100px;
        border:none;
        margin:5px auto;
    }
    header .contenedor .left h3
    {
        color:rgb(255, 255, 255);
        font-size:1.4rem;
    }
    header .contenedor .left h1
    {
        color:rgb(255, 255, 255);
        font-size:1.6rem;
    }
    header .contenedor .right
    {
        background:transparent;
        overflow: hidden;
        border-top-right-radius: 60px;
        border-top-left-radius: 60px;
        height:100%;
        padding:60px 0;
        width: 80%;
        margin:0px auto;
    }
    :root
    {
        --medidas-burbuja-imagenes: 70px;
        --medida-circlo-contenedor: 300px;
        --medidas-presentacion: 130px;
    }
    header .contenedor .right .presentacion
    {
        background: rgb(31, 34, 61);
        padding:5px;
    }
    header .contenedor .right .circulo
    {
        /* border:1px solid #ccc; */
        margin:0 auto;
    }
    header .contenedor .right .circulo .min-circulo
    {
        background:rgb(168, 168, 168);
        border:none;
    }
    header .contenedor .right .circulo .min-circulo span
    {
        position:relative;
        color: rgb(240, 233, 233);
        padding:3px 0;
        left:-0.5px;
        font-size:0.8rem;
    }
    header .contenedor .right .circulo .casas
    {
        top: 10px !important;
        left:10px !important;
    }
    header .contenedor .right .circulo .villas
    {
        top: calc(5%);
        left:calc(75% - 0px);
    }
    header .contenedor .right .circulo .mansiones
    {
        top: calc(75%);
        left: 10px;
    }
    header .contenedor .right .circulo .locales
    {
        top: calc(75%);
        left:calc(95% - var(--medidas-burbuja-imagenes));
    } 
    header .contenedor .right .tapa
    {
        background:black;
    }
    header .contenedor .right .tapa h3
    {
        color: rgb(255, 255, 255);
        font-size: 1.5rem;
        padding-top:50px;
    }
    header .contenedor .right .tapa button
    {
        width:40px;
        height:40px;
        top:30px;
        background:#e4e4e9;
        color:rgb(17, 16, 16);
        font-size:0.5rem;
    }
    header .contenedor .right .tapa button.down-left
    {
        left:-130px;
    }
    header .contenedor .right .tapa button.down-right
    {
        left:130px;
    }
}
@media(min-width: 901px) and (max-width: 1023px)
{
    
    header .contenedor
    {
        width:85%;
        margin:0 auto;
        display: block;
    }
    header .contenedor .left
    {
        margin:0 auto;
        width:70%;
    }
    
    header .contenedor .right
    {
        background:rgb(241, 241, 241) !important;
        overflow: hidden;
        border-top-right-radius: 60px;
        border-top-left-radius: 60px;
        height:100%;
        padding-top:60px;
        padding-bottom: 0 !important;
        width: 100%;
        margin:0px auto;
    }
    
    header .contenedor .right .presentacion
    {
        background: rgb(31, 34, 61);
        padding:5px;
    }
    header .contenedor .right .circulo
    {
        /* border:1px solid #ccc; */
        margin:0 auto;
    }
    header .contenedor .right .circulo .min-circulo
    {
        background:rgb(168, 168, 168);
        border:none;
    }
    header .contenedor .right .circulo .min-circulo span
    {
        position:relative;
        color: rgb(240, 233, 233);
        padding:3px 0;
        left:-0.5px;
        font-size:0.8rem;
    }
    header .contenedor .right .circulo .casas
    {
        top: 20px !important;
        left:25px !important;
    }
    header .contenedor .right .circulo .villas
    {
        top: calc(5%);
        left:calc(75% - 0px);
    }
    header .contenedor .right .circulo .mansiones
    {
        top: calc(75%);
        left: 10px;
    }
    header .contenedor .right .circulo .locales
    {
        top: calc(75%);
        left:calc(95% - var(--medidas-burbuja-imagenes));
    } 
    header .contenedor .right .tapa
    {
        background:black;
    }
    header .contenedor .right .tapa h3
    {
        color: rgb(255, 255, 255);
        font-size: 1.5rem;
        padding-top:50px;
    }
    header .contenedor .right .tapa button
    {
        width:40px;
        height:40px;
        top:30px;
        background:#e4e4e9;
        color:rgb(17, 16, 16);
        font-size:1rem;
    }
    header .contenedor .right .tapa button.down-left
    {
        left:-130px;
    }
    header .contenedor .right .tapa button.down-right
    {
        left:130px;
    }
}
@media(min-width: 1024px) and (max-width: 1223px)
{
    
    header .contenedor
    {
        width:85%;
        margin:0 auto;
        display: block;
    }
    
    header .contenedor .left
    {
        width:60%;
    }
    header .contenedor .right
    {
        margin:0 auto;
        width:80%;
    }
    
    
    header .contenedor .right .presentacion
    {
        background: rgb(31, 34, 61);
        padding:5px;
    }
    header .contenedor .right .circulo
    {
        /* border:1px solid #ccc; */
        margin:0 auto;
    }
    header .contenedor .right .circulo .min-circulo
    {
        background:rgb(168, 168, 168);
        border:none;
    }
    header .contenedor .right .circulo .min-circulo span
    {
        position:relative;
        color: rgb(240, 233, 233);
        padding:3px 0;
        left:-0.5px;
        font-size:0.8rem;
    }
   
    header .contenedor .right .tapa button.down-left
    {
        left:-130px;
    }
    header .contenedor .right .tapa button.down-right
    {
        left:130px;
    }
}