/*
	CSS personalizado para 02 TEATRO
*/

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

/*    Azul oscuro: 236089 rgb( 35, 96,137)*/
/*           Gris: 999999 rgb(153,153,153)*/
/*     Azul medio: 95A3BB rgb(149,163,187)*/
/*     Azul claro: CAD1DD rgb(202,209,221)*/
/* Azul muy claro: E4E8EE rgb(228,232,238)*/

/*           Azul: 4691B0 rgb( 70,145,176)*/
/*          Beige: E3C4A7 rgb(227,196,167)*/
/*        Magenta: 883848 rgb(136, 56, 72)*/

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

/*************************************** #rowTeatroDownload **************************************/

#rowTeatroDownload { margin: 0px; padding: 0px !important; } /*Tiene que ser así*/

#rowTeatroDownload .divTeatroDownload { margin: 60px 0px; display: flex; }
#rowTeatroDownload .divDocumentacion  { margin-right: 30px; width: calc(50% - 30px); }
#rowTeatroDownload .divDatosTecnicos  { margin-left:  30px; width: calc(50% - 30px); }
#rowTeatroDownload .divDocumentos     { display: flex; flex-wrap: wrap; justify-content: center; }
#rowTeatroDownload .aPDF              { margin: 20px; padding: 2px; width: 100px; display: flex; flex-direction: column; align-items: center; text-align: center; }
#rowTeatroDownload .aPDF              { font-family: var(--font-family-normal-roboto); font-size: 14px; font-weight: 500; line-height: 120%; border: inset 1px rgba(0,0,0,0); }
#rowTeatroDownload .aPDF:before       { content: ""; width: 48px; height: 54px; }
#rowTeatroDownload .aPDF:before       { background: url("/wp-content/uploads/icono_pdf.png"); background-repeat: no-repeat; background-size: contain; }
#rowTeatroDownload .aPDF:hover        { color: var(--color1-hex); background: rgba(var(--colorAzul-rgb),0.2); border: inset 1px rgba(var(--colorAzul-rgb),0.5); }

@media (max-width: 1080px) {
	#rowTeatroDownload .divTeatroDownload { margin: 50px 0px; }
	#rowTeatroDownload .divDocumentacion  { margin-right: 20px; width: calc(50% - 20px); }
	#rowTeatroDownload .divDatosTecnicos  { margin-left:  20px; width: calc(50% - 20px); }
}

@media (max-width: 980px) {
	#rowTeatroDownload .divTeatroDownload { margin: 40px 0px; }
	#rowTeatroDownload .aPDF              { margin: 10px; }
}

@media (max-width: 780px) {
	#rowTeatroDownload .divTeatroDownload { flex-wrap: wrap; }
	#rowTeatroDownload .divDocumentacion  { margin-right: 0px; width: 100%; }
	#rowTeatroDownload .divDatosTecnicos  { margin-top: 20px; margin-left:  0px; width: 100%; }
}

@media (max-width: 580px) { #rowTeatroDownload .aPDF { margin: 10px 5px; } }

@media (max-width: 480px) {
	#rowTeatroDownload .aPDF        { width: 80px; font-family: var(--font-family-narrow); font-size: 13px; }
	#rowTeatroDownload .aPDF:before { width: 32px; height: 36px; }
}

/*************************************** #rowTeatroHistorico *************************************/

#rowTeatroHistorico { margin: 0px; padding: 0px !important; } /*Tiene que ser así*/

#rowTeatroHistorico .divTeatroHistorico { margin-bottom: 60px; display: flex; justify-content: center; }
#rowTeatroHistorico .aButton            { padding: 10px 100px; font-family: var(--font-family-normal); font-size: 24px; background: var(--color1-hex); border-radius: 20px; }
#rowTeatroHistorico .aButton:hover      { color: #FFFFFF !important; background: var(--color3-hex); transform: scale(1.1); }

@media (max-width: 780px) { #rowTeatroHistorico .aButton { padding: 10px 80px; font-size: 20px; } }
@media (max-width: 680px) { #rowTeatroHistorico .aButton { padding: 10px 60px; border-radius: 15px; } }
@media (max-width: 480px) { #rowTeatroHistorico .aButton { padding: 10px 40px; font-size: 18px; border-radius: 10px; } }
@media (max-width: 380px) { #rowTeatroHistorico .aButton { padding: 10px 20px; font-size: 16px; } }

/*************************************** #rowTeatroHistoria **************************************/

#rowTeatroHistoria { margin: 0px; padding: 0px !important; } /*Tiene que ser así*/

#rowTeatroHistoria .divTeatroHistoria { margin-bottom: 60px; }
#rowTeatroHistoria .divTexto          { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; }
#rowTeatroHistoria .divTexto img      { position: relative; margin: 30px; width: calc(50% - 60px); border: solid 8px #FFFFFF; }
#rowTeatroHistoria .divTexto p        { margin: 30px; width: calc(50% - 60px); font-size: 14px; text-align: justify; }
#rowTeatroHistoria .divTexto p br     { line-height: 200%; }
#rowTeatroHistoria .divFotos          { display: flex; align-items:center; justify-content: space-between; }
#rowTeatroHistoria .divFotos img      { max-width: 30%; border: solid 4px #FFFFFF; }
#rowTeatroHistoria .divLeerMas        { margin-bottom: 20px; font-size: 24px; text-align: center; }
#rowTeatroHistoria .divFrase          { margin-top: 40px; font-size: 16px; font-style: italic; text-align: center; }

@media (max-width: 980px) {
	#rowTeatroHistoria .divTexto                    { margin-top: 30px; display: block; }
	#rowTeatroHistoria .divTexto img                { width: auto; max-width: 400px; }
	#rowTeatroHistoria .divTexto p                  { width: auto; }
	#rowTeatroHistoria .divTexto img:nth-of-type(1) { margin:  0px 20px 20px 0px; float: left; }
	#rowTeatroHistoria .divTexto p:nth-of-type(1)   { margin:  0px  0px 20px 0px; }
	#rowTeatroHistoria .divTexto p:nth-of-type(2)   { margin: 20px  0px 20px 0px; }
	#rowTeatroHistoria .divTexto img:nth-of-type(2) { margin: 20px  0px 20px 0px; float:  left; width: calc(50% - 20px) }
	#rowTeatroHistoria .divTexto img:nth-of-type(3) { margin: 20px  0px 20px 0px; float: right; width: calc(50% - 20px) }
	#rowTeatroHistoria .divTexto p:nth-of-type(3)   { margin: 20px  0px  0px 0px; clear: both; }
	#rowTeatroHistoria .divLeerMas                  { margin-top: 20px; }
	#rowTeatroHistoria .divFotos img                { max-width: 32%; border: solid 2px #FFFFFF; }
}

@media (max-width: 780px) {
	#rowTeatroHistoria .divTexto img { max-width: 300px; }
	#rowTeatroHistoria .divLeerMas   { font-size: 18px; }
	#rowTeatroHistoria .divFrase     { margin-top: 30px; }
}

@media (max-width: 580px) {
	#rowTeatroHistoria               { padding: 0px !important; }
	#rowTeatroHistoria .divTexto img { margin: 10px 0px !important; float: none !important; width: 100% !important; max-width: none !important; }
	#rowTeatroHistoria .divTexto p   { margin: 10px 0px !important; width: 100% !important; }
	#rowTeatroHistoria .divFotos     { flex-wrap: wrap; justify-content: center; }
	#rowTeatroHistoria .divFotos img { margin: 10px; max-width: 40%; }
}

@media (max-width: 480px) { #rowTeatroHistoria .divFotos img { margin: 5px; max-width: 45%; } }
@media (max-width: 380px) { #rowTeatroHistoria .divFotos img { max-width: 80%; } }

/*************************************** #rowTeatroGallery ***************************************/

#rowTeatroGallery .divGallery              { padding-top: 40px; display: flex; flex-wrap: wrap; justify-content: center; }
#rowTeatroGallery .divGallery *            { line-height: 0px; }
#rowTeatroGallery .divGallery .divFoto     { position: relative; width: 20%; overflow: hidden; }
#rowTeatroGallery .divGallery .divFoto a   { display: grid; }
#rowTeatroGallery .divGallery .divFoto img { -webkit-transition: all 4s ease; transition: all 1s ease; }

#rowTeatroGallery .divGallery .divFoto a:before       { content: ""; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.7); opacity: 0; z-index: 1; }
#rowTeatroGallery .divGallery .divFoto a:before       { -webkit-transition: all 2s ease; transition: all 2s ease; }
#rowTeatroGallery .divGallery .divFoto a:after        { content: "\f00e"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0; z-index: 2; }
#rowTeatroGallery .divGallery .divFoto a:after        { font-family: "FontAwesome"; font-size: 40px; color: #FFFFFF;  -webkit-transition: all 3s ease; transition: all 3s ease; }
#rowTeatroGallery .divGallery .divFoto a:hover:before { opacity: 1; }
#rowTeatroGallery .divGallery .divFoto a:hover:after  { opacity: 1; }
#rowTeatroGallery .divGallery .divFoto a:hover img    { transform: scale(1.5) rotate(-10deg); }

@media (max-width: 980px) { #rowTeatroGallery .divGallery .divFoto { width: 25%; } }
@media (max-width: 780px) { #rowTeatroGallery .divGallery .divFoto { width: 33.33%; } }
@media (max-width: 580px) { #rowTeatroGallery .divGallery .divFoto { width: 50%; } }
@media (max-width: 380px) { #rowTeatroGallery .divGallery .divFoto { width: 100%; } }