@charset "UTF-8";
@font-face {
    font-family: technaSans;
    src: url(../fonts/TechnaSans-Regular.otf);
}
:root{
    /* Test Colors */
    --testRed: rgba(255, 0, 0, 0.1);
    --testGreen: rgba(0, 255, 0, 0.1);
    --testBlue: rgba(0, 0, 255, 0.1);
    /* Colors */
    --brownFp:rgba(69,26,29,1.00);
    --redFp:rgba(238,45,38,1.00);
    --redDarkFp:rgb(160, 14, 9);
    --redLightFp:rgb(255, 86, 81);
    --yellowFp:rgba(240,94,36,1.00);
    --white: rgba(255,255,255,1.00);
    --black: rgba(0,0,0,1.00);
    --gray25:rgba(200,200,200,1.00);
    --bg-color: rgba(247,249,251,1.00);
    --bg-footer1-color: rgba(69,26,29,1.00);
    --bg-footer2-color: rgba(31,31,31,1.00);
    --azul: rgba(68,152,238,1.00);
    --amarillo: rgba(240,175,71,1.00);
    --rosa: rgba(230,14,115,1.00);
    --verde: rgba(22,178,68,1.00);
    --morado: rgba(157,76,241,1.00);
    --cafe: rgba(138,55,47,1.00);
    --azul-claro: rgba(75,210,240,1.00);
    --amarillo-claro: rgba(241,179,76,1.00);
    --rosa-claro: rgba(241,73,108,1.00);
    --verde-claro: rgba(48,205,154,1.00);
    --morado-claro: rgba(180,75,240,1.00);
    --cafe-claro: rgba(184,72,60,1.00);
}
*{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html,body{
    width: 100%;
    height: auto;
}
body{
    display: block;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    background-color: var(--bg-color);
}
img{
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
h1,h2,h3,h4,h5,h6{
    font-family: technaSans, sans-serif;
}
/* Flex Rules */
.flex{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
/* Container & Wrapper */
.container,.wrapper{
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.container{
    padding-left: 4%;
    padding-right: 4%;
}
.wrapper{
    max-width: 1344px;
    min-width: 1px;
}
/* No Display */
.no-display{
    display: none;
    opacity: 0;
    visibility: hidden;
}
/* Logo Styles */
a.logo-container{
    width: 180px;
    height: auto;
    display: block;
}
a.logo-container > img{
    width: 100%;
    min-width: 1px;
    height: auto;
}
/* Flex Rules */
.flex{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
/* Grid Rules */
.grid{
    /* Grid Display */
    width: 100%;
    height: auto;
    display: -ms-grid;
    display: grid;
    /* rules for Firefox (prevent overlap) */
    min-width: 0;
    min-height: 0;
}
/* Text Styles */
address{
    font-size: 0.7em;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    line-height: 1.4em;
    color: var(--gray25);
}
address > strong{
    color: var(--white);
}
/* Button Styles */
.button-box{
    width: max-content;
    display: block;
    /*font-size: 0.9em;*/
    /*padding: 0.4em 2em;*/
    font-weight: 700;
    text-align: center;
    text-transform: capitalize;
    text-decoration: none;
    letter-spacing: 0.03em;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s; 
    -o-transition: all 0.3s; 
    transition: all 0.3s;
}
.button-box:hover{
    -webkit-transition: all 0.15s;
    -moz-transition: all 0.15s; 
    -o-transition: all 0.15s; 
    transition: all 0.15s;
}
/* Button General Size */
a.button-generalSize{
    font-size: 1.1em;
    padding: 0.6em 2.1em;
}
/* Buttons Color Styles */
.button-red{
    color: var(--white);
    background-color: var(--redFp);
}
.button-red:hover{
    background-color: var(--redDarkFp);
}
.button-whiteBg{
    color: var(--redFp);
    background-color: var(--white);
}
.button-whiteBorder{
    color: var(--white);
    border: 2px solid var(--white);
}
/* Icons Social Media */
a.icon-socialmedia{
    width: 50px;
    height: auto;
    display: block;
    opacity: 1;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s; 
    -o-transition: all 0.4s; 
    transition: all 0.4s;
}
a.icon-socialmedia > img{
    width: 100%;
    min-width: 1px;
    height: auto;
}
a.icon-socialmedia:hover{
    opacity: 0.6;
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s; 
    -o-transition: all 0.1s; 
    transition: all 0.1s;
}
/* Fixed Social */
div#fixed-social{
    position: fixed;
    z-index: 1005;
    top: 10%;
    left: auto;
    right: 0;
    padding: 12px 0px 12px 12px;
    background-color: rgba(33,33,33,0.8);
    -webkit-border-radius: 25px 0px 0px 25px;
    -moz-border-radius: 25px 0px 0px 25px;
    border-radius: 25px 0px 0px 25px;
}
ul#fixed-social-container{
    flex-flow: column wrap;
}
ul#fixed-social-container > li{
    list-style: none;
    margin-bottom: 5px;
}
ul#fixed-social-container > li:last-child{
    margin-bottom: 0px;
}
/* Text Styles */
.title{
    font-size: 2.6em;
    margin-bottom: 0.8em;
    text-align: center;
    color: var(--brownFp);
}
.subtitle{
    font-size: 1.8em;
}
.p-Normal{
    font-size: 1.4em;
    line-height: 1.4em;
    text-align: center;
    color: var(--brownFp);
    width: 75%;
    margin: 0 auto 1.2em auto;
}
.p-Normal:last-child{
    margin-bottom: 0px;
}
.pColor-red{
    color: var(--redFp);
}
/* Main content for the Page */
header,main,footer{
    width: 100%;
    height: auto;
}
/* Header */
header{
    margin: 0 auto;
    padding: 12px 0;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1001;
    background-color: var(--white);
    border-bottom: 4px solid var(--redFp);
}
#header-container{
    flex-flow: row nowrap;
    align-items: center;
    align-content: center;
    gap: 18px;
}
.header-box{
    display: block;
}
#header-1{
    order: 1;
    flex-grow: 1;
    /*background-color: var(--testBlue);*/
}
#header-2{
    order: 2;
    /*background-color: var(--testGreen);*/
}
#header-3{
    order: 3;
    /*background-color: var(--testRed);*/
}
#header-4{
    order: 4;
    /*background-color: var(--testBlue);*/
}
/* Nav & Menu */
/* Styles for the nav links  */
nav > ul#nav-header-container{
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
}
nav > ul#nav-header-container > li{
    list-style: none;
    margin-left: 34px;
}
nav > ul#nav-header-container > li:first-child{
    margin-left: 0px;
}
nav > ul#nav-header-container > li > a{
    font-size: 0.9em;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.02em;
    color: var(--brownFp);
    border-bottom: 3px transparent var(--white);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s; 
    -o-transition: all 0.3s; 
    transition: all 0.3s;
}
nav > ul#nav-header-container > li > a:hover{
    color: var(--redFp);
    border-bottom: 3px solid var(--redFp);
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s; 
    -o-transition: all 0.1s; 
    transition: all 0.1s;
}
/* Button: Publica Ahora */
a.button-red-header{
    font-size: 0.9em;
    padding: 0.4em 2em;
}
/* Menu Header */
#menu-button{
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    padding: 1rem;
    font-size: 2rem;
    line-height: 0;
    cursor: pointer;
    color: var(--redFp);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s; 
    -o-transition: all 0.3s; 
    transition: all 0.3s;
}
#menu-button:hover{
    color: var(--redDarkFp);
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s; 
    -o-transition: all 0.1s; 
    transition: all 0.1s;
}
#menu{
    /* IMPORTANT! NO EREASE RULE */
    display: none;
    /* Safe Rules */
    width: 280px;
    height: auto;
    margin: 16px 0px 0px -220px;
    padding: 0px;
    position: fixed;
    overflow: hidden;
    z-index: 1001;
    left: auto;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
    background-color: var(--bg-color);
    border-left: 2px solid var(--redFp);
    border-right: 2px solid var(--redFp);
    border-bottom: 2px solid var(--redFp);
    -webkit-border-bottom-right-radius: 12px;
    -moz-border-bottom-right-radius: 12px;
    -webkit-border-bottom-left-radius: 12px;
    -moz-border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
}
#menu > li{
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
    list-style: none;
    border-bottom: 1px solid var(--gray25);
}
#menu > li:last-child{
    border-bottom: none;
}
#menu > li > a{
    width: 100%;
    height: auto;
    padding: 12px;
    display: block;
    font-size: 0.9em;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: var(--brownFp);
    /*background-color: var(--testGreen);*/
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s; 
    -o-transition: all 0.3s; 
    transition: all 0.3s;
}
#menu > li > a:hover{
    color: var(--white);
    background-color: var(--redFp);
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s; 
    -o-transition: all 0.1s; 
    transition: all 0.1s;
}
/* Slider */
#slider-section{
    width: 100%;
    height: auto;
    display: block;
    padding: 30px 0;
    margin: 90px 0 0 0;
    background: linear-gradient(90deg, rgba(255, 156, 169, 1) 0%, rgba(255, 252, 212, 1) 100%);
}
#slider-box{
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
    position: relative;
}
#slider-container{
    width: 100%;
    display: flex;
    transition: transform 0.5s ease-in-out;
}
.slide{
    width: 100%;
    max-width: 100%;
    min-width: 1px;
    height: auto;
    overflow: hidden;
    display: flex;
    flex: 0 0 100%; /* Ocupa todo el ancho del contenedor */
    transition: opacity 0.5s;
}
button.button-slider{
    font-size: 1.4em;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.6);
    border: none;
    color: var(--white);
    padding: 14px;
    cursor: pointer;
    position: absolute;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s; 
    -o-transition: all 0.1s; 
    transition: all 0.1s;
}
button:hover.button-slider{
    background-color: rgba(0, 0, 0, 1);
    color: var(--white);
}
.prev-slider{
    left: 0;
}
.next-slider{
    right: 0;
}
.slider-indicators {
    text-align: center;
    margin-top: 15px;
}
.slider-indicators .dot {
    height: 10px;
    width: 30px;
    margin: 0 5px;
    background-color: rgba(255,255,255,0.25);
    display: inline-block;
    transition: background-color 0.3s ease;
    cursor: pointer;
    border-radius: 5px;
}
.slider-indicators .dot.active {
    background-color: var(--white);
}
.slide-box{
    width: 100%;
    height: 300px;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 25px;
}
.slide-info{
    order: 1;
    width: 40%;
    display: block;
}
h2.slide-title,
p.slide-subtitle {
    text-align: left;
    color: var(--brownFp);
}
h2.slide-title{
    font-size: 2.8em;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-bottom: 0.6em;
}
p.slide-subtitle{
    font-size: 1.8em;
    font-weight: 400;
    line-height: 1.2em;
    margin-bottom: 1em;
}
.slide-img{
    order: 2;
}
img.image-for-slide{
    width: 100%;
    max-width: 220px;
    height: auto;
    margin: 0;
}
/* Main */
main{
    margin-top: 60px;
    margin-bottom: 80px;
}
/* Sections */
section{
    padding-top: 100px;
    margin-bottom: 60px;
}
section:last-child{
    margin-bottom: 0px;
}
/* Boxes styles for the Sections */
.box-base{
    width: 100%;
    height: auto;
    overflow: hidden;
}
.round-corner{
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
.box-white{
    background-color: var(--white);
    box-shadow: 11px 11px 45px -7px rgba(17,40,61,0.33);
    -webkit-box-shadow: 11px 11px 45px -7px rgba(17,40,61,0.33);
    -moz-box-shadow: 11px 11px 45px -7px rgba(17,40,61,0.33);
}
/* Section: Acerca de "Literatura que forja Sentimientos"*/
section#s-acercaDe{
    background: url(../imgs/IconFPBlacknWhite.webp); 
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.firepanda-icon{
    width: 100%;
    max-width: 140px;
    min-width: 1px;
    height: auto;
    margin: 0 auto 30px auto;
}
/* Section Conoce la Firepanda Magazine */
/*section#s-fpMagazine{
    background: var(--testRed);
}*/
section#s-fpMagazine .title,
section#s-fpMagazine .p-Normal{
    text-align: left !important;
    color: var(--white) !important;
    text-shadow: 1px 2px 3px var(--brownFp);
}
div#box-conoceFPMagazine{
    width: 100%;
    height: auto;
    margin: 0 auto 60px auto;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 30px;
    overflow: hidden;
    background: linear-gradient(90deg, var(--yellowFp) 0%, var(--redFp) 100%);
}
div#cover-FPMag{
    width: 80%;
    height: 430px;
    justify-content: center;
    align-items: center;
    /*background-color: var(--testBlue);*/
}
div#cover-FPMag > img{
    width: 100%;
    min-width: 1px;
    height: 100%;
    object-fit: cover;
}   
div#cover-FPMag-Description{
    padding: 30px 30px 30px 0px;
}
div#cover-FPMag-Description p.p-Normal{
    width: 100% !important;
    margin: 0 !important;
}
div#cover-FPMag-Description > hr{
    width: 90%;
    min-width: 1px;
    margin: 20px auto 20px 0;
    border: 1px solid var(--white);
}
div#buttonsMagazine-container{
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    gap: 21px;
}
a#button-conoceLaRevista:hover{
    color: var(--white);
    background-color: var(--redDarkFp);
}
a#button-publicatTuComic:hover{
    background-color: var(--azul);
}
/* News Letter Styles */
div.newsletter-div{
    width: 100%;
    height: 100px;
    margin: 0 auto;
    padding: 12px;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    position: relative;
    overflow: hidden;
    z-index: 3;
    background: rgb(51,67,220);
    background: linear-gradient(90deg, rgba(51,67,220,1) 0%, rgba(77,1,117,1) 50%, rgba(216,0,202,1) 100%);
}
div.newsletter-div::before{
    content: "";
    width: 2px; 
    height: 2px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    box-shadow: 
    10px 20px #fff, 30px 50px #fff, 40px 10px #fff, 60px 30px #fff,
    80px 70px #fff, 100px 20px #fff, 120px 60px #fff, 150px 40px #fff,
    180px 80px #fff, 200px 30px #fff, 220px 70px #fff, 240px 50px #fff,
    260px 10px #fff, 280px 20px #fff, 300px 90px #fff, 320px 60px #fff,
    340px 40px #fff, 360px 10px #fff, 380px 50px #fff, 400px 70px #fff,
    420px 20px #fff, 440px 40px #fff, 460px 80px #fff, 480px 50px #fff,
    500px 10px #fff, 520px 90px #fff, 540px 30px #fff, 560px 60px #fff,
    580px 80px #fff, 600px 20px #fff, 620px 50px #fff, 640px 10px #fff,
    660px 30px #fff, 680px 60px #fff, 700px 40px #fff, 720px 20px #fff,
    740px 90px #fff, 760px 70px #fff, 780px 50px #fff, 800px 30px #fff,
    810px 20px #fff, 830px 50px #fff, 840px 10px #fff, 860px 30px #fff,
    880px 70px #fff, 900px 20px #fff, 920px 60px #fff, 950px 40px #fff,
    980px 80px #fff, 1000px 30px #fff, 1020px 70px #fff, 1040px 50px #fff,
    1060px 10px #fff, 1080px 20px #fff, 1100px 90px #fff, 1120px 60px #fff,
    1140px 40px #fff, 1160px 10px #fff, 1180px 50px #fff, 1200px 70px #fff,
    1220px 20px #fff, 1240px 40px #fff, 1260px 80px #fff, 1280px 50px #fff,
    1300px 10px #fff, 1320px 90px #fff, 1340px 30px #fff, 1360px 60px #fff,
    1380px 80px #fff, 1400px 20px #fff, 1420px 50px #fff, 1440px 10px #fff,
    1460px 30px #fff, 1480px 60px #fff, 1500px 40px #fff, 1520px 20px #fff,
    1540px 90px #fff, 1560px 70px #fff, 1580px 50px #fff, 1500px 30px #fff,
    1580px 80px #fff, 1600px 30px #fff, 1620px 70px #fff, 1640px 50px #fff,
    1660px 10px #fff, 1680px 20px #fff, 1700px 90px #fff, 1720px 60px #fff,
    1740px 40px #fff, 1760px 10px #fff, 1780px 50px #fff, 1800px 70px #fff;
}
div.newsletter-left{
    width: auto;
    height: auto;
    display: block;
    order: 1;
    flex-grow: 1;
    margin-left: 4%;
    margin-right: 4%;
    z-index: 2;
}
div.newsletter-left > p{
    font-size: 1.8em;
    font-weight: 700;
    line-height: 1.1em;
    letter-spacing: 0.01em;
    color: var(--white);
    text-shadow: 0px 4px 4px rgba(0,0,0,0.85);
}
a.newsletter-right{
    order: 2;
    width: 190px;
    height: max-content;
    display: block;
    margin-right: 4%;
    margin-left: 4%;
    padding: 6px 0;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    z-index: 4;
    color: rgb(77,1,117);
    background-color: var(--white);
    -webkit-border-radius: 26px;
    -moz-border-radius: 26px;
    border-radius: 26px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s; 
    -o-transition: all 0.4s; 
    transition: all 0.4s;
}
a.newsletter-right:hover{
    color: var(--white);
    background-color: rgb(14, 88, 247);
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s; 
    -o-transition: all 0.1s; 
    transition: all 0.1s;
}
img#cover-newsletter{
    width: 100px;
    height: auto;
    top: -10;
    left: 750px;
    z-index: 2;
    position: absolute;
    -moz-transform: rotate(-15deg); /* Mozilla */
    -o-transform: rotate(-15deg); /* Opera */
    -ms-transform: rotate(-15deg); /* Internet Explorer */
    transform: rotate(-15deg);
}
/* Section: Nuestras Publicaciones */
/*section#s-publicaciones{
    background-color: var(--testGreen);
}*/
#books-container{
    width: 100%;
    height: auto;
    flex-flow: row wrap;
    justify-content: center;
    justify-items: center;
    gap: 30px 40px;
}
a.book-cover{
    justify-content: center;
    overflow: hidden;
}
a.book-cover > img{
    width: 100%;
    min-width: 1px;
    height: 380px;
    object-fit: cover;
}
/* Section: Nuestros Pilares de Fuego */
/*section#s-pilares{
    background-color: var(--testRed);
}*/
div#pilares-container{
    flex-flow: row nowrap;
    justify-content: center;
    align-items: stretch;
    align-content: center;
    gap: 24px;
}
div.box-pilar{
    width: 100%;
    max-width: 225px;
    height: auto;
    min-width: 1px;
    flex-flow: column wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    padding: 24px;
}
div.box-pilar > img{
    width: 100%;
    max-width: 180px;
    min-width: 1px;
}
div.box-pilar > h4{
    width: 100%;
    font-size: 1.5em;
    letter-spacing: 0.01em;
    color: var(--brownFp);
    text-align: center;
    margin: 0 auto;
}
/* Section: Inicia tu viaje de Autor */
/*section#s-servicios{
    background-color: var(--testBlue);
}*/
div#servicios-container{
    width: 80%;
    /*max-width: 960px;*/
    grid-template-columns:  repeat(3, 1fr);
    grid-template-rows: 1fr;
    justify-items: center;
    justify-content: center;
    align-items: stretch;
    gap: 18px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
    /*background-color: var(--testGreen);*/
}
div.servicios-box{
    width: 100%;
    max-width: 350px;
    min-width: 1px;
    height: auto;
    margin: 0;
    overflow: hidden;
}
div.colored-div{
    width: 100%;
    height: 32px;
    display: block;
}
div.servicios-wrapper{
    width: 100%;
    height: auto;
    padding: 22px 28px;
}
div.icon-servicios-container{
    width: 100%;
    max-width: 160px;
    min-width: 1px;
    height: auto;
    margin: 0 auto 30px auto;
    padding: 14px;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
div.icon-servicios-container > img{
    width: 100%;
    min-width: 1px;
    height: auto;
    margin: 0 auto;
}
div.servicios-wrapper > h4{
    text-align: center;
    font-size: 1.6em;
    margin-bottom: 1em;
}
div.servicios-wrapper > ul{
    text-align: left;
    list-style-position: inside;
}
div.servicios-wrapper > ul > li{
    font-size: 1em;
    margin-bottom: 0.6em;
    color: var(--brownFp);
}
#box-revision > div.colored-div{
    background-color: var(--azul);
}
#box-revision h4,
#box-revision li::marker{
    color: var(--azul);
}
#box-revision div.icon-servicios-container{
    background: linear-gradient(135deg, var(--azul-claro) 0%, var(--azul) 100%);
}
#box-maquetacion > div.colored-div{
    background-color: var(--amarillo);
}
#box-maquetacion h4,
#box-maquetacion li::marker{
    color: var(--amarillo);
}
#box-maquetacion div.icon-servicios-container{
    background: linear-gradient(135deg, var(--amarillo-claro) 0%, var(--amarillo) 100%);
}
#box-marketing > div.colored-div{
    background-color: var(--rosa);
}
#box-marketing h4,
#box-marketing li::marker{
    color: var(--rosa);
}
#box-marketing div.icon-servicios-container{
    background: linear-gradient(135deg, var(--rosa-claro) 0%, var(--rosa) 100%);
}
#box-ebook > div.colored-div{
    background-color: var(--verde);
}
#box-ebook h4,
#box-ebook li::marker{
    color: var(--verde);
}
#box-ebook div.icon-servicios-container{
    background: linear-gradient(135deg, var(--verde-claro) 0%, var(--verde) 100%);
}
#box-imprenta > div.colored-div{
    background-color: var(--morado);
}
#box-imprenta h4,
#box-imprenta li::marker{
    color: var(--morado);
}
#box-imprenta div.icon-servicios-container{
    background: linear-gradient(135deg, var(--morado-claro) 0%, var(--morado) 100%);
}
#box-tesis > div.colored-div{
    background-color: var(--cafe);
}
#box-tesis h4,
#box-tesis li::marker{
    color: var(--cafe);
}
#box-tesis div.icon-servicios-container{
    background: linear-gradient(135deg, var(--cafe-claro) 0%, var(--cafe) 100%);
}
div#post-publishing{
    width: 100%;
    min-width: 1px;
    height: auto;
    display: block;
    padding: 30px;
    margin-bottom: 60px;
    /*position:relative;*/
    overflow: hidden;
    background: 
        linear-gradient(0deg, rgba(34,13,14,1) 0%, rgba(34,13,14,0) 100%),
        url(../imgs/booksbg.webp) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
div#post-publishing-textbox{
    width: 100%;
    max-width: fit-content;
    margin: 0 auto 20px auto;
    padding: 1em 4%;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    background-color: var(--redFp);
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
}
div#post-publishing-textbox > h3{
    font-size: 2em;
    color: var(--white);
    text-align: center;
    letter-spacing: 0.06em;
}
div#post-publishing > p{
    width: 100%;
    max-width: 1000px;
    min-width: 1px;
    margin: 0 auto;
    font-size: 1.4em;
    font-weight: 700;
    text-align: center;
    color: var(--white);
    text-shadow: 1px 4px 4px rgb(34, 13, 14); 
}
#container-checks{
    flex-flow: row nowrap;
    justify-content: center;
    align-items:  stretch;
    gap: 34px;
    margin-top: 60px;
}
div.box-check{
    width: 100%;
    max-width: 360px;
    height: auto;
    padding: 24px 34px 18px 24px;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-grow: 1;
    font-size: 1.2em;
    text-align: center;
    font-weight: 700;
    position: relative;
    z-index: 1;
    border: 3px solid var(--brownFp);
}
div.box-check > i{
    font-size: 4em;
    color: var(--redFp);
    position: absolute;
    z-index: 2;
    top: -40%;
}
/* Nuestros Distribuidores */
/*section#s-distribuidores{
    background-color: var(--testGreen);
}*/
div#distribuidores-container{
    width: 100%;
    max-width: 900px;
    min-width: 1px;
    margin: 0 auto;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 30px 60px;
}
div#distribuidores-container > a{
    width: 100%;
    max-width: 125px;
    height: auto;
}
div#distribuidores-container > a > img{
    width: 100%;
    min-width: 1px;
    height: auto;
    margin: 0 auto;
}
/* Section: Nuestro Director Creativo */
/*section#s-director{
    background-color: var(--testRed);
}*/
#director-creativo-container{
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: 28px;
}
#dcreativo-foto{
    order: 1;
    width: 100%;
    max-width: 375px;
    min-width: 1px;
    height: auto;
}
#dcreativo-foto > img{
    width: 100%;
    height: auto;
}
#dcreativo-bio{
    order: 2;
    width: 100%;
}
p.bio-p,
p.autorName,
p.quote {
    color: var(--brownFp);
}
p.bio-p,
p.autorName{
    margin-bottom: 1.2em;
}
p.bio-p{
    font-size: 1.2em;
    text-align: left;
}
p.autorName{
    font-size: 1.7em;
    text-align: right;
    font-weight: 700;
}
p.quote{
    max-width: 550px;
    margin: 0 auto;
    font-size: 1.2em;
    text-align: center;
    font-style: italic;
}
/* Section: Firepanda Learning */
/*section#s-fpLearning{
    background-color: var(--testBlue);
}*/
div#box-intro-learning{
    padding: 35px;
    margin-bottom: 60px;
}
div#learning-desc-container{
    flex-flow: row nowrap;
    justify-content:space-between;
    align-items: center;
    align-content: center;
    gap: 28px;
    /*background-color: rgb(201, 176, 190);*/
}
div#learning-desc-container > .p-Normal{
    width: 100% !important;
    text-align: left !important;
    /*background-color: var(--testBlue);*/
    margin: 0 !important;
}
div#learning-desc-container > img{
    width: 100%;
    max-width: 140px;
    min-width: 1px;
    height: auto;
}
div#box-intro-learning > .button-box{
    margin: 0 auto;
}
section#s-fpLearning > iframe{
    width: 100%;
    max-width: 560px;
    min-width: 1px;
    height: 310px;
    overflow: hidden;
    margin: 0 auto 34px auto;
    display: block;
    /*background-color: var(--testBlue);*/
}
section#s-fpLearning > h4{
    margin: 0 auto 0.6em auto;
    text-align: center;
    font-size: 2.1em;
    color: var(--brownFp);
}
section#s-fpLearning > h4:last-child{
    margin-bottom: 0px;
}

div#fotos-learning-container{
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 35px;
    margin: 60px auto;
    /*background-color: var(--testRed);*/
}
div#fotos-learning-container > img{
    width: 100%;
    max-width: 350px;
    height: 450px;
    object-fit: cover;
}

div#box-comunidad{
    width: 100%;
    min-width: 1px;
    padding: 28px;
    margin-top: 60px;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    gap: 21px;
    border: 5px solid var(--redFp);
}
div#box-comunidad > img{
    max-width: 160px;
}
div#box-comunidad h5,
div#box-comunidad p{
    text-align: left;
    color: var(--brownFp);
}
div#box-comunidad h5{
    font-size: 1.8em;
    font-weight: 700;
    line-height: 1.45em;
    margin-bottom: 0.6em;
}
div#box-comunidad p{
    font-size: 1em;
    font-weight: 400;
}
/* Footer */
/*footer{background-color: var(--testRed);}*/
.footer-box{
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 24px 0;
}
#footer-top{
    background-color: var(--bg-footer1-color);
}
#footer-bottom{
    background-color: var(--bg-footer2-color);
}
/* Footer Section */
.footer-section-container{
    width: 100%;
    min-width: 1px;
    height: auto;
}
#footer-section-1{
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 12px;
    margin-bottom: 24px;
}
#footer-section-2{
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    gap: 36px;
}
#fs1-left{
    order: 1;
    flex-grow: 1;
}
#fs1-right{
    order: 2;
}
#fs2-column1{
    order: 1;
    flex-grow: 1;
}
#fs2-column2{
    order: 2;
}
#fs2-column3{
    order: 3;
}
.fs2-containerbox{
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 24px;
}
.fs2-containerbox:last-child{
    margin-bottom: 0px;
}
.fs2-containerbox > h6{
    font-size: 1.6em;
    color: var(--white);
    margin-bottom: 0.4em;
}
/* Box Contacto Footer */
#fs2-contacto{
    width:fit-content;
    height: auto;
    padding: 0.4em 1.2em;
    font-size: 1.4em;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--white);
    border: 4px solid var(--redFp);
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
/* Footer Social Media  */
/*#fs2-social{}*/
ul#footer-socialmedia{
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    gap: 5px;
}
ul#footer-socialmedia > li{
    list-style: none;
}
/* Footer Podcast */
/*#fs2-podcast{}*/

/*Footer Maps */
ul.lists-footer-maps{
    width: auto;
    height: auto;
}
ul.lists-footer-maps > li{
    margin-bottom: 0.6em;
    list-style: none;
}
ul.lists-footer-maps > li:last-child{
    margin-bottom: 0px;
}
ul.lists-footer-maps > li > a{
    font-size: 0.9em;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--white);
    border-bottom: 3px transparent var(--white);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s; 
    -o-transition: all 0.3s; 
    transition: all 0.3s;
}
ul.lists-footer-maps > li > a:hover{
    color: var(--redFp);
    border-bottom: 3px solid var(--redFp);
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s; 
    -o-transition: all 0.1s; 
    transition: all 0.1s;
}
/* Styles Legal Doc */
/* Aviso de Privacidad | Términos y Condiciones */
.legal-document{
    padding: 21px 6%;
    color: var(--brownFp);
    text-align: left;
}
.legal-document h2,
.legal-document h3,
.legal-document a,
.legal-document strong{
    color: var(--redFp);
}
.legal-document > h2,
.legal-document > h3,
.legal-document > p,
.legal-document > ul{
    margin-bottom: 1.2em;
}
.legal-document > h2, 
.legal-document > h3{
    margin-top: 2.1em;
}
.legal-document > h2 {
    font-size: 2.1em;
}
.legal-document > h3 {
    font-size: 1.6em;
}
.legal-document > p,
.legal-document > ul {
    font-size: 1.1em;
}
.legal-document > ul{
    list-style-position: inside;
}
.legal-document > ul > li{
    margin-left: 1em;
    margin-bottom: 1em;
}
.legal-document li::marker{
    color: var(--redFp);
}
/* Styles Blog */

section#intro-blog{
    text-align: center;
}
section#intro-blog > h1{
    font-size: 3em;
    color: var(--redFp);
    letter-spacing: 0.03em;
}
section#intro-blog > p{
    font-size: 1.5em;
    color: var(--brownFp);
    font-weight: 700;
}
section.section-for-blog{
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    padding: 0px !important;
}
section.section-for-blog:first-child{
    margin-top: 0px !important;
    padding-top: 60px !important;
}
section.section-for-blog:last-child{
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
}
.blog-doc{
    padding: 60px 4%;
    color: var(--brownFp);
    text-align: left;
}
.blog-doc > h2,
.blog-doc > p.text-blog > strong {
    color: var(--redFp);
}
.blog-doc > h2{
    font-size: 2.4em;
    letter-spacing: 0.03em;
    margin-bottom: 1.2em;
}
.blog-doc > p.author-blog{
    font-size: 1.2em;
    line-height: 1.4em;
    margin-bottom: 1.4em;
    font-style: italic;
    font-weight: 700;
    color: var(--brownFp);
}
.blog-doc > p.text-blog{
    font-size: 1.2em;
    line-height: 1.5em;
    letter-spacing: 0.01em;
    margin-top: 2.5em;
    margin-bottom: 2.5em;
}
.blog-doc > p.text-blog:last-child{
    margin-bottom: 0px;
}
.blog-doc > .image-container-blog{
    width: 100%;
    height: auto;
    flex-flow: row nowrap;
    justify-content: space-between;
    gap: 4%;
    margin-bottom: 45px;
}
.blog-doc > .image-container-blog:last-child{
    margin-bottom: 0px;
}
.blog-doc > .image-container-blog > img{
    width: 100%;
    max-width: 450px;
    min-width: 1px;
    height: auto;
    overflow: hidden;
    margin: 0;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
/* Styles: 1080px */
@media only screen and (max-width: 1080px){
    /* Header */
    /* Nav */
    nav > ul#nav-header-container > li{
        margin-left: 28px;
    }
    nav > ul#nav-header-container > li > a{
        font-size: 0.85em;
    }
}
/* Styles: 960px */
@media only screen and (max-width: 960px){
    /* Logo Styles */
    a.logo-container{
        width: 160px;
    }
    /* Button Styles */
    .button-box{
        font-size: 0.85em;
        padding: 0.35em 1.8em;
    }
    /* Button General Size */
    a.button-generalSize{
        font-size: 0.95em;
        padding: 0.38em 1.8em;
    }
    /* Icons Social Media */
    a.icon-socialmedia{
        width: 45px;
    }
    /* Fixed Social */
    div#fixed-social{
        top: 8%;
        padding: 11px 0px 11px 11px;
        border-radius: 20px 0px 0px 20px;
        -webkit-border-radius: 20px 0px 0px 20px;
        -moz-border-radius: 20px 0px 0px 20px;
    }
    /* Text Styles */
    .title{
        font-size: 2.4em;
        margin-bottom: 0.7em;
    }
    .subtitle{
        font-size: 1.6em;
    }
    .p-Normal{
        font-size: 1.2em;
        width: 85%;
        margin: 0 auto 1.1em auto;
    }
    /* Header */
    header{
        padding: 10px 0;
        border-bottom: 4px solid var(--redFp);
    }
    #header-container{
        gap: 16px;
    }
    #header-1{
        order: 1;
    }
    #header-2{
        display: none;
        opacity: 0;
        visibility: hidden;
    }
    #header-3{
        order: 2;
    }
    #header-4{
        order: 3;
    }
    /* Menu Header */
    #menu-button{
        padding: 0.8rem;
        font-size: 1.8rem;
    }
    #menu{
        width: 270px;
        margin: 14px 0px 0px -220px;
        -webkit-border-bottom-right-radius: 12px;
        -moz-border-bottom-right-radius: 12px;
        -webkit-border-bottom-left-radius: 12px;
        -moz-border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        border-bottom-left-radius: 12px;
    }
    #menu > li > a{
        padding: 11px;
        font-size: 0.85em;
    }
    /* Slider */
    #slider-section{
        padding: 25px 0;
        margin: 75px 0 0 0;
    }
    button.button-slider{
        font-size: 1.2em;
        top: 50%;
        padding: 12px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }
    .slider-indicators {
        margin-top: 13px;
    }
    .slider-indicators .dot {
        height: 8px;
        width: 25px;
        margin: 0 4px;
    }
    .slide-box{
        height: 280px;
        gap: 20px;
    }
    .slide-info{
        width: 50%;
    }
    h2.slide-title{
        font-size: 2.4em;
        margin-bottom: 0.5em;
    }
    p.slide-subtitle{
        font-size: 1.4em;
        margin-bottom: 0.9em;
    }
    img.image-for-slide{
        max-width: 180px;
    }
    /* Main */
    main{
        margin-top: 50px;
        margin-bottom: 70px;
    }
    /* Sections */
    section{
        margin-bottom: 50px;
        padding-top: 100px;
    }
    /* Boxes styles for the Sections */
    .round-corner{
        -webkit-border-radius: 18px;
        -moz-border-radius: 18px;
        border-radius: 18px;
    }
    /* Section: Acerca de "Literatura que forja Sentimientos"*/
    .firepanda-icon{
        max-width: 120px;
        margin: 0 auto 25px auto;
    }
    /* Section Conoce la Firepanda Magazine */
    div#box-conoceFPMagazine{
        margin: 0 auto 50px auto;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
        align-content: center;
        gap: 15px;
        padding: 4%;
    }
    section#s-fpMagazine .title,
    section#s-fpMagazine .p-Normal{
        text-align: center !important;
    }
    div#cover-FPMag{
        width: 50%;
        height: auto;
        overflow: hidden;
        margin-bottom: 18px;
        -webkit-border-radius: 18px;
        -moz-border-radius: 18px;
        border-radius: 18px;
    }
    div#cover-FPMag > img{
        width: 100%;
        max-width: 450px;
        min-width: 1px;
        height: auto;
    } 
    div#cover-FPMag-Description{
        padding: 0px;
    }
    div#cover-FPMag-Description > hr{
        margin: 15px auto 15px auto;
    }
    div#buttonsMagazine-container{
        justify-content: center;
        gap: 18px;
    }
    /* News Letter Styles */
    div.newsletter-div{
        height: auto;
        padding: 4%;
        flex-flow: column wrap;
        justify-content: center;
        align-items: center;
        align-content: center;
    }
    div.newsletter-left{
        flex-grow: 0;
        margin-left: 4%;
        margin-right: 4%;
    }
    div.newsletter-left > p{
        font-size: 1.6em;
        text-align: center;
        margin-bottom: 0.8em;
    }
    a.newsletter-right{
        width: 190px;
        margin-right: auto;
        margin-left: auto;
        font-size: 16px;
        text-align: center;
    }
    img#cover-newsletter{
        top: 12%;
        left: auto;
        right: auto;
        opacity: 0.4;
    }
    /* Section: Nuestras Publicaciones */
    #books-container{
        gap: 25px 35px;
    }
    a.book-cover > img{
        height: 310px;
    }
    /* Section: Nuestros Pilares de Fuego */
    div#pilares-container{
        flex-flow: row wrap;
        justify-content: center;
        align-items: stretch;
        align-content: center;
        gap: 24px;
    }
    div.box-pilar{
        max-width: 180px;
        min-width: 1px;
        gap: 14px;
        padding: 18px;
    }
    div.box-pilar > img{
        max-width: 130px;
    }
    div.box-pilar > h4{
        font-size: 1.2em;
    }
    /* Section: Inicia tu viaje de Autor */
    div#servicios-container{
        width: 90%;
        grid-template-columns:  repeat(2, 1fr);
        grid-template-rows: 1fr;
        gap: 16px;
        margin-bottom: 50px;
    }
    div.colored-div{
        height: 28px;
    }
    div.servicios-wrapper{
        padding: 18px 24px;
    }
    div.icon-servicios-container{
        max-width: 140px;
        margin: 0 auto 25px auto;
        padding: 12px;
    }
    div.servicios-wrapper > h4{
        font-size: 1.4em;
        margin-bottom: 0.9em;
    }
    div.servicios-wrapper > ul{
        text-align: center;
    }
    div.servicios-wrapper > ul > li{
        font-size: 0.9em;
        margin-bottom: 0.5em;
    }
    div#post-publishing{
        padding: 25px;
        margin-bottom: 50px;
    }
    div#post-publishing-textbox{
        margin: 0 auto 24px auto;
        padding: 0.8em 4%;
    }
    div#post-publishing-textbox > h3{
        font-size: 1.7em;
    }
    div#post-publishing > p{
        max-width: 960px;
        font-size: 1.2em;
    }
    /* Nuestros Distribuidores */
    div#distribuidores-container{
        gap: 25px 55px;
    }
    div#distribuidores-container > a{
        max-width: 100px;
    }
    #container-checks{
        flex-flow: row wrap;
        gap: 30px;
        margin-top: 50px;
    }
    div.box-check{
        max-width: 340px;
        padding: 20px 30px 14px 20px;
        font-size: 1.1em;
        border: 2px solid var(--brownFp);
    }
    div.box-check > i{
        font-size: 3.5em;
        top: -40%;
    }
    /* Section: Nuestro Director Creativo */
    #director-creativo-container{
        flex-flow: column wrap;
        gap: 24px;
    }
    #dcreativo-foto{
        max-width: 300px;
    }
    p.bio-p{
        font-size: 1.1em;
        text-align: center;
    }
    p.autorName{
        font-size: 1.5em;
        text-align: center;
    }
    p.quote{
        max-width: 100%;
        font-size: 1.1em;
        text-align: center;
    }
    /* Section: Firepanda Learning */
    div#box-intro-learning{
        padding: 30px;
        margin-bottom: 50px;
    }
    div#learning-desc-container{
        flex-flow: row wrap;
        justify-content:center;
        gap: 24px;
    }
    div#learning-desc-container > .p-Normal{
        text-align: center !important;
        margin: 0 auto !important;
    }
    div#learning-desc-container > img{
        max-width: 120px;
        margin-bottom: 25px;
    }
    section#s-fpLearning > iframe{
        max-width: 396px;
        height: 219px;
        margin: 0 auto 30px auto;
    }
    section#s-fpLearning > h4{
        margin: 0 auto 0.5em auto;
        font-size: 1.8em;
    }
    div#fotos-learning-container{
        gap: 25px;
        margin: 50px auto;
    }
    div#fotos-learning-container > img{
        width: 100%;
        max-width: 250px;
        height: 350px;
    }
    div#box-comunidad{
        padding: 24px;
        margin-top: 50px;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
        align-content: center;
        gap: 18px;
        border: 4px solid var(--redFp);
    }
    div#box-comunidad > img{
        max-width: 140px;
    }
    div#box-comunidad h5,
    div#box-comunidad p{
        text-align: center;
    }
    div#box-comunidad h5{
        font-size: 1.6em;
        margin-bottom: 0.5em;
    }
    div#box-comunidad p{
        font-size: 0.9em;
    }
    /* Footer */
    .footer-box{
        padding: 22px 0;
    }
    #footer-section-1{
        margin-bottom: 22px;
    }
    #footer-section-2{
        flex-flow: row wrap;
        justify-content: center;
        align-items: flex-start;
        align-content: center;
        gap: 32px;
    }
    #fs1-left{
        flex-grow: 0;
    }
    #fs2-column1{
        width: 100%;
        flex-grow: 0;
    }
    #fs2-column2{
        width: 100%;
        flex-grow: 0;
    }
    #fs2-column3{
        width: 100%;
    }
    .fs2-containerbox{
        margin-bottom: 20px;
    }
    .fs2-containerbox > h6{
        font-size: 1.4em;
        margin-bottom: 0.3em;
        text-align: center;
    }
    /* Box Contacto Footer */
    #fs2-contacto{
        width: 100%;
        font-size: 1.1em;
        text-align: center;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
    }
    /* Footer Social Media  */
    ul#footer-socialmedia{
        flex-flow: row wrap;
        justify-content: center;
        gap: 4px;
    }
    /* Footer Podcast  */
    /*Footer Maps */
    ul.lists-footer-maps > li{
        margin-bottom: 0.5em;
        text-align: center;
    }
    ul.lists-footer-maps > li > a{
        font-size: 0.85em;
    }
    /* Styles Legal Doc */
    /* Aviso de Privacidad | Términos y Condiciones */
    .legal-document{
        padding: 18px 4%;
    }
    .legal-document > h2,
    .legal-document > h3,
    .legal-document > p,
    .legal-document > ul{
        margin-bottom: 1.1em;
    }
    .legal-document > h2, 
    .legal-document > h3{
        margin-top: 1.8em;
    }
    .legal-document > h2 {
        font-size: 1.8em;
    }
    .legal-document > h3 {
        font-size: 1.4em;
    }
    .legal-document > p,
    .legal-document > ul {
        font-size: 1em;
    }
    .legal-document > ul > li{
        margin-left: 0.9em;
        margin-bottom: 0.9em;
    }
    /* Styles Blog */
    section#intro-blog > h1{
        font-size: 2.5em;
    }
    section#intro-blog > p{
        font-size: 1.4em;
    }
    .blog-doc{
        padding: 50px 4%;
    }
    .blog-doc > h2{
        font-size: 2.1em;
        margin-bottom: 1em;
    }
    .blog-doc > p.author-blog{
        font-size: 1.1em;
        line-height: 1.2em;
        margin-bottom: 1.2em;
    }
    .blog-doc > p.text-blog{
        font-size: 1.1em;
        line-height: 1.4em;
        margin-top: 2em;
        margin-bottom: 2em;
    }
    .blog-doc > .image-container-blog{
        flex-flow: row wrap;
        gap: 3%;
        justify-content: center;
        align-items: center;
        align-content: center;
        margin-bottom: 40px;
    }
    .blog-doc > .image-container-blog > img{
        width: 48%;
        max-width: 350px;
        margin-bottom: 4%;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
    }
}
/* Styles: 705px */
@media only screen and (max-width: 705px){
    /* Slider */
    #slider-section{
        padding: 23px 0;
        margin: 73px 0 0 0;
    }
    button.button-slider{
        font-size: 1.1em;
        top: 90%;
        padding: 11px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    .slider-indicators {
        margin-top: 12px;
    }
    .slider-indicators .dot {
        height: 7px;
        width: 23px;
        margin: 0 2px;
    }
    .slide-box{
        height: 270px;
        gap: 17px;
    }
    .slide-info{
        width: 55%;
    }
    h2.slide-title{
        font-size: 2.2em;
        margin-bottom: 0.4em;
    }
    p.slide-subtitle{
        font-size: 1.2em;
        margin-bottom: 0.8em;
    }
    img.image-for-slide{
        max-width: 170px;
    }
    /* Fixed Social */
    div#fixed-social{
        display: none;
        opacity: 0;
        visibility: hidden;
    }
    /* Footer */
    #footer-section-1{
        flex-flow: column wrap;
        gap: 10px;
    }
}
/* Styles: 450px */
@media only screen and (max-width: 450px){
    /* Logo Styles */
    a.logo-container{
        width: 140px;
    }
    /* Button Styles */
    .button-box{
        font-size: 0.8em;
        padding: 0.3em 1.6em;
    }
    /* Button General Size */
    a.button-generalSize{
        font-size: 0.9em;
        padding: 0.36em 1.6em;
    }
    /* Icons Social Media */
    a.icon-socialmedia{
        width: 40px;
    }
    /* Text Styles */
    .title{
        font-size: 2em;
        margin-bottom: 0.5em;
    }
    .subtitle{
        font-size: 1.4em;
    }
    .p-Normal{
        font-size: 1em;
        width: 95%;
        margin: 0 auto 0.9em auto;
    }
    /* Header */
    header{
        padding: 6px 0;
    }
    #header-container{
        gap: 14px;
    }
    #header-1{
        order: 1;
    }
    #header-3{
        display: none;
        opacity: 0;
        visibility: hidden;
    }
    #header-4{
        order: 2;
    }
    /* Menu Header */
    #menu-button{
        padding: 0.7rem;
        font-size: 1.7rem;
    }
    #menu{
        width: 210px;
        margin: 9px 0px 0px -164px;
        -webkit-border-bottom-right-radius: 10px;
        -moz-border-bottom-right-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
        -moz-border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    #menu > li > a{
        padding: 10px;
        font-size: 0.80em;
    }
    /* Slider */
    #slider-section{
        padding: 20px 0;
        margin: 60px 0 0 0;
    }
    button.button-slider{
        font-size: 1em;
        top: 90%;
        padding: 10px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }
    .slider-indicators {
        margin-top: 10px;
    }
    .slider-indicators .dot {
        height: 6px;
        width: 22px;
    }
    .slide-box{
        height: 250px;
        flex-flow: row nowrap;
        gap: 4%;
    }
    .slide-info{
        width: 48%;
    }
    h2.slide-title{
        font-size: 1.8em;
        margin-bottom: 0.3em;
    }
    p.slide-subtitle{
        font-size: 1em;
        margin-bottom: 0.7em;
    }
    .slide-img{
        width: 48%;
    }
    img.image-for-slide{
        max-width: 130px;
        min-width: 1px;
    }
    /* Main */
    main{
        margin-top: 40px;
        margin-bottom: 60px;
    }
    /* Sections */
    section{
        margin-bottom: 40px;
        padding-top: 80px;
    }
    /* Boxes styles for the Sections */
    .round-corner{
        -webkit-border-radius: 16px;
        -moz-border-radius: 16px;
        border-radius: 16px;
    }
    /* Section: Acerca de "Literatura que forja Sentimientos"*/
    .firepanda-icon{
        max-width: 100px;
        margin: 0 auto 20px auto;
    }
    /* Section Conoce la Firepanda Magazine */
    div#box-conoceFPMagazine{
        margin: 0 auto 40px auto;
        gap: 0px;
    }
    div#cover-FPMag{
        -webkit-border-radius: 16px;
        -moz-border-radius: 16px;
        border-radius: 16px;
    }
    div#cover-FPMag-Description > hr{
        margin: 12px auto 12px auto;
    }
    div#buttonsMagazine-container{
        gap: 15px;
    }
    /* News Letter Styles */
    div.newsletter-left > p{
        font-size: 1.4em;
        margin-bottom: 0.6em;
    }
    a.newsletter-right{
        width: 180px;
        font-size: 14px;
    }
    img#cover-newsletter{
        top: 12%;
        left: auto;
        right: auto;
        opacity: 0.4;
    }
    /* Section: Nuestras Publicaciones */
    #books-container{
        gap: 10px 20px;
    }
    a.book-cover > img{
        height: 200px;
    }
    /* Section: Nuestros Pilares de Fuego */
    div#pilares-container{
        gap: 14px;
    }
    div.box-pilar{
        width: 44%;
        max-width: 180px;
        min-width: 1px;
        gap: 12px;
        padding: 14px;
    }
    div.box-pilar > img{
        max-width: 140px;
    }
    div.box-pilar > h4{
        font-size: 1em;
    }
    /* Section: Inicia tu viaje de Autor */
    div#servicios-container{
        width: 100%;
        grid-template-columns:  repeat(1, 1fr);
        gap: 14px;
        margin-bottom: 40px;
    }
    div.colored-div{
        height: 24px;
    }
    div.servicios-wrapper{
        padding: 16px 22px;
    }
    div.icon-servicios-container{
        max-width: 100px;
        margin: 0 auto 20px auto;
        padding: 10px;
    }
    div.servicios-wrapper > h4{
        font-size: 1.2em;
        margin-bottom: 0.8em;
    }
    div.servicios-wrapper > ul > li{
        font-size: 0.85em;
        margin-bottom: 0.45em;
    }
    div#post-publishing{
        padding: 20px;
        margin-bottom: 40px;
    }
    div#post-publishing-textbox{
        margin: 0 auto 22px auto;
        padding: 0.6em 4%;
    }
    div#post-publishing-textbox > h3{
        font-size: 1.2em;
    }
    div#post-publishing > p{
        font-size: 1.1em;
    }
    #container-checks{
        gap: 25px;
        margin-top: 40px;
    }
    div.box-check{
        max-width: 320px;
        padding: 16px 26px 10px 16px;
        font-size: 1em;
    }
    div.box-check > i{
        font-size: 3em;
        top: -40%;
    }
    /* Section: Nuestro Director Creativo */
    #director-creativo-container{
        gap: 20px;
    }
    #dcreativo-foto{
        max-width: 250px;
    }
    p.bio-p{
        font-size: 1em;
    }
    p.autorName{
        font-size: 1.3em;
    }
    p.quote{
        font-size: 1em;
    }
    /* Nuestros Distribuidores */
    div#distribuidores-container{
        gap: 15px 35px;
    }
    div#distribuidores-container > a{
        max-width: 80px;
    }
    /* Section: Firepanda Learning */
    div#box-intro-learning{
        padding: 25px;
        margin-bottom: 40px;
    }
    div#learning-desc-container{
        gap: 20px;
    }
    div#learning-desc-container > .p-Normal{
        text-align: center !important;
        margin: 0 auto !important;
    }
    div#learning-desc-container > img{
        max-width: 100px;
        margin-bottom: 20px;
    }
    section#s-fpLearning > iframe{
        max-width: 280px;
        height: 155px;
        margin: 0 auto 25px auto;
    }
    section#s-fpLearning > h4{
        margin: 0 auto 0.4em auto;
        font-size: 1.6em;
    }
    div#fotos-learning-container{
        gap: 20px;
        margin: 40px auto;
    }
    div#fotos-learning-container > img{
        width: 44%;
        max-width: 200px;
        height: 200px;
    }
    div#box-comunidad{
        padding: 20px;
        margin-top: 40px;
        gap: 16px;
        border: 3px solid var(--redFp);
    }
    div#box-comunidad > img{
        max-width: 120px;
    }
    div#box-comunidad h5{
        font-size: 1.4em;
        margin-bottom: 0.4em;
    }
    div#box-comunidad p{
        font-size: 0.8em;
    }
    /* Footer */
    .footer-box{
        padding: 20px 0;
    }
    #fs2-column2{
        width: 100%;
    }
    #fs2-column3{
        width: 100%;
    }
    .fs2-containerbox{
        margin-bottom: 16px;
    }
    /* Box Contacto Footer */
    #fs2-contacto{
        font-size: 0.9em;
    }
    /*Footer Maps */
    ul.lists-footer-maps > li{
        margin-bottom: 0.45em;
    }
    ul.lists-footer-maps > li > a{
        font-size: 0.8em;
    }
    /* Styles Legal Doc */
    /* Aviso de Privacidad | Términos y Condiciones */
    .legal-document{
        padding: 14px 4%;
    }
    .legal-document > h2,
    .legal-document > h3,
    .legal-document > p,
    .legal-document > ul{
        margin-bottom: 1em;
    }
    .legal-document > h2, 
    .legal-document > h3{
        margin-top: 1.6em;
    }
    .legal-document > h2 {
        font-size: 1.6em;
    }
    .legal-document > h3 {
        font-size: 1.2em;
    }
    .legal-document > p,
    .legal-document > ul {
        font-size: 0.9em;
    }
    .legal-document > ul > li{
        margin-left: 0.8em;
        margin-bottom: 0.8em;
    }
    /* Styles Blog */
    section#intro-blog > h1{
        font-size: 2em;
    }
    section#intro-blog > p{
        font-size: 1.2em;
    }
    .blog-doc{
        padding: 40px 4%;
    }
    .blog-doc > h2{
        font-size: 1.8em;
        margin-bottom: 0.9em;
    }
    .blog-doc > p.author-blog{
        font-size: 1em;
        line-height: 1.1em;
        margin-bottom: 1.1em;
    }
    .blog-doc > p.text-blog{
        font-size: 1em;
        line-height: 1.3em;
        margin-top: 1.8em;
        margin-bottom: 1.8em;
    }
    .blog-doc > .image-container-blog{
        flex-flow: row wrap;
        gap: 3%;
        justify-content: center;
        align-items: center;
        align-content: center;
        margin-bottom: 30px;
    }
    .blog-doc > .image-container-blog > img{
        max-width: 250px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }
}