/*** Definiciones *********************************************************************************************/
/***
padding: em
font-size: vh
line-height: %
***/

/*** Fonts *********************************************************************************************/
@font-face {
  font-family: 'Recoleta';
  src: url('/fonts/Recoleta-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Latina';
  src: url('/fonts/Latina-LightIt.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Latina';
  src: url('/fonts/Latina-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Latina';
  src: url('/fonts/Latina-UltraLight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Latina';
  src: url('/fonts/Latina-UltraLightIt.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Latina Regular';
  src: url('/fonts/Latina-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Latina Regularit';
  src: url('/fonts/Latina-RegularIt.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poiret One';
  src: url('/fonts/PoiretOne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Big Caslon';
  src: url('/fonts/BigCaslon.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Infant Light';
  src: url('/fonts/CormorantInfant-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* general */
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-family: sans-serif;
  scroll-behavior: smooth;
  height: 100%;
}

body {
  height: 100%;
  min-height: 100%;
  max-width: 1600px;
  margin: 0 auto;
  color: #fff2e0;
  background-color: #575b43;
  font-family: Latina, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1vh;
  font-weight: 300;
  line-height: 120%;
  justify-content: center;
}

/*** secciones ******************************************************************/

.edicion { /* datos de edicion de libros */
	width: 30%;
	float: left;
	display: table;
	height: 70vh;
}

.tapa-seccion {
  height: 100vh;
  cursor: default;
  padding-top: 16vh;
  padding-left: 5vw;
}

#pie {
	height: 10vh;
	margin: 10vh 30vw;
	float: left;
	font-size: 2.5vh;
	display: none;
}
/*** html tags generales ******************************************************************/
a {
  margin-top: 2vh;
  display: inline-block;
  color: inherit;
}
a:hover {
  color: #78bcee;
}
a:active, a:hover {
  outline: 0;
}

img {
  border: 0;
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}
.img-tapa-libro {
	height: 70vh;
	float: left;
}
#foto-bio {
	width: 25vw;
}
.no-pdf {
	height: 10vh;
	font-size: 2vh;
}

/* se usa para las flechas hacia abajo */
svg:not(:root) {
  overflow: hidden;
}

/*** navegación ************************************************************************/

.comenzar {
  float: right;
  padding-top: 60vh;
  padding-right: 8vw;
}

/*** html tags titulos ******************************************************************/

h1, h2, h3 {
  margin-bottom: 10px;
  font-weight: bold;
}
h1 { /* lenguarte */
    margin: .67em 0;
    margin-top: 20px;
    margin-bottom: 10px;
    font-family: Recoleta, sans-serif;
    font-size: 7vh;
    font-weight: 400;
    line-height: 140%;
}
h2 { /* titulo texto */
    margin-top: 20px;
    margin-bottom: 10px;
    font-family: Latina, sans-serif;
    font-size: 5vh;
    font-weight: 300;
    line-height: 120%;
}
h3 { /* subtitulo texto y menú */
  margin-top: 20px;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 8px;
  font-size: 2.8vh;
  font-weight: 300;
  line-height: 120%;
  cursor: pointer;
}

h3:hover {
  color: #78bcee;
}

.titulo-seccion {
  letter-spacing: .02em;
  margin-top: 0;
  font-family: Recoleta, sans-serif;
  font-size: 5vh;
  font-style: italic;
  font-weight: 700;
  line-height: 100%;
}

.titulo-texto {
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 1em;
  font-size: 2em;
  font-style: normal;
  font-weight: bold;
  line-height: 200%;
  display: block;
}

/****** estilos de textos ******************************************************************************/

p {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 2.2vh;
  line-height: 180%;
}

.relato-ppal {
  padding: 0 5vw;
}

.texto-ppal {
  width: 70%;
  max-width: 70%;
  margin: 0 auto;
}

.texto-ppal, .relato-ppal {
  padding-top: 15vh;
  display: block;
  overflow: visible;
}

.text-bio, .text-decl {
	font-style: italic;
}
.text-decl {
	padding-left: 15%;
	padding-right: 15%;
}
.text-edicion {
	display: table-cell;
	vertical-align: bottom;
	padding-left: 10px;
	font-size: 2vh;
	line-height: 150%;
}
.text-edicion a {
	display: inline;
}
.text-c1, .text-bio, .text-decl {
  padding-bottom: 1em;
}

.text-c1.cita {
  text-align: right;
  margin-bottom: 5px;
  padding-top: 1em;
  padding-bottom: 0;
  font-family: Latina, sans-serif;
  font-size: 2.8em;
  font-style: italic;
  font-weight: 200;
}

.autor-cita {
  text-align: right;
  padding-bottom: 15em;
  font-family: Latina, sans-serif;
  font-size: 2vh;
  font-weight: 200;
}

.sinespacio {
  margin-bottom: 0;
  padding-bottom: 0;
}

.text-haiku {
  text-align: right;
  padding-top: 15vh;
  line-height: 200%;
}

/*** formatos de párrafo ***/

.text-centrado {
	text-align: center;
}

.primeralinea {
    text-indent: 0;
}

.sangriafrancesa {
  text-indent: -1.5em;
  padding-left: 1.5em;
}

.espaciadoreducido {
	line-height: 1.5em;
	padding-bottom: 0;
}

.citaextraida {
    padding-left: 3em;
    padding-top: 2em;
    padding-bottom: 2em;
}

/*** espaciado de texto ***/

.tabspan {
  padding-left: 3em;
  display: inline;
}
.halftabspan {
  padding-left: 1.5em;
  display: inline;
}

.text-span {
  font-size: .9em;
}

.text-span-2 {
  font-size: .8em;
}

.text-span-3 {
  font-size: .7em;
}

.text-span-4 {
  font-size: .6em;
}

.text-span-5, .text-span-6, .text-span-7, .text-span-8, .text-span-9, .text-span-10 {
  font-style: italic;
  font-weight: 300;
}

/*** separadores de texto ***/

.separador {
  text-align: center;
  margin-top: 20vh;
  font-size: 1.8em;
  line-height: 100%;
}

.separador.mirra {
  color: #a68b52;
  background-color: #fff2e0;
}

/*** Sin identificar *********************************************************************/

@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*** MENU *********************************************************************/

#menu-inicio {
  min-height: 95%;
    height: 95%;
  min-width: 25%;
    width: 25%;
  max-width: 25%;
  float: left;
  flex-flow: column;
  flex: none;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 5vh;
  margin-left: 3%;
  margin-right: 0;
  padding-right: 0;
  display: block;
}

.tit-menu {
  margin: 0;
  padding-bottom: 2vh;
  font-size: 3vh;
  font-style: normal;
  font-weight: 300;
  line-height: 90%;
  color: #fff;
  text-transform: lowercase;
  cursor: pointer;
}
.tit-menu:hover {
  color: #78bcee;
}

.menu-menu {
  height: 75%;
  justify-content: flex-end;
  align-items: flex-end;
}

.menu-logo, .menu-pie {
  height: 10%;
}

.instagram {
  color: #fff2e0;
  letter-spacing: 1.8px;
  margin-top: 0;
  font-family: Latina, sans-serif;
  font-size: 2.4vh;
  font-style: italic;
  font-weight: 200;
  text-decoration: none;
}

.lista-menu {
  margin-top: 10px;
  margin-bottom: 20px;
  padding-left: 0;
  font-family: Latina, sans-serif;
  font-style: italic;
  font-weight: 300;
  display: none;
  overflow: visible;
}

/*** DIVs de contenido *********************************************************************/

.contenido, .conTopMarg {
  min-width: 65vw;
    width: 65vw;
  max-width: 65vw;
  float: left;
  display: none;
  overflow: scroll;
}

.contenido {
    min-height: 100vh;
      height: 100vh;
}
.conTopMarg {
    min-height: 85vh;
      height: 85vh;
    margin-top: 15vh;
}
/*.relato {
  padding-left: 15%;
  padding-right: 15%;
  }*/
.relato {
  display: none;
}

/*** colores textos **************************************************************************************/
.lenguarte {
  color: #575b43;
  background-color: #fff2e0;
}
.lenguarteT {
  color: #575b43;
}
.lenguartei {
  color: #fff2e0;
  background-color: #575b43;
}

.aquafilosofico {
  color: #51a6a6;
  background-color: #edefff;
}
.aquafilosoficoT {
  color: #51a6a6;
}
.aquafilosoficoi {
  color: #edefff;
  background-color: #51a6a6;
}

.celesteculturarg {
  color: #5185A6;
  background-color: #edefff;
}
.celesteculturargT {
  color: #5185A6;
}
.celesteculturargi {
  color: #edefff;
  background-color: #5185a6;
}

.azulurbano {
  color: #4B7799;
  background-color: #edefff;
}
.azulurbanoT {
  color: #4B7799;
}
.azulurbanoi {
  color: #edefff;
  background-color: #4b7799;
}

.marronhumano {
    color: #B37A4F;
    background-color: #fff2e0;
}
.marronhumanoT {
    color: #B37A4F;
}
.marronhumanoi {
  color: #fff2e0;
  background-color: #b37a4f;
}

.tierranortena {
  color: #BD9153;
  background-color: #fff2e0;
}
.tierranortenaT {
  color: #BD9153;
}
.tierranortenai {
  color: #fff2e0;
  background-color: #bd9153;
}

.mirraoriental {
    color: #A68B52;
    background-color: #fff2e0;
}
.mirraorientalT {
    color: #A68B52;
}
.mirraorientali {
  color: #fff2e0;
  background-color: #a68b52;
}

.verdenatural {
    color: #99AD50;
    background-color: #DFF2E1;
}
.verdenaturalT {
    color: #99AD50;
}
.verdenaturali {
  color: #DFF2E1;
  background-color: #99AD50;
}

.experimental {
    color: #8F74A6;
    background-color: #F5EDFF;
}
.experimentalT {
    color: #8F74A6;
}
.experimentali {
  color: #F5EDFF;
  background-color: #8F74A6;
}

.palabrapresenteT {
	color: #5cb5c4;
}

/*********************************************************************************************************/

.autor {
  cursor: default;
  margin-bottom: 2px;
  font-family: Latina, sans-serif;
  font-size: 3.5vh;
  font-style: italic;
  font-weight: 200;
  line-height: 120%;
}

.marca {
  cursor: default;
}

.contenedor {
  width: 100%;
  height: 100%;
}

/*** tablet ***********************************************************************************************/
@media screen and (max-width: 991px) {
  .body {
    max-width: 768px;
    font-size: 1.5vw;
  }

  .relato {
    max-width: 70%;
  }
}

/*** celular apaisado *************************************************************************************/
@media screen and (max-width: 767px) {
  .body {
    font-size: 2vw;
  }

  .relato {
    max-width: 80%;
  }
}

/***** CELULARES ********************************************************************************/
@media screen and (max-width: 479px) {
  body {
    font-size: 3vh;
  }
  #bio {
	  width: 100%;
  }
  #foto-bio {
	  width: 50vw;
	  margin-left: 6vw;
  }
  .conTopMarg {
	  min-width: unset;
	  width: unset;
	  max-width: unset;
  }
  .titulo-seccion {
	  font-size: 4vh;
  }
  .rm {
	  min-width: 100vw;
	  margin-left: -15vw;
	  margin-top: 5vh;
  }
  .contenido {
    min-width: 100vw;
	overflow: unset;
	min-height: unset;
	height: unset;
  }
  .relato {
      width: 100%;
      min-width: 100%;
  }
  .edicion {
	  width: 90%;
	  height: unset;
	  margin-top: 5vh;
  }
  .text-edicion {
	  vertical-align: unset;
  }
  .libro .comenzar {
	  padding-top: unset;
  }
  #menu-inicio {
    min-width: 95vw;
    margin-left: 5vw;
  }
  .lista-menu {
    display: none;
  }
}