@import url('https://fonts.googleapis.com/css?family=Cardo:400,400i,700&display=swap');
 @import url('https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css');
/* * Imports */
/* * Variables */
/* Single Line truncation */
/* Multiline truncation */
/* * Global styles */

:root {
    --claro: #f9f9ef;
    --obscuro: #212121;
    --texto: #223328;
    --link: #9e9e9e;
    --verde: #2c4413;
}

 body {
	 font-family: 'Cardo', serif;
	 color: var(--texto);
}
 .row {
	 max-width: 1024px;
}
/* * Typography */
 body, p, a, li {
	 font-family: 'Cardo', serif;
	 font-size: 15px;
     letter-spacing: 1px;
}
 a {
	 color: var(--link);;
     text-decoration: none;
}
h1 {
    font-size: 30px;
}
 h2, h3 {
	 margin-top: 6px;
	 margin-bottom: 6px;
	 font-size: 28px;
	 font-weight: bold;
	 letter-spacing: 1px;
	 color: #223328;
}
 h2 {
	 font-size: 28px;
}
 h3 {
	 font-size: 24px;
}
 h4 {
	 margin-bottom: 12px;
	 font-size: 22px;
	 line-height: 40px;
	 color: rgba(49, 49, 49, 0.7);
}
 p:not(.author) {
	 font-size: 15px;
	 font-weight: 300;
	 line-height: 1.4;
}
 p.author {
	 margin-bottom: 10px;
	 letter-spacing: 1.5px;
	 font-weight: 400;
	 color: rgba(49, 49, 49, 0.5);
}
/* * Button */
 a.button {
	 margin-bottom: 0;
	 padding: 8px 14px;
	 font-size: 14px;
	 font-weight: 600;
	 border-radius: 3px;
	 background-color: rgba(49, 49, 49, 0.5);
     color: white;
}
 a.button:hover, a.button:focus {
	 background-color: #219e9a;
}
/* * Header */
 .page-header {
	 position: fixed;
	 width: 100%;
     top:0;
     z-index: 9999;
}

element.style {
}
header#header:before {
    content: "";
    background: #ffffffd6;
    width: 100vw;
    height: 100%;
    position: absolute;
    top: -50%;
    left: 0;
    border-radius: 50%;
    box-shadow: 0px 10px 10px 10px #ffffffd6;
    filter: blur(15px);

}
.page-header-container.row {
    display: flex;
    justify-content: center;
    max-width: 100vw;
    align-items: center;

}
 .main-logo {
	 display: none;
	 padding: 1em;
	 width: auto;
}
body div.landing .main-logo {
    display: block !important;
}

a.logo img {
    max-width: 200px;
    filter: drop-shadow(1px 1px 0.5px white)
}
 .menu-search {
	 float: right;
}
/* * Search Input */
 .catalog-search {
	 position: relative;
	 margin: 0 20px;
	 max-width: 275px;
	 width: calc(100% - 2em);
	 vertical-align: top;
	 overflow: hidden;
	 float: right;
}
 .input_field {
	 position: relative;
	 display: block;
	 float: right;
	 margin-top: 10px;
	 padding: 14px 7px 0;
	 width: 100%;
	 border: none;
	 border-radius: 0;
	 color: #313131;
	 font-weight: normal;
	 font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	 background: none;
	 box-shadow: none;
	 -webkit-appearance: none;
	/* for box shadows to show on iOS */
}
 .input_field:focus {
	 outline: none;
	 border: none;
	 background: none;
	 box-shadow: none;
	 -webkit-appearance: none;
}
 .input_field:focus .input_label-content {
	 bottom: 20px;
}
 .input_label {
	 position: absolute;
	 display: inline-block;
	 bottom: 0;
	 left: 0;
	 padding: 0 0.25em;
	 width: 100%;
	 height: calc(100% - 1em);
	 color: #d2d6d5;
	 font-weight: light;
	 font-size: 15px;
	 text-align: left;
	 pointer-events: none;
	 -webkit-font-smoothing: antialiased;
	 -moz-osx-font-smoothing: grayscale;
	 -webkit-touch-callout: none;
	 user-select: none;
}
 .input_label:before {
	 content: '';
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: calc(100% - 10px);
	 border-bottom: 1px solid rgba(49, 49, 49, 0.45);
}
 .input_label:after {
	 content: '';
	 position: absolute;
	 top: 0;
	 left: 0;
	 margin-top: 2px;
	 width: 100%;
	 height: calc(100% - 10px);
	 border-bottom: 3px solid #219e9a;
	 transform: translate3d(-100%, 0, 0);
	 transition: transform 0.3s;
}
 .input_label-content {
	 position: absolute;
	 width: 100%;
	 bottom: 14px;
}
 .input_label-search {
	 position: relative;
	 display: block;
	 color: rgba(49, 49, 49, 0.45);
}
 .input_label-search:after {
	 content: '\f002';
	 position: absolute;
	 top: 7px;
	 right: 5px;
	 font-family: 'fontawesome';
}
 .input_field:focus + .input_label::after, .input--filled .input_label::after {
	 -webkit-transform: translate3d(0, 0, 0);
     -o-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
	 transform: translate3d(0, 0, 0);
}
 .input_field:focus + .input_label .input_label-content, .input--filled .input_label-content {
	 -webkit-animation: anim-1 0.3s forwards;
    -moz-animation: anim-1 0.3s forwards;
    -o-animation: anim-1 0.3s forwards;
    animation: anim-1 0.3s forwards;
}
 @-webkit-keyframes anim-1 {
	 50% {
		 opacity: 0;
		 -webkit-transform: translate3d(1em, 0, 0);
         -moz-transform: translate3d(1em, 0, 0);
         -o-transform: translate3d(1em, 0, 0);
		 transform: translate3d(1em, 0, 0);
	}
	 51% {
		 opacity: 0;
		 -webkit-transform: translate3d(-1em, -40%, 0);
         -moz-transform: translate3d(-1em, -40%, 0);
         -o-transform: translate3d(-1em, -40%, 0);
		 transform: translate3d(-1em, -40%, 0);
	}
	 100% {
		 opacity: 1;
		 -webkit-transform: translate3d(0, -40%, 0);
         -moz-transform: translate3d(0, -40%, 0);
         -o-transform: translate3d(0, -40%, 0);
		 transform: translate3d(0, -40%, 0);
	}
}
 @keyframes anim-1 {
	 50% {
		 opacity: 0;
		 bottom: 24px;
		 -webkit-transform: translate3d(5em, 0, 0);
         -moz-transform: translate3d(5em, 0, 0);
         -o-transform: translate3d(5em, 0, 0);
		 transform: translate3d(5em, 0, 0);
	}
	 51% {
		 opacity: 0;
		 bottom: 24px;
		 -webkit-transform: translate3d(-5em, -40%, 0);
         -moz-transform: translate3d(-5em, -40%, 0);
         -o-transform: translate3d(-5em, -40%, 0);
		 transform: translate3d(-5em, -40%, 0);
	}
	 100% {
		 opacity: 1;
		 bottom: 24px;
		 -webkit-transform: translate3d(0, -40%, 0);
         -moz-transform: translate3d(0, -40%, 0);
         -o-transform: translate3d(0, -40%, 0);
		 transform: translate3d(0, -40%, 0);
	}
}
/* * Menu */
 .main-navigation {
	 position: relative;
	 float: right;
	 margin: 16px 0;
	 padding: 0 20px;
	 height: 40px;
	 border-left: 1px solid #d2d6d5;
}
 .main-navigation a {
	 display: inline-block;
	 line-height: 40px;
	 vertical-align: middle;
	 font-size: 14px;
	 font-weight: bold;
	 text-transform: uppercase;
	 color: #313131;
}
 .main-navigation a:before {
	 content: '\f0c9';
	 position: relative;
	 display: inline-block;
	 padding-right: 10px;
	 font-family: "fontawesome";
	 font-size: 18px;
	 font-weight: 400;
	 color: rgba(49, 49, 49, 0.45);
	 vertical-align: middle;
}
/* * Off Canvas Menu */
 .main-container {
	 position: relative;
	 overflow-x: hidden;
}
 .main-container.prevent-scroll, .main-container.nav-menu-open {
	 overflow: hidden;
}
 .nav-menu {
	 position: absolute;
	 top: 0;
	 right: 0;
	 z-index: 100;
	 visibility: visible;
	 width: 300px;
	 height: 100%;
	 background: #219e9a;
	 -webkit-transition: all 0.5s;
	 transition: all 0.5s;
	 -webkit-transform: translate3d(100%, 0, 0);
	 transform: translate3d(100%, 0, 0);
}
 .nav-menu:after {
	 position: absolute;
	 top: 0;
	 right: 0;
	 width: 100%;
	 height: 100%;
	 background: rgba(0, 0, 0, 0.2);
	 content: '';
	 opacity: 1;
	 -webkit-transition: opacity 0.5s;
	 transition: opacity 0.5s;
	 display: none;
}
 .nav-menu h2 {
	 margin: 0;
	 padding: 1em;
	 color: rgba(0, 0, 0, 0.4);
	 text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
	 font-weight: 300;
	 font-size: 2em;
}
 .nav-menu ul {
	 margin: 0;
	 padding: 0;
	 list-style-type: none;
}
 .nav-menu li a {
	 display: block;
	 padding: 1em 1em 1em 1.2em;
	 outline: none;
	 box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
	 color: #f3efe0;
	 text-transform: uppercase;
	 text-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
	 letter-spacing: 1px;
	 font-weight: 400;
	 -webkit-transition: background 0.3s, box-shadow 0.3s;
	 transition: background 0.3s, box-shadow 0.3s;
}
 .nav-menu li:first-child a {
	 box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2), inset 0 1px rgba(0, 0, 0, 0.2);
}
 .nav-menu li:hover {
	 background: rgba(0, 0, 0, 0.2);
	 box-shadow: inset 0 -1px rgba(0, 0, 0, 0);
	 color: #fff;
}
 .nav-menu-open .nav-menu {
	 visibility: visible;
	 -webkit-transform: translate3d(0, 0, 0);
	 transform: translate3d(0, 0, 0);
}
 .nav-menu-open .nav-menu:after {
	 width: 0;
	 height: 0;
	 opacity: 0;
	 -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
	 transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}
/* * book List */
 .toolbar {
	 margin-bottom: 30px;
	 border-bottom: 1px solid #d2d6d5;
}
 .toolbar select {
	 margin-bottom: 7px;
	 color: #313131;
	 font-size: 14px;
	 border: none;
	 background-color: transparent;
}
 .toolbar .filter-options {
	 line-height: 40px;
}
 .toolbar a.filter-item {
	 margin-right: 16px;
	 padding-bottom: 18px;
	 font-size: 14px;
	 color: #313131;
	 border-bottom: 0px solid transparent;
	 transition: all 250ms ease-out;
}
 .toolbar a.filter-item:last-child {
	 margin-right: 0;
}
 .toolbar a.filter-item.active {
	 padding-bottom: 15px;
	 color: #219e9a;
	 font-weight: bold;
	 border-bottom: 3px solid #219e9a;
}
 #grid {
	 margin-bottom: 60px;
     margin: auto;
     padding: 0;
}
 .book-item {
    margin: 15px 0;
    padding: 15px;
    list-style-type: none;
    height: 100%;
     display: flex;
    flex-wrap: wrap;
}
 .book-item:hover .item-img img {
	 box-shadow: 0px 0px 10px 0px rgba(49, 49, 49, 0.25);
}
 .book-item:hover a.button {
	 background-color: #219e9a;
}
 .book-item:hover .bk-bookdefault {
	 -webkit-transform: rotate3d(0, 1, 0, 25deg);
	 transform: rotate3d(0, 1, 0, 25deg);
}
 .book-item:hover .bk-back {
	 opacity: 1;
}
 .book-item .item-img {
	 display: inline-block;
	 float: left;
	 padding-right: 30px;
}
 .book-item .item-img img {
	 box-shadow: 0 0 0 0 transparent;
	 transition: all 250ms ease-out;
}
 .book-item .item-details {
    padding-right: 30px;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: center;
     width: calc(100% - 360px);
     transition: all 0.5s ease-in-out;
}
 .book-item h3 {
	 white-space: nowrap;
	 text-overflow: ellipsis;
}
 .book-item h3.subtitle {
	 white-space: break-spaces;
}
 .book-item p:not(.author) {
    display: block;
    display: -webkit-box;
    font-size: 15px;
    line-height: 1.4;
}
/* * Book Rotate */
 .bk-img {
	 position: relative;
	 display: flex;
     align-items: center;
     float: left;
	 padding-right: 30px;
	 list-style: none;
    transition: all 0.5s ease-in-out;
	/* Individual style & artwork */
}
 .bk-img .bk-wrapper {
	 position: relative;
	 width: 300px;
	 height: 480px;
	 float: left;
	 z-index: 1;
	 -webkit-perspective: 1400px;
	 perspective: 1400px;
}
 .bk-img .bk-wrapper:last-child {
	 margin-right: 0;
}
 .bk-img .bk-book {
	 position: absolute;
	 width: 100%;
	 height: 215px;
	 -webkit-transform-style: preserve-3d;
	 transform-style: preserve-3d;
	 -webkit-transition: -webkit-transform 0.5s;
	 transition: transform 0.5s;
}
 .bk-img .bk-book > div, .bk-img .bk-front > div {
	 display: block;
	 position: absolute;
}
 .bk-img .bk-front {
	 -webkit-transform-style: preserve-3d;
	 transform-style: preserve-3d;
	 -webkit-transform-origin: 0% 50%;
	 transform-origin: 0% 50%;
	 -webkit-transition: -webkit-transform 0.5s;
	 transition: transform 0.5s;
	 -webkit-transform: translate3d(0, 0, 20px);
	 transform: translate3d(0, 0, 20px);
	 z-index: 10;
}
 .bk-img .bk-front > div {
	 z-index: 1;
	 -webkit-backface-visibility: hidden;
	 backface-visibility: hidden;
	 -webkit-transform-style: preserve-3d;
	 transform-style: preserve-3d;
	 border-radius: 0 3px 3px 0;
	 box-shadow: inset 4px 0 10px rgba(0, 0, 0, 0.1);
}
 .bk-img .bk-front:after {
	 content: '';
	 position: absolute;
	 top: 1px;
	 bottom: 1px;
	 left: -1px;
	 width: 1px;
}
 .bk-img .bk-front, .bk-img .bk-back, .bk-img .bk-front > div {
	 width: 300px;
	 height: 480px;
}
.bk-left {
    height: 480px !important;
}
 .bk-img .bk-left, .bk-img .bk-right {
	 width: 40px;
	 left: -20px;
}
 .bk-img .bk-back {
	 -webkit-transform: rotate3d(0, 1, 0, -180deg) translate3d(0, 0, 20px);
	 transform: rotate3d(0, 1, 0, -180deg) translate3d(0, 0, 20px);
	 box-shadow: 5px 7px 15px rgba(0, 0, 0, 0.3);
	 border-radius: 3px 0 0 3px;
	 opacity: 0;
	 transition: opacity 250ms ease-out;
}
 .bk-img .bk-back:after {
	 content: '';
	 position: absolute;
	 top: 0;
	 left: 10px;
	 bottom: 0;
	 width: 3px;
	 background: rgba(0, 0, 0, 0.06);
	 box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1);
}
 .bk-img .bk-left {
	 height: 215px;
	 -webkit-transform: rotate3d(0, 1, 0, -90deg);
	 transform: rotate3d(0, 1, 0, -90deg);
}
 .bk-img .bk-left h2 {
	 width: 215px;
	 height: 40px;
	 -webkit-transform-origin: 0 0;
	 -moz-transform-origin: 0 0;
	 transform-origin: 0 0;
	 -webkit-transform: rotate(90deg) translateY(-40px);
	 transform: rotate(90deg) translateY(-40px);
}
 .bk-img .bk-cover {
	/*background-image: url(../images/1.png);
	*/
	 background-repeat: no-repeat;
	 background-position: 10px 40px;
}
 .bk-img .bk-cover:after {
	 content: '';
	 position: absolute;
	 top: 0;
	 left: 10px;
	 bottom: 0;
	 width: 3px;
	 background: rgba(0, 0, 0, 0.06);
	 box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1);
}
 .bk-img .bk-cover {
	 background-repeat: no-repeat;
	 background-position: top left !important;
}
 .bk-img .bk-front > div, .bk-img .bk-left {
	 background-color: #219e9a;
    background-size: 100%;
}
.bk-cover, .bk-img .bk-left {
    background-color: #000 !important;
}

.bk-cover {
    transition: 250ms ease-out;
}
li.book-item:hover .bk-cover {
    background-image: url("../images/The-three-privileges-cover-hightlight.jpg") !important;
    transition: 250ms ease-out;
}

.espanol li.book-item:hover .bk-cover {
    background-image: url("../images/LosTresPrivilegios-brillo.jpg") !important;
    transition: 250ms ease-out;
}



/* * Lightbox */
 .main-overlay {
	 position: fixed;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 display: none;
	 background-color: rgba(49, 49, 49, 0.65);
}
 .main-overlay .overlay-full {
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
}
 .main-overlay .overlay-details {
	 position: absolute;
	 display: block;
	 z-index: 1;
	 top: 50%;
	 left: 50%;
	 width: 100%;
	 max-width: 800px;
	 max-height: 480px;
	 padding: 40px;
	 overflow: hidden;
	 border-radius: 3px;
	 background-color: #fff;
	 box-shadow: 0px 2px 1px 2px rgba(0, 0, 0, 0.3);
	 transform: translate(-50%, -50%);
}
 .main-overlay .overlay-image {
	 display: inline-block;
	 margin-right: 30px;
	 max-width: 275px;
	 vertical-align: top;
}
 .main-overlay .overlay-image img {
	 position: relative;
	 display: inline-block;
	 z-index: 1;
	 box-shadow: -12px 12px 15px -5px rgba(0, 0, 0, 0.3);
}
 .main-overlay .overlay-image .back-color {
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 275px;
	 height: 100%;
	 border-top-left-radius: 3px;
	 border-bottom-left-radius: 3px;
	 background-color: green;
}
 .main-overlay .close-overlay-btn {
	 position: absolute;
	 top: 15px;
	 right: 15px;
	 width: 30px;
	 height: 30px;
	 opacity: 0.3;
	 text-indent: -9999px;
	 transition: opacity 250ms ease-out;
}
 .main-overlay .close-overlay-btn:hover {
	 opacity: 1;
}
 .main-overlay .close-overlay-btn:before {
	 content: ' ';
	 position: absolute;
	 left: 15px;
	 width: 2px;
	 height: 33px;
	 background-color: #313131;
}
 .main-overlay .close-overlay-btn:after {
	 content: ' ';
	 position: absolute;
	 left: 15px;
	 width: 2px;
	 height: 33px;
	 background-color: #313131;
}
 .main-overlay .close-overlay-btn:before {
	 transform: rotate(45deg);
}
 .main-overlay .close-overlay-btn:after {
	 transform: rotate(-45deg);
}
 .main-overlay .back-preview-btn {
	 position: absolute;
	 top: 7px;
	 left: -34px;
	 width: 30px;
	 height: 30px;
	 opacity: 0.3;
	 text-indent: -9999px;
	 transition: opacity 250ms ease-out;
}
 .main-overlay .back-preview-btn:hover {
	 opacity: 1;
}
 .main-overlay .back-preview-btn:before {
	 content: ' ';
	 position: absolute;
	 left: 15px;
	 width: 2px;
	 height: 15px;
	 background-color: #313131;
}
 .main-overlay .back-preview-btn:after {
	 content: ' ';
	 position: absolute;
	 top: 10px;
	 left: 15px;
	 width: 2px;
	 height: 15px;
	 background-color: #313131;
}
 .main-overlay .back-preview-btn:before {
	 transform: rotate(45deg);
}
 .main-overlay .back-preview-btn:after {
	 transform: rotate(-45deg);
}
 .main-overlay .overlay-desc {
	 display: inline-block;
	 margin-top: -400px;
	 width: calc(100% - 320px);
	 vertical-align: top;
	 transition: all 500ms ease-out;
}
 .main-overlay .overlay-desc.activated {
	 display: inline-block;
	 margin-top: 0;
}
 .main-overlay .overlay-preview {
	 position: relative;
	 display: inline-block;
	 float: right;
	 margin-top: 40px;
	 width: calc(100% - 310px);
	 vertical-align: top;
	 transition: all 500ms ease-out;
}
 .main-overlay .overlay-preview.activated {
	 margin-top: -430px;
}
 .main-overlay .preview-content {
	 padding-right: 24px;
	 padding-top: 10px;
	 display: block;
	 display: -webkit-box;
	 height: 360px;
	/* Fallback for non-webkit */
	 font-size: 15px;
	 line-height: 1.5;
	 -webkit-line-clamp: 16;
	 -webkit-box-orient: vertical;
	 overflow: hidden;
	 text-overflow: ellipsis;
	 overflow: scroll;
	 text-overflow: clip;
	 font-weight: 400;
}
 .main-overlay .preview-content h5, .main-overlay .preview-content p {
	 font-family: 'Roboto Slab', serif;
}
 .main-overlay .preview-content h5 {
	 font-weight: bold;
}
 .main-overlay .preview-content p {
	 font-weight: normal;
}
 .main-overlay .preview-content:before {
	 content: '';
	 position: absolute;
	 left: 0;
	 top: 40px;
	 width: 100%;
	 height: 30px;
	 background: rgba(255, 255, 255, 0);
	 background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 1) 80%);
}
 .main-overlay .preview-content:after {
	 content: '';
	 position: absolute;
	 left: 0;
	 bottom: 0;
	 width: 100%;
	 height: 50px;
	 background: rgba(255, 255, 255, 0);
	 background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 1) 80%);
}
 .overlay-details {
	 display: none;
}
/* * Footer */
 #footer {
     background: var(--claro);
     min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    z-index: 9;
    flex-direction: column;
    position: relative;
}
 #footer div, #footer a, #footer p {
	 font-size: 18px;
	 text-align: center;
     color: var(--texto);
}

#footer a {
    display: flex;
    align-items: center;
}
#footer a i {
    margin-right: 5px;
}
.main-logo.mostrar-logo {
    display: block;
}

.redes {
    display: flex;
    justify-content: center;
    align-items: center;
}

.redes, .redes a {
    font-size: 14px !important;
}
.redes ul {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin: 0;
}

.redes ul li a {
    margin: 10px;
}


a.logo img {
    animation: aparicion 2.5s forwards;
}
@keyframes aparicion {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
      opacity: 0;
  }
  50% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
      opacity: 0.3;
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
      opacity: 1;
  }
}
@-webkit-keyframes aparicion {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
      opacity: 0;
  }
  50% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
      opacity: 0.3;
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
      opacity: 1;
  }
}
@keyframes desaparicion {
  0% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
      opacity: 0;
  }
  50% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
      opacity: 0.3;
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
      opacity: 1;
  }
}
@-webkit-keyframes desaparicion {
  0% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
      opacity: 0;
  }
  50% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
      opacity: 0.3;
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
      opacity: 1;
  }
}


h1.ml13.ml13_3 .letter, .ml13_2.ml13_3 .letter {
    animation: desaparecer 1s;
    -moz-animation: desaparecer 1s;
    -o-animation: desaparecer 1s;
    -webkit-animation: desaparecer 1s;
    transform: translateY(-100px) translateZ(-50px) !important;
    opacity: 0 !important;
}

h1.ml13.ml13_3 .letter:nth-child(5),h1.ml13.ml13_3 .letter:nth-child(9),h1.ml13.ml13_3 .letter:nth-child(16),h1.ml13.ml13_3 .letter:nth-child(19) {
    animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
h1.ml13.ml13_3 .letter:nth-child(2),h1.ml13.ml13_3 .letter:nth-child(6),h1.ml13.ml13_3 .letter:nth-child(10),h1.ml13.ml13_3 .letter:nth-child(15),h1.ml13.ml13_3 .letter:nth-child(18) {
    animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(.83,.44,.32,.92);
}

h1.ml13.ml13_3 .letter:nth-child(1),h1.ml13.ml13_3 .letter:nth-child(7),h1.ml13.ml13_3 .letter:nth-child(11),h1.ml13.ml13_3 .letter:nth-child(14) {
    animation-duration: 1.3s;
  animation-timing-function: cubic-bezier(.55,.12,.49,.87);
}

@keyframes desaparecer {
  from {
    transform: translateY(0px) translateZ(0px);
    opacity: 1;
  }
  to {
    transform: translateY(-300px) translateZ(-150px) !important;
    opacity: 0 !important;
  }
}

@-moz-keyframes desaparecer {
  from {
    transform: translateY(0px) translateZ(0px);
    opacity: 1;
  }
  to {
    transform: translateY(-300px) translateZ(-150px) !important;
    opacity: 0 !important;
  }
}
@-webkit-keyframes desaparecer {
  from {
    transform: translateY(0px) translateZ(0px);
    opacity: 1;
  }
  to {
    transform: translateY(-300px) translateZ(-150px) !important;
    opacity: 0 !important;
  }
}

.parrafo {
    margin: 60px auto;
    text-align: center;
    max-width: 80vw;
    width: 600px;
    position: relative;
    height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.parrafo.left h2, .parrafo.left p {
    text-align: left;
}
.parrafo.left {
    align-items: flex-start !important;
    width: auto;
}
.parrafo.left .txt {
    width: 400px;
    z-index: 5;
    background: #ffffffbf;
    box-shadow: 0px 0px 20px 20px #ffffffbf;
    margin: 10px;
}

.parrafo.right h2, .parrafo.right p {
    text-align: right;
}
.parrafo.right {
    align-items: flex-end !important;
    width: auto;
}
.parrafo.right .txt {
    width: 400px;
    background: #ffffffbf;
    box-shadow: 0px 0px 20px 20px #ffffffbf;
    z-index: 5;
    margin: 10px;
}

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

.fade-from-left{
/*
    background:
    -webkit-linear-gradient(to top left, transparent 50%, var(--text-color) 60%, var(--text-color) 0) left bottom 25vh / 100vw 30vh fixed no-repeat,
    -webkit-linear-gradient(to top, transparent 55%, var(--text-color) 0) left bottom 0vh / 100vw 100vh fixed no-repeat;
    background:
    linear-gradient(to top left, transparent 50%, var(--text-color) 60%, var(--text-color) 0) left bottom 25vh / 100vw 30vh fixed no-repeat,
    linear-gradient(to top, transparent 55%, var(--text-color) 0) left bottom 0vh / 100vw 100vh fixed no-repeat;
        background:
    -moz-linear-gradient(to top left, transparent 50%, var(--text-color) 60%, var(--text-color) 0) left bottom 25vh / 100vw 30vh fixed no-repeat,
    -moz-linear-gradient(to top, transparent 55%, var(--text-color) 0) left bottom 0vh / 100vw 100vh fixed no-repeat;
    -webkit-background-clip: text;
      background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    */

}
.fade-from-right{
/*
  background:
    -webkit-linear-gradient(to top right, transparent 50%, var(--text-color) 60%, var(--text-color) 0) left bottom 25vh / 100vw 30vh fixed no-repeat,
    -webkit-linear-gradient(to top, transparent 55%, var(--text-color) 0) left bottom 0vh / 100vw 100vh fixed no-repeat;
      background:
    linear-gradient(to top right, transparent 50%, var(--text-color) 60%, var(--text-color) 0) left bottom 25vh / 100vw 30vh fixed no-repeat,
    linear-gradient(to top, transparent 55%, var(--text-color) 0) left bottom 0vh / 100vw 100vh fixed no-repeat;
    background:
    -moz-linear-gradient(to top right, transparent 50%, var(--text-color) 60%, var(--text-color) 0) left bottom 25vh / 100vw 30vh fixed no-repeat,
    -moz-linear-gradient(to top, transparent 55%, var(--text-color) 0) left bottom 0vh / 100vw 100vh fixed no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
    -webkit-text-fill-color: transparent;
    */

}

section#book_list {
    position: relative;
    z-index: 22;
    max-width: 100%;
    padding-top: 40px;
    width: 100%;
}
/*
section#book_list:before {
    content: "";
    width: 100%;
    height: 150px;
    background: linear-gradient(0deg, white, transparent);
    position: absolute;
    top: -150px;
}
*/


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

#parallax-bg3 {
	z-index: 3;
	position: fixed;
	left: 0; /* align left edge with center of viewport */
	top: 0;
	width: 90vw;
	}
	/* balloon */
	#bg3-1 {
		position: absolute;
		top: -300px;
		left: 780px;

		}
	#bg3-2 {
        position: absolute;
        top: 1100px;
        left: 42%;
        transform: rotate(60deg);

    }
	#bg3-3 {
        position: absolute;
        top: 410vh;
        left: 40%;

		}
    #bg3-4 {
        position: absolute;
        top: 365vh;
        left: 22%;

    }
    #bg3-5 {
        position: absolute;
        top: 270vh;
        right: 50%;
        max-width: 300px !important;
        transform: rotate(50deg);

    }
/* midground (clouds) */
#parallax-bg2 {
	z-index: 2;
	position: fixed;
	left: 0; /* align left edge with center of viewport */
	top: 0;
	width: 100vw;
	}
	#bg2-1 {
		position: absolute;
		top: 162px;
		left: 200px;

		}
	#bg2-2 {
        position: absolute;
        top: 195vh;
        left: 1%;
        transform: rotate(30deg);

		}
	#bg2-3 {
        position: absolute;
        top: 70vh;
        left: 50%;

		}
	#bg2-4 {
		position: absolute;
		top: 900px;
		right: 510px;

		}
	#bg2-5 {
		position: absolute;
		top: 1450px;
		right: 80px;

		}
/* background (clouds) */
#parallax-bg1 {
	z-index: 1;
	position: fixed;
	left: 0; /* align left edge with center of viewport */
	top: 0;
	width: 100vw;
	}
	#bg1-1 {
		position: absolute;
		top: 525px;
		left: -3%;

		}
	#bg1-2 {
		position: absolute;
        top: 10px;
        left: 550px;

		}
	#bg1-3 {
		position: absolute;
		top: 900px;
		left: -180px;

		}
	#bg1-4 {
		position: absolute;
		top: 60vh;
		right: 2%;

		}
    img#bg1-5 {
        position: absolute;
        top: 10vh;
        right: 10vw;
        }
#parallax-bg1 img, #parallax-bg2 img, #parallax-bg3 img {
    max-width: 150px;
    object-fit: contain;
}


button.button {
    background: transparent;
    border: none;
    padding: 10px 20px;
    color: var(--verde);
    font-family: "Cardo";
    letter-spacing: 2px;
    border-bottom: 1px solid;
    cursor: pointer;
    transition: all 0.3s;
    outline: none;
    text-transform: uppercase;
}
button.button:hover {
    color: var(--link);
    transition: all 0.3s;
    letter-spacing: 4px;
}
button.button a {
    color: var(--verde);
    transition: all 0.3s;
}
button.button:hover a {
    color: var(--link);
    transition: all 0.3s;
}
h2.title {
    font-weight: normal;
    text-transform: uppercase;
    font-size: 2em;
}
h2.title span {
    font-size: 0.8em;
}
h2.title em {
    font-size: 1.2em;
    font-style: normal;
}


.idioma {
    position: fixed;
    right: 10vw;
    top: 30px;
}

.amazon {
    display: flex;
    margin-top: 30px;
    flex-wrap: wrap;
    align-items: center;
}
.amazon > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 20px 20px 20px;
}
.amazon div a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/***************************/
section.suscriptores {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--claro);
    z-index: 1222222222222222222;
    width: 100%;
    height: 100%;
    padding-bottom: 40px;
    padding-top: 40px;
}
section.suscriptores form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
section.suscriptores input, .landing-form input,  .landing-form select {
    padding: 10px;
    color: #223328;
    border: 1px solid #223328;
    margin: 10px 5px;
}
section.suscriptores input.enviar-form, .landing-form input.enviar-form {
    background: #223328;
    color: white;
    padding: 10px 30px;
    cursor: pointer;
}
section.suscriptores label, .landing-form label {
    width: 100%;
    text-align: center;
}
input[type="submit"],
button{
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}
body.landing .amazon {
    margin-top: 0;
}
.landing-form {
    margin: 0 !important;
}
.landing-form form {
    width: 100%;
    max-width: 380px;
}
.landing-form .form_2 {
    display: flex;
    flex-wrap: wrap;
}
.landing-form .form_2 input {
    width: auto;
}
.landing-form select, .landing-form input {
  width: calc(100% - 10px);
}
.landing-form h3 {
    white-space: pre-wrap;
}

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



@media (max-width: 1024px) {
    img#bg1-5 {
        top: 25vh;
        right: -5vw;

    }
    #bg2-3 {
        left: 10%;
        top: 55vh;

    }
    #bg2-1 {
        top: 20%;

    }
    #bg1-1 {
        left: -6%;
        top: 470px;

    }
    #bg3-2 {
        left: 30%;

    }
    #bg3-3 {
        left: 60%;

    }
    #bg3-5 {
        top: 314vh;
        left: 97%;

    }
    #bg2-4 {
        top: 1150px;
        right: 50%;

    }
    #bg3-4 {
        top: 365vh;

    }

}

@media (max-width: 768px) {
    .book-item .item-details {
        width: 100%;
        transition: all 0.5s ease-in-out;
        margin-top: 40px;
        padding-right: 0 !important;
    }
    body.landing .amazon {
      display: flex;
      justify-content: center;
    }
   .bk-img {
    width: 100%;
    display: flex;
    justify-content: center;
       transition: all 0.5s ease-in-out;
    }

    #bg3-3 {
    left: 15%;
    top: 436vh;

    }
    #bg2-4 {
    top: 1100px;
    right: 25%;

    }
    #bg2-2 {
    top: 195vh;
    left: -4%;

    }
    #bg3-2 {
    left: 40%;
    top: 1250px;
    transform: rotate(90deg);

    }
    #bg2-3 {
    left: 10%;
    top: 20vh;

    }
    #bg1-4 {
    top: 73vh;

    }
    img#bg1-5 {
    top: 41vh;
    right: -7vw;

    }

    .bk-img {
	 padding-right: 0px;
    }

}
@media (max-width: 600px) {
    .enviar {
        width: 100%;
        margin: 0px 5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .landing-form form input.enviar-form {
        margin-left: 0 !important;
        margin-right: auto;
        width: auto;
        float: left;
    }
}
@media (max-width: 550px) {
    .amazon > div {
        flex-direction: row !important;
        margin: 0 0 20px 0 !important;
    }
    button.button {
        margin-left: 10px !important;
        padding: 10px 0 !important;
    }
    .redes {
        flex-direction: column;
    }
}
@media (max-width: 476px) {
    .fade-from-left{
    color: var(--text-color);
    }
    .fade-from-right{
    color: var(--text-color);
    }
    .parrafo.left .txt,.parrafo.right .txt {
        width: auto;
    }
    .idioma {
      right: 5vw;
    }
    .landing-form .form_2 input {
      width: 100%;
    }
}



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

body.landing section#book_list {
    padding-top: 120px !important;
}