/*
	CSS personalizado para single RECETAS
*/

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

/*    Rosa Oscuro: EBA2B0 rgb(235,162,176) */
/*           Gris: 999999 rgb(153,153,153) */
/*     Rosa Medio: F5D0D7 rgb(245,208,215) */
/*     Rosa Claro: FAE7EB rgb(250,231,235) */
/* Rosa Muy Claro: FCF3F5 rgb(252,243,245) */

/*  Marrón oscuro: 6F4F47 rgb(111, 79, 71) */
/*   Marrón claro: B7A7A3 rgb(183,167,163) */

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

#main                 { padding: 0px !important; }
#main .full-container { max-width: none !important; }

/*************************************** #rowSingleReceta ***************************************/

/* CABECERA */

#rowSingleReceta *                            { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
#rowSingleReceta .divSingleReceta             { margin-top: calc(var(--masthead-height) * -1); width: 100%; }
#rowSingleReceta .divCabecera                 { position: relative; width: 100%; height: 650px; background-repeat: no-repeat; background-size: cover; background-position: center; }
#rowSingleReceta .divCabecera                 { display: flex; align-items: center; justify-content: center; }
#rowSingleReceta .divCabecera:before          { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: var(--color-mar1-hex); filter: brightness(0.8) opacity(0.8); }
#rowSingleReceta .divCabecera .divTitulo      { max-width: 700px; text-align: center; z-index: 1; }
#rowSingleReceta .divCabecera .divTitulo span { margin: 20px 0px;             font-size: 40px;            font-weight: 500;            color: var(--color1-hex); line-height: 100%; letter-spacing:  5px; }
#rowSingleReceta .divCabecera .divTitulo h1   { margin: 10px auto !important; font-size: 50px !important; font-weight: 700 !important; color: #FFFFFF;           line-height: 100%; }

@media (max-width: 1380px) {
	#rowSingleReceta .divCabecera                 { height: 600px; }
	#rowSingleReceta .divCabecera .divTitulo h1   { font-size: 45px !important; }
}

@media (max-width: 1180px) {
	#rowSingleReceta .divCabecera                 { height: 500px; }
	#rowSingleReceta .divCabecera .divTitulo span { font-size: 32px; letter-spacing: 4px; }
	#rowSingleReceta .divCabecera .divTitulo h1   { font-size: 40px !important; }
}

@media (max-width:  980px) {
	#rowSingleReceta .divCabecera                 { height: 400px; }
	#rowSingleReceta .divCabecera .divTitulo      { padding: 0px 60px; }
	#rowSingleReceta .divCabecera .divTitulo span { font-size: 28px; letter-spacing: 4px; }
	#rowSingleReceta .divCabecera .divTitulo h1   { font-size: 35px !important; }
}

@media (max-width:  780px) {
	#rowSingleReceta .divCabecera                 { height: 300px; }
	#rowSingleReceta .divCabecera .divTitulo      { padding: 0px 40px; }
	#rowSingleReceta .divCabecera .divTitulo span { font-size: 24px; letter-spacing: 3px; }
	#rowSingleReceta .divCabecera .divTitulo h1   { font-size: 30px !important; }
}

@media (max-width:  580px) {
	#rowSingleReceta .divCabecera                 { height: 200px; }
	#rowSingleReceta .divCabecera .divTitulo span { font-size: 20px; letter-spacing: 2px; }
	#rowSingleReceta .divCabecera .divTitulo h1   { font-size: 24px !important; }
}

/* CONTENT */

#rowSingleReceta .divContent                            { margin: auto; padding-top: 150px; max-width: 1180px; display: flex; flex-wrap: wrap; justify-content: space-between; }
#rowSingleReceta .divIzda                               { width: calc(100% - 480px - 80px); }
#rowSingleReceta .divIzda  h5                           { margin-bottom: 20px !important; color: var(--color-mar1-hex); line-height: 100%; }
#rowSingleReceta .divIzda  hr                           { margin: 40px 0px; background: var(--color1-hex); }
#rowSingleReceta .divIzda  .divBloqueDescripcion        { text-align: justify; }
#rowSingleReceta .divIzda  .divBloqueProceso            { text-align: justify; }
#rowSingleReceta .divIzda  .divBloqueProceso .divPaso   { margin-bottom: 20px; display: flex; }
#rowSingleReceta .divIzda  .divBloqueProceso .divNumero { flex: 0 0 50px; height: 50px; font-size: 32px; font-weight: 700; color: var(--color-mar1-hex); background: var(--color1-hex); border-radius: 50%; line-height: 100%; }
#rowSingleReceta .divIzda  .divBloqueProceso .divNumero { display: flex; align-items: center; justify-content: center; }
#rowSingleReceta .divIzda  .divBloqueProceso .divTexto  { margin-left: 20px; }
#rowSingleReceta .divDcha                               { padding: 40px; width: 480px; background: var(--color1-hex); border-radius: 30px; }
#rowSingleReceta .divDcha  h5                           { margin-bottom: 15px !important; color: var(--color-mar1-hex); line-height: 100%; }
#rowSingleReceta .divDcha  hr                           { margin: 20px 0px; background: var(--color3-hex); }
#rowSingleReceta .divDcha  .divDato                     { font-size: 24px; color: #FFFFFF; }
#rowSingleReceta .divDcha  .divDato img                 { width: 32px; }
#rowSingleReceta .divDcha  .divDato ul                  { margin: 0px; list-style-type: disc; }
#rowSingleReceta .divVideo                              { margin: 80px auto; max-width: 1180px; }
#rowSingleReceta .divVideo h5                           { margin-bottom: 20px !important; color: var(--color-mar1-hex); line-height: 100%; }

@media (max-width: 1380px) { #rowSingleReceta .divContent { padding: 120px 40px 0px 40px; } #rowSingleReceta .divVideo { margin: 80px 40px; max-width: none; } }

@media (max-width: 1180px) {
	#rowSingleReceta .divContent                            { padding: 120px 40px 0px 40px; }
	#rowSingleReceta .divIzda                               { width: calc(100% - 400px - 60px); }
	#rowSingleReceta .divDcha                               { padding: 30px; width: 400px; border-radius: 25px; }
	#rowSingleReceta .divDcha  h5                           { letter-spacing: -0.5px; }
	#rowSingleReceta .divVideo                              { margin: 60px 40px; }
}

@media (max-width:  980px) {
	#rowSingleReceta .divContent                            { padding: 100px 30px 0px 30px; flex-direction: column-reverse; }
	#rowSingleReceta .divDcha                               { padding: 0px; width: 100%; background: none; border-radius: 0px; display: grid; }
	#rowSingleReceta .divDcha                               { grid-template-columns: calc((100% - 20px) / 2) 20px calc((100% - 20px) / 2); grid-template-rows: auto 20px auto 20px auto; }
	#rowSingleReceta .divDcha  hr                           { display: none; }
	#rowSingleReceta .divDcha  .divBloque                   { padding: 20px; border-radius: 20px; }
	#rowSingleReceta .divDcha  .divBloqueDificultad         { grid-row-start: 1; grid-column-start: 1; background: var(--color1-hex); }
	#rowSingleReceta .divDcha  .divBloqueTiempoElaboracion  { grid-row-start: 3; grid-column-start: 1; background: var(--color1-hex); }
	#rowSingleReceta .divDcha  .divBloqueRaciones           { grid-row-start: 5; grid-column-start: 1; background: var(--color1-hex); }
	#rowSingleReceta .divDcha  .divBloqueIngredientes       { grid-row-start: 1; grid-column-start: 3; background: var(--color1-hex); grid-row-end: none; }
	#rowSingleReceta .divDcha  h5                           { letter-spacing: -1px; }
	#rowSingleReceta .divDcha  .divDato li                  { font-size: 20px; }
	#rowSingleReceta .divIzda                               { margin-top: 60px; width: 100%; }
	#rowSingleReceta .divVideo                              { margin: 40px; }
}

@media (max-width:  780px) {
	#rowSingleReceta .divContent                            { padding: 80px 30px 0px 30px; }
	#rowSingleReceta .divDcha                               { grid-template-columns: calc((100% - 10px) / 2) 10px calc((100% - 10px) / 2); grid-template-rows: auto 10px auto 10px auto; }
	#rowSingleReceta .divDcha  .divBloque                   { padding: 15px; border-radius: 10px; }
	#rowSingleReceta .divDcha  h5                           { margin-bottom: 10px !important; letter-spacing: -1px; }
	#rowSingleReceta .divDcha  .divDato                     { font-size: 20px; }
	#rowSingleReceta .divDcha  .divDato li                  { font-size: 18px; }
	#rowSingleReceta .divIzda                               { margin-top: 40px; }
	#rowSingleReceta .divIzda  hr                           { margin: 30px 0px; }
	#rowSingleReceta .divIzda  .divBloqueProceso .divPaso   { margin-bottom: 10px; }
	#rowSingleReceta .divIzda  .divBloqueProceso .divNumero { flex: 0 0 40px; height: 40px; font-size: 24px; }
	#rowSingleReceta .divIzda  .divBloqueProceso .divTexto  { margin-left: 20px; }
	#rowSingleReceta .divVideo                              { margin: 30px; }
}

@media (max-width:  580px) {
	#rowSingleReceta .divContent                            { padding: 60px 20px 0px 20px; }
	#rowSingleReceta .divIzda                               { margin-top: 30px; }
	#rowSingleReceta .divIzda  hr                           { margin: 20px 0px; }
	#rowSingleReceta .divIzda  .divBloqueProceso .divNumero { flex: 0 0 35px; height: 35px; font-size: 20px; }
	#rowSingleReceta .divIzda  .divBloqueProceso .divTexto  { margin-left: 15px; }
	#rowSingleReceta .divVideo                              { margin: 20px 10px 10px 10px; }
	#rowSingleReceta .divVideo h5                           { text-align: center; }
}

@media (max-width:  480px) {
	#rowSingleReceta .divDcha                               { display: block; }
	#rowSingleReceta .divDcha  .divBloque                   { margin-bottom: 10px; }
	#rowSingleReceta .divDcha  .divDato                     { font-size: 18px; }
	#rowSingleReceta .divDcha  .divDato li                  { font-size: 16px; }
	#rowSingleReceta .divDcha  .divBloqueIngredientes       { margin-bottom: 0px; }
	#rowSingleReceta .divIzda  .divBloqueProceso .divNumero { flex: 0 0 30px; height: 30px; font-size: 18px; }
}