/*
	CSS personalizado para Página/s 04 DESTINOS
*/

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

/*    Azul Oscuro: 005376 rgb(  0, 83,118) */
/*           Gris: 999999 rgb(153,153,153) */
/*     Azul Medio: 8CA8C2 rgb(140,168,194) */
/*     Azul Claro: C8D8E8 rgb(200,216,232) */
/* Azul Muy Claro: E0F3FC rgb(224,243,252) */

/*        Verde 1: 90C254 rgb(144,194, 84) */
/*        Verde 2: C8DDAB rgb(200,221,171) */
/*        Verde 3: E6F0D7 rgb(230,240,215) */

/*      Naranja 1: FF7711 rgb(255,119, 17) */
/*      Naranja 2: FFEEDD rgb(255,238,221) */

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

/***************************************** #rowDestinos ******************************************/

#rowDestinos .divDestinos      { display: flex; flex-wrap: wrap; justify-content: center; }
#rowDestinos .divDestino       { margin: 20px; width: 320px; height: 380px; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
#rowDestinos .divDestino *     { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
#rowDestinos .divDestino:hover { transform: translateY(-20px); }
#rowDestinos .divPolaroid      { position: relative; width: 100%; height: 100%; background-image:url("/wp-content/uploads/fondo_polaroid.png"); }
#rowDestinos .divPolaroid      { background-repeat: no-repeat; background-size: contain; background-position: center center; }
#rowDestinos .divFoto          { position: absolute; top: 21px; left: 21px; width: 278px; height: 278px; }
#rowDestinos .divFoto          { background-repeat: no-repeat; background-size: cover; background-position: center center; }
#rowDestinos .divTitulo        { position: absolute; bottom: 28px; width: 100%; text-align: center; }
#rowDestinos .divTitulo h1     { padding: 0px 15px; font-family: var(--font-family-narrow); font-size: 36px; font-weight: 600; color: var(--color1-hex); }

@media (max-width: 1180px) {
	#rowDestinos .divDestinos  { padding: 0px 20px; }
	#rowDestinos .divDestino   { margin: 12px; width: 300px; height: 355px; }
	#rowDestinos .divFoto      { top: 20px; left: 21px; width: 259px; height: 259px; }
	#rowDestinos .divTitulo    { bottom: 28px; }
	#rowDestinos .divTitulo h1 { font-size: 28px; }
}

@media (max-width: 1080px) {
	#rowDestinos .divDestino   { margin: 10px; width: 270px; height: 320px; }
	#rowDestinos .divFoto      { top: 18px; left: 19px; width: 233px; height: 234px; }
	#rowDestinos .divTitulo    { bottom: 25px; }
	#rowDestinos .divTitulo h1 { font-size: 24px; }
}

@media (max-width:  980px) {
	#rowDestinos .divDestino   { width: 240px; height: 285px; }
	#rowDestinos .divFoto      { top: 16px; left: 16px; width: 208px; height: 208px; }
	#rowDestinos .divTitulo    { bottom: 22px; }
	#rowDestinos .divTitulo h1 { font-size: 24px; }
}

@media (max-width:  880px) {
	#rowDestinos .divDestino   { width: 207px; height: 246px; }
	#rowDestinos .divFoto      { top: 14px; left: 14px; width: 179px; height: 180px; }
	#rowDestinos .divTitulo    { bottom: 17px; }
	#rowDestinos .divTitulo h1 { font-size: 22px; }
}

@media (max-width:  780px) {
	#rowDestinos .divDestino   { width: 270px; height: 320px; }
	#rowDestinos .divFoto      { top: 18px; left: 19px; width: 233px; height: 234px; }
	#rowDestinos .divTitulo    { bottom: 25px; }
	#rowDestinos .divTitulo h1 { font-size: 24px; }
}

@media (max-width:  680px) {
	#rowDestinos .divDestino   { width: 220px; height: 260px; }
	#rowDestinos .divFoto      { top: 15px; left: 16px; width: 189px; height: 189px; }
	#rowDestinos .divTitulo    { bottom: 19px; }
	#rowDestinos .divTitulo h1 { font-size: 22px; }
}

@media (max-width:  580px) {
	#rowDestinos .divDestino   { width: 171px; height: 215px; }
	#rowDestinos .divFoto      { top: 18px; left: 12px; width: 147px; height: 147px; }
	#rowDestinos .divTitulo    { bottom: 20px; }
	#rowDestinos .divTitulo h1 { font-size: 18px; }
}

@media (max-width:  480px) {
	#rowDestinos .divDestinos      { padding: 0px; }
	#rowDestinos .divDestino       { margin: 5px; width: 152px; height: 180px; }
	#rowDestinos .divDestino:hover { transform: translateY(-10px); }
	#rowDestinos .divFoto          { top: 11px; left: 11px; width: 130px; height: 130px; }
	#rowDestinos .divTitulo        { bottom: 13px; }
	#rowDestinos .divTitulo h1     { font-size: 16px; }
}

@media (max-width:  380px) {
	#rowDestinos .divDestino   { width: 100%; height: 200px; }
	#rowDestinos .divPolaroid  { background-size: 100% 100%; }
	#rowDestinos .divFoto      { top: 12px; left: calc(100% * 21 / 320); width: calc(100% * 278 / 320); height: 147px; }
	#rowDestinos .divTitulo    { bottom: 15px; }
}