@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono&family=IBM+Plex+Sans:ital,wght@0,300;1,300&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative&display=swap');

/* create a variable at root scope (global) */
:root {
 --myGrey: #808080;
 --myGreyFiletes: #E8E8E8;
 --myBlack: #181818;
 --myWhite: #ffffff; 
}


* {
  margin: 0;
  padding: 0;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  --scroll-behavior: smooth;
}

body {
	max-width: 100vw;
	overflow-x: hidden;
	font-family: 'Cormorant Garamond', serif;
	font-size: 16px; 
	line-height: 1.3;
	font-weight: 400;
	color:var(--myBlack);
	background-color: var(--myWhite);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*--------------------------------------------------------------
## General UI Styles
--------------------------------------------------------------*/

a {
	color: var(--myBlack);
	text-decoration: none;
	transition-property:all .2s linear 0s;
	-moz-transition:all .2s linear 0s;
	-webkit-transition:all .2s linear 0s;
	-o-transition:all .2s linear 0s;	
}

a:hover {
	color: var(--myBlack);
	text-decoration: underline;
}


.bg-white {
	background-color: var(--myWhite);	
}

.bg-grey {
	background-color: WhiteSmoke;
}

.foliado, .taxonomy, .volver {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.750rem;
}

.taxonomy { text-transform: uppercase; }

h2.title { 
	font-size: 1.5rem;
	font-weight: 400;
	font-family: 'Cinzel Decorative', cursive;
	border-bottom: 1px solid black;
	text-decoration: none;
	text-decoration-skip: objects;
	text-decoration-thickness: 1px;
	display: inline-block;
	margin-bottom: 1.5rem;
}

p {
	font-family: 'Cormorant Garamond', serif;
	font-size: 1.750rem; 
	line-height: 1.4;
	font-weight: normal;
}

.epigrafes {
	font-size: 0.875rem; 
	line-height: 1.7;
	color:var(--myGrey);
	font-family: 'IBM Plex Sans', sans-serif;
}

.epigrafes a{
	display: block;
}


.section,
.slides__slide {
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;	
}

/*--------------------------------------------------------------
## Fullpage css
--------------------------------------------------------------*/

.fp-controlArrow {
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
    position: absolute;
    z-index: 4;
    top: 50%;
    cursor: pointer;
    width: 0;
    height: 0;
    border-style: solid;
    margin-top: -38px;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.fp-controlArrow.fp-prev {
    left: 60px;
    border: none;
    width: 60px;
    height: 60px;
    background: url('img/previous.png') no-repeat center center;
    cursor: pointer;
}
.fp-controlArrow.fp-next {
    right: 60px;
    border: none;
    width: 60px;
    height: 60px;
    background: url('img/next.png') no-repeat center center;
    cursor: pointer;
}


/*--------------------------------------------------------------
## Section 1 - Portada
--------------------------------------------------------------*/

#section0 {
	background-image: url('img/portada.jpg');
	background-size: cover;

}

.sidenav {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  color: var(--myWhite);
  height: 100%; /* 100% Full-height */
  width: 100%; /* 0 width - change this with JavaScript */
  position: absolute; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  left: 0;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 0; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-flow: row wrap;
}

.sidenav a {
	text-decoration: none;
	color: var(--myWhite);
	display: block;
}

/* Logo */

.booktitle {
	text-transform: uppercase;
	font-size: 1.313em;
	line-height: 1;
	position: fixed;
	top: 1.500rem;
	left: 2.000rem;
	font-weight: 600;
	z-index: 9;
}

.booktitle:hover {
	text-decoration: none;
}

/* Menu */

.menu {
  position: absolute;
  bottom: 2.000rem;
  left: 2.000rem;
  font-family: 'Cinzel Decorative', cursive;

/* font-family: 'Cormorant Unicase', serif;
font-weight: 300; */
 
}

.menu a {
	font-size: 4.000rem;
	line-height: 1.1;
}

.menu a:hover {
	color: var(--myBlack);
	margin-left: 3rem;
}
.menu a span {
	font-size: 1rem;
	font-family: 'IBM Plex Mono', monospace;
}

.menu a:hover span {
	font-style: normal;
}
/*
	
.menu a:last-child {
	font-size: 1.125rem;
	font-weight: 600;
	margin-top: 2.5rem;
	font-family: 'Cormorant Garamond', serif;
}
 
.menu a:last-child:hover {
	font-style: normal;
	text-decoration: underline;
}*/

/* Link a redes */

.social {
  position: absolute;
  bottom: 2.000rem;
  right: 3.000rem;
}
.social a {
	font-size: 1.125rem;
	line-height: 1.5;
	display: inline;
	font-weight: 600;
}
.social a:hover {
	color: var(--myBlack);
  text-decoration: underline;
}



/*--------------------------------------------------------------
## Section 2 - Libro
--------------------------------------------------------------*/


/* SINOPSIS */



/* MOCKUPS */



/* REFERENCIAS */

h1 {
	font-size: 1.750rem; 
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
}

.referencias p {
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 0.750rem; 
	line-height: 1.3;
	color:var(--myGrey);	
}

.box {
	height: 80vh;
}

.scrollable-element{
    height: 400px;
    overflow-y: scroll;
}

.outdent li {
	font-size: 0.875rem; 
	line-height: 1.4;
	color:var(--myGrey);
	font-family: 'IBM Plex Sans', sans-serif;
	padding-left: 1.5em;
	text-indent: -1.5em;
	list-style: none;
	margin: 0;
}

/*--------------------------------------------------------------
## Section 3 - Look Inside
--------------------------------------------------------------*/

/* INTRO */


/* DOUBLE-SPREADS GALLERY */
.doble {
	box-shadow: 1px -2px 5px 0px rgba(189,189,189,0.49);
	-webkit-box-shadow: 1px -2px 5px 0px rgba(189,189,189,0.49);
	-moz-box-shadow: 1px -2px 5px 0px rgba(189,189,189,0.49);
}


/*--------------------------------------------------------------
## Section 4 - Autor
--------------------------------------------------------------*/

.autor p {
	font-size: 1.250rem; 
	line-height: 1.6;
}

.epigrafes .nav-link {
	padding: 0.125rem 0;
}

.epigrafes a:hover {
	text-decoration: underline;
}
.circulo {
	border-radius: 50%;
	margin-top: -2rem;
}

/*--------------------------------------------------------------
## Section 5 - Comprar Libro
--------------------------------------------------------------*/
.formas-de-pago a {text-decoration: none;font-style: italic; }
.formas-de-pago a.btn {font-style: normal; }

.formas-de-pago a:hover {
	border-bottom: 1px solid black;
	text-decoration: none;
	text-decoration-skip: objects;
	text-decoration-thickness: 1px;
}
.formas-de-pago .btn,
#section4 .btn {
	border-radius: 0;
	font-size: 0.875em;
	text-transform: uppercase;
	font-family: 'IBM Plex Mono', monospace; 	
}

.promo, .promo a, .promo a:hover { color: #DC143C; }
.promo a:hover {
	border-bottom: 1px solid #DC143C;
}


/* Reset bootstrap btn styles */

.btn-dark {
  color: #fff;
  background-color: var(--myBlack);
  border-color: var(--myBlack);
}

.btn-dark:hover {
  color: var(--myBlack);
  border-color: var(--myBlack);
  background-color: transparent;
}

.btn-dark:focus, .btn-dark.focus {
  box-shadow: none;
}

/*--------------------------------------------------------------
## Section 6 - Free Sample
--------------------------------------------------------------*/
#section4 { background-image: url('img/sample.jpg'); }

#section5 p {
	font-size: 1.313rem;
	font-weight: 500;
}

/*--------------------------------------------------------------
## FOOTER
--------------------------------------------------------------*/

footer { align-items: flex-start; }

footer p {
	font-size: 0.750rem; 
	font-family: 'IBM Plex Sans', sans-serif;	
}

/*--------------------------------------------------------------
## SCROLL TO TOP
--------------------------------------------------------------*/

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: black; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 50%; /* Rounded corners */
  width: 54px;
  height: 54px;
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

/*--------------------------------------------------------------
## 12 Point Burst Shape
--------------------------------------------------------------*/

#burst-12 {
  background-color: var(--myBlack);
  width: 80px;
  height: 80px;
  text-align: center;
  position: fixed; /* Fixed/sticky position */
  top: 30px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
}
#burst-12:before,
#burst-12:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 80px;
  background-color: var(--myBlack);
}
#burst-12:before {
  transform: rotate(30deg);
}
#burst-12:after {
  transform: rotate(60deg);
}
#burst-12 span {
	 color: var(--myWhite);
	 display:block;
	 height:40px;
	 position:absolute;
	 top:50%;
	 margin-top:-20px;
	 z-index:10;
	font-size: 1rem;
	text-transform: uppercase;
	font-family: 'IBM Plex Mono', monospace; 
}
#burst-12:hover {
  transform: rotate(5deg);
}
#burst-12:hover:before {
  transform: rotate(35deg);
}
#burst-12:hover:after {
  transform: rotate(65deg);
}

/*--------------------------------------------------------------
## Mediaqueries
--------------------------------------------------------------*/

/* // Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {

	
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 
		
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  
		
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
	
}