/*
	CSS personalizado para 02 APARTAMENTOS
*/

/**************************************** GAMA DE COLORES ****************************************/

/*    Beige Oscuro: C3B398 rgb(195,179,152) */
/*            Gris: 999999 rgb(153,153,153) */
/*     Beige Medio: DFD8CB rgb(223,216,203) */
/*     Beige Claro: EEE9E4 rgb(238,233,228) */
/* Beige Muy Claro: F7F5F2 rgb(247,245,242) */

/*   Marron Oscuro: 8E6E53 rgb(142,110, 83) */
/*    Marron Medio: C5B09C rgb(197,176,156) */
/*    Marron Claro: E9DACB rgb(233,218,203) */
/*Marron Muy Claro: F9F1E8 rgb(249,241,232) */

/*     Azul Oscuro: 6689A1 rgb(102,137,161) */
/*      Azul Medio: 9BB2C2 rgb(155,178,194) */
/*      Azul Claro: CDD9E0 rgb(205,217,224) */
/*  Azul Muy Claro: E6ECF0 rgb(230,236,240) */

/************************************ MODIFICADOS DE syle-home ***********************************/

/******************************************* #rowLogos *******************************************/

#rowLogos .divLogos    { display: flex; justify-content: space-between; }
#rowLogos .divLogos *  { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
#rowLogos .divLogo     { width: 33.33%; text-align: center; }
#rowLogos .divLogo img { width: 100px; }
#rowLogos .divLogo h1  { margin-top: 20px !important; font-family: var(--font-family-heading); font-size: 60px; color: var(--color1-hex); }

@media (max-width: 1180px) { #rowLogos .divLogos { padding: 0px 20px; } }

@media (max-width: 1080px) { #rowLogos .divLogo img { width: 80px; } #rowLogos .divLogo h1  { margin-top: 15px !important; font-size: 50px; } }
@media (max-width:  980px) { #rowLogos .divLogo img { width: 72px; } #rowLogos .divLogo h1  { margin-top: 10px !important; font-size: 42px; } }
@media (max-width:  780px) { #rowLogos .divLogo img { width: 64px; } #rowLogos .divLogo h1  { margin-top:  5px !important; font-size: 36px; } }

@media (max-width: 680px) {
	#rowLogos .divLogos             { flex-wrap: wrap; justify-content: center; }
	#rowLogos .divLogo              { width: 45%; }
	#rowLogos .divLogo:last-of-type { margin-top: 20px; }
}

@media (max-width: 580px) { #rowLogos .divLogo { width: 50%; } }

@media (max-width: 480px) {
	#rowLogos .divLogo               { margin-top: 20px; width: 100%; }
	#rowLogos .divLogo:first-of-type { margin-top: 0px; }
	#rowLogos .divLogo img           { width: 48px; }
	#rowLogos .divLogo h1            { font-size: 28px; }
}

/****************************************** #rowGallery ******************************************/

#rowGallery .divGallery                          { margin: auto; }
#rowGallery .divGallery *                        { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
#rowGallery .divGallery .divFotos                { display: flex; flex-wrap: wrap; justify-content: center; }
#rowGallery .divGallery .divFoto                 { position: relative; width: 20%; height: calc(20vw * 500 / 720); overflow: hidden; }
#rowGallery .divGallery .divFoto:last-of-type    { display: none; }
#rowGallery .divGallery .divFondo                { width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; }
#rowGallery .divGallery .divView                 { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0; }
#rowGallery .divGallery .divView i               { font-size: 6vw; color: var(--color1-hex); text-shadow: 2px 2px 5px rgba(0,0,0,1); }
#rowGallery .divGallery .divFoto:hover .divFondo { transform: scale(1.2); }
#rowGallery .divGallery .divFoto:hover .divView  { opacity: 1; }

@media (max-width: 980px) {
	#rowGallery .divGallery .divFoto              { width: 25%; height: calc(25vw * 500 / 720); }
	#rowGallery .divGallery .divFoto:last-of-type { display: block; }
}

@media (max-width: 780px) {
	#rowGallery .divGallery .divFoto              { width: 33.33%; height: calc(33.33vw * 500 / 720); }
	#rowGallery .divGallery .divFoto:last-of-type { display: none; }
	#rowGallery .divGallery .divView i            { font-size: 8vw; }
}

@media (max-width: 580px) {
	#rowGallery .divGallery .divFoto              { width: 50%; height: calc(35vw * 500 / 720); }
	#rowGallery .divGallery .divFoto:last-of-type { display: block; }
	#rowGallery .divGallery .divView i            { font-size: 10vw; }
}

@media (max-width: 380px) { #rowGallery .divGallery .divView i { font-size: 14vw; } }

/****************************************** #rowContent ******************************************/

#rowContent .divContent   { display: flex; }
#rowContent .divContent * { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
#rowContent .divIzda      { padding-right: 40px; width: calc(100% - 420px); border-right: solid 4px var(--color-azu1-hex); }
#rowContent .divDcha      { padding-left:  40px; width: 420px; }

#rowContent .divTitulo h1 { margin-bottom: 20px !important; color: var(--color-mar1-hex); font-size: 28px; font-weight: 600; }
#rowContent .divTexto  p  { margin: 10px 0px; font-size: 18px; }

#rowContent .divServicios                 { margin-top: 40px; }
#rowContent .divServicios .divCabecera    { margin-bottom: 20px; display: flex; align-items: center; }
#rowContent .divServicios .divCabecera h1 { color: var(--color-mar1-hex); font-size: 28px; font-weight: 600; }
#rowContent .divServicios .divCabecera hr { margin: 4px 0px 0px 15px; width: 100%; height: 4px; background-color: var(--color-azu1-hex); }
#rowContent .divServicios .divDatos       { display: flex; flex-wrap: wrap; }
#rowContent .divDato                      { margin-bottom: 30px; width: 50%; display: flex; align-items: center; }
#rowContent .divDato img                  { margin-right:  30px; width: 58px; }
#rowContent .divDato span                 { font-size: 22px; }
#rowContent .divServicios .divListas      { margin-top: 30px; display: flex; flex-wrap: wrap; }
#rowContent .divServicios .divLista       { width: 50%; }
#rowContent .divServicios .divLista  span { font-size: 18px; font-weight: 600; }
#rowContent .divServicios .divLista  ul   { margin: 0px 0px 20px 0px; list-style-type: none; }
#rowContent .divServicios .divLista  li   { margin: 0px; font-size: 18px; }
#rowContent .divServicios .divLista  i    { margin-right: 10px; }

#rowContent .divTarifas .divCabecera                       { margin-bottom: 20px; display: flex; align-items: center; }
#rowContent .divTarifas .divCabecera h1                    { color: var(--color-mar1-hex); font-size: 28px; font-weight: 600; }
#rowContent .divTarifas .divCabecera hr                    { margin: 4px 0px 0px 15px; width: 100%; height: 4px; background-color: var(--color-azu1-hex); }
#rowContent .divTarifas .divTarifa                         { margin: 20px 0px; width: 100%; height: 80px; border: solid 1px var(--color-azu1-hex); display: flex; align-items: center; }
#rowContent .divTarifas .divConcepto                       { padding-left: 15px; width: 55%; font-size: 20px; font-weight: 400; }
#rowContent .divTarifas .divPrecio                         { color: #FFFFFF; width: 45%; height: 100%; background: var(--color-azu1-hex); }
#rowContent .divTarifas .divPrecio                         { display: flex; flex-direction: column; align-items: center; justify-content: center; }
#rowContent .divTarifas .divPrecio .spanDesde              { font-size: 10px; letter-spacing: 4px; }
#rowContent .divTarifas .divPrecio .spanCantidad           { font-size: 30px; font-weight: 600; line-height: 90%; }
#rowContent .divTarifas .divPrecio .spanNota               { font-size: 11px; font-weight: 500; }
#rowContent .divTarifas .divTarifaGrupos                   { border: solid 1px #B61622; }
#rowContent .divTarifas .divTarifaGrupos .divConcepto      { color: #B61622; }
#rowContent .divTarifas .divTarifaGrupos .divConcepto span { display: block; line-height: 100%; }
#rowContent .divTarifas .divTarifaGrupos .divPrecio        { background: #B61622; }
#rowContent .divTarifas .divAlta                           { margin: 30px 0px; font-size: 18px; text-align: center; }
#rowContent .divTarifas .divAlta strong                    { font-size: 20px; color: var(--color-azu1-hex); }

#rowContent .divReservar                { text-align: center; }
#rowContent .divReservar .aButton       { padding: 20px 0px; font-size: 22px; font-weight: 400; letter-spacing: 10px; }
#rowContent .divReservar .aButton       { border: none; border-radius: 0px; background-color: var(--color-mar1-hex); display: block; }
#rowContent .divReservar .aButton:hover { transform: scale(1.1); color: #FFFFFF !important; background-color: var(--color-mar2-hex); }

#rowContent .divLinea { margin: 30px 0px; width: 100%; height: 4px; background-color: var(--color-azu1-hex); }

#rowContent .divDinopolis                   { text-align: center; }
#rowContent .divDinopolis .divLogo          { margin: auto; width: 280px; }
#rowContent .divDinopolis .divTexto         { font-size: 24px; font-weight: 400; }
#rowContent .divDinopolis .divTexto strong  { font-size: 28px; color: var(--color-azu1-hex); }
#rowContent .divDinopolis .divTexto a       { color: var(--color-mar1-hex) !important; display: flex; align-items: center; justify-content: center; }
#rowContent .divDinopolis .divTexto a:hover { color: var(--color-mar2-hex) !important; transform: scale(1.1); }
#rowContent .divDinopolis .divTexto a i     { margin-right: 6px; }

@media (max-width: 1180px) { #rowContent .divContent { padding: 0px 20px; } }

@media (max-width: 1080px) {
	#rowContent .divDato img  { margin-right: 10px; width: 48px; }
	#rowContent .divDato span { font-size: 20px; }
}

@media (max-width:  980px) {
	#rowContent .divIzda                       { padding-right: 30px; width: calc(100% - 380px); border-width: 2px; }
	#rowContent .divDcha                       { padding-left:  30px; width: 380px; }
	#rowContent .divTitulo h1                  { font-size: 24px; }
	#rowContent .divTexto  p                   { margin: 10px 0px; font-size: 16px; }
	#rowContent .divServicios                  { margin-top: 30px; }
	#rowContent .divServicios .divCabecera h1  { font-size: 24px; }
	#rowContent .divServicios .divCabecera hr  { margin: 4px 0px 0px 10px; height: 2px; }
	#rowContent .divDato                       { margin-bottom: 20px; }
	#rowContent .divDato img                   { width: 40px; }
	#rowContent .divDato span                  { font-size: 20px; }
	#rowContent .divServicios .divListas       { margin-top: 20px; }
	#rowContent .divServicios .divLista  li    { font-size: 16px; }
	#rowContent .divServicios .divLista  i     { margin-right: 6px; }
	#rowContent .divTarifas .divCabecera h1    { font-size: 24px; }
	#rowContent .divTarifas .divCabecera hr    { margin: 4px 0px 0px 10px; height: 2px; }
	#rowContent .divTarifas .divConcepto       { font-size: 18px; }
	#rowContent .divReservar .aButton          { font-size: 20px; }
	#rowContent .divLinea                      { margin: 20px 0px; height: 2px; }
	#rowContent .divDinopolis .divLogo         { width: 240px; }
	#rowContent .divDinopolis .divTexto        { font-size: 20px; }
	#rowContent .divDinopolis .divTexto strong { font-size: 24px; }
}

@media (max-width:  880px) {
	#rowContent .divIzda                       { width: 50%; }
	#rowContent .divDcha                       { width: 50%; }
	#rowContent .divDato img                   { margin-right: 5px; width: 32px; }
	#rowContent .divDato span                  { font-size: 18px; }
	#rowContent .divServicios .divListas       { margin-top: 10px; }
	#rowContent .divTarifas .divConcepto       { padding-left: 10px; width: 60%; }
	#rowContent .divTarifas .divPrecio         { width: 40%; }
	#rowContent .divDinopolis .divLogo         { width: 240px; }
	#rowContent .divDinopolis .divTexto        { font-size: 20px; }
	#rowContent .divDinopolis .divTexto strong { font-size: 24px; }
}

@media (max-width:  780px) {
	#rowContent .divContent                        { flex-wrap: wrap; }
	#rowContent .divIzda                           { padding-right: 0px; width: 100%; border: none; }
	#rowContent .divDcha                           { padding-left:  0px; width: 100%; }
	#rowContent .divTexto p                        { text-align: justify; }
	#rowContent .divServicios .divDatos            { justify-content: center; }
	#rowContent .divServicios .divDato             { width: 220px; }
	#rowContent .divDato img                       { margin-right: 15px; width: 40px; }
	#rowContent .divDato span                      { font-size: 18px; }
	#rowContent .divServicios .divListas           { justify-content: center; }
	#rowContent .divServicios .divLista            { padding: 0px 20px; width: auto; }
	#rowContent .divTarifas .divConcepto           { padding: 0px; width: 50%; text-align: center; }
	#rowContent .divTarifas .divPrecio             { width: 50%; }
	#rowContent .divTarifas .divAlta br5000:before { content: " "; }
}

@media (max-width:  680px) {
	#rowContent .divServicios .divLista { padding: 0px 10px; width: auto; }
}

@media (max-width:  580px) {
	#rowContent .divTitulo h1                      { font-size: 20px; }
	#rowContent .divTexto  p                       { font-size: 14px; }
	#rowContent .divServicios                      { margin-top: 20px; }
	#rowContent .divServicios .divCabecera h1      { font-size: 20px; }
	#rowContent .divServicios .divDato             { width: 190px; }
	#rowContent .divDato img                       { margin-right: 10px; width: 32px; }
	#rowContent .divDato span                      { font-size: 16px; }
	#rowContent .divServicios .divListas           { margin-top: 0px; }
	#rowContent .divServicios .divLista            { width: 40%; }
	#rowContent .divServicios .divLista ul         { margin: 0px 0px 10px 0px; }
	#rowContent .divServicios .divLista span       { font-size: 16px; }
	#rowContent .divServicios .divLista  li        { font-size: 14px; }
	#rowContent .divServicios .divLista  i         { margin-right: 4px; }
	#rowContent .divTarifas                        { margin-top: 20px; }
	#rowContent .divTarifas .divCabecera h1        { font-size: 20px; }
	#rowContent .divTarifas .divConcepto           { font-size: 16px; }
	#rowContent .divTarifas .divTarifa             { height: 65px; }
	#rowContent .divTarifas .divAlta               { font-size: 16px; }
	#rowContent .divTarifas .divAlta br5000:before { content: "\A"; }
	#rowContent .divTarifas .divAlta strong        { font-size: 18px; }
	#rowContent .divReservar .aButton              { padding: 15px 0px; }
	#rowContent .divDinopolis .divLogo             { width: 220px; }
	#rowContent .divDinopolis .divTexto            { font-size: 18px; }
	#rowContent .divDinopolis .divTexto strong     { font-size: 20px; }
}

@media (max-width:  480px) {
	#rowContent .divTexto  p             { text-align: left; }
	#rowContent .divTarifas .divConcepto { width: 60%; }
	#rowContent .divTarifas .divPrecio   { width: 40%; }
	#rowContent .divTarifas .divAlta     { margin: 20px 0px; }
	#rowContent .divReservar .aButton    { padding: 10px 0px; font-size: 18px; }
}

@media (max-width: 380px) {
	#rowContent .divContent                    { padding: 0px 10px; }
	#rowContent .divDato                       { margin-bottom: 10px; }
	#rowContent .divServicios .divLista        { width: 50%; }
	#rowContent .divTarifas .divConcepto       { font-size: 14px; }
	#rowContent .divTarifas .divAlta           { font-size: 14px; }
	#rowContent .divTarifas .divAlta strong    { font-size: 16px; }
	#rowContent .divReservar .aButton          { letter-spacing: 5px; }
	#rowContent .divDinopolis .divLogo         { width: 180px; }
	#rowContent .divDinopolis .divTexto        { font-size: 16px; }
	#rowContent .divDinopolis .divTexto strong { font-size: 18px; }	
}