.grecaptcha-badge { display: none !important }


.cierreTienda {
  background: #ededed;
  padding: 50px;
  text-align: center;
}
.cierreTienda svg {
  font-size: 4.5rem;
}
.cierreTienda h3 {
  margin-top: 30px;
  margin-bottom: 20px;
  font-size: 1.9rem;
  font-weight: 500;
}
.cierreTienda h4 {
  font-size: 1.6rem;
}


/*=============================================
/* -CSS GENERAL
=============================================*/

@import './Poppins/poppins.css';

:root {
  --colorTexto: #494949;

  --mainColor: #000;
  --mainColorDarkness: #000;
  --mainColorBrightness: #000;
  --secondaryColor: #000;
  --secondaryColorDarkness: #000;
  --secondaryColorBrightness: #000;

  --borderRadius: 0;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
	text-decoration: none;
  outline: none;
	font-family: 'Poppins', sans-serif;
  color: var(--colorTexto);
  font-size: 10px;
}

ul, ol { padding:0px; }
a:visited, a:link, a:focus, a:hover, a:active { list-style: none; text-decoration: none; }

.backColor, .backColor a{
	background: var(--mainColor);
	color: #fff;
}
.backColorOut, .backColorOut a{
	background: #fff;
	color: #000;
}

input {
  border: none;
  box-shadow: none;
  padding: 10px 16px;
  font-size: 1.6em;
}

input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

button {
  cursor: pointer;
  border: none;
}

button.btnMain,
input.btnMain {
  padding: 10px 16px;
  background: var(--mainColorBrightness);
  color: #fff;
  font-size: 1.8rem;
  text-transform: uppercase;
  border-radius: var(--borderRadius);
  cursor: pointer;
  transition: all 300ms;
}
button.btnMain:hover,
input.btnMain:hover {
  background: var(--mainColorDarkness);
}
button.btnMain:disabled,
input.btnMain:disabled {
  cursor: not-allowed;
  background: var(--mainColorBrightness) !important;
}
button.btnChico,
input.btnChico {
  padding: 6px 12px;
  font-size: 1.4rem; 
}
button.btnMain path,
input.btnMain path { fill: #fff; }

.cantidadTitulo {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
}
.cantidadTitulo button {
  border: 2px solid var(--mainColor);
  outline:none;
  -webkit-appearance: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  transition: all 300ms;
  background: none;
}
.cantidadTitulo button.menos { border-radius: var(--borderRadius) 0 0 var(--borderRadius); }
.cantidadTitulo button.mas { border-radius: 0 var(--borderRadius) var(--borderRadius) 0 ; }
.cantidadTitulo button:hover { background: var(--mainColor); }
.cantidadTitulo button:hover path { fill: #fff; }
.cantidadTitulo input[type=number] {
  max-width: 50px;
  font-size: 1.6rem;
  font-weight: 500;
  border: solid var(--mainColor);
  border-width: 2px 0px;
  text-align: center;
  padding: 0;
}

.novedad {
  background: var(--mainColor);
  color: #fff !important;
  font-size: 1.2rem;
  font-weight: 500;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--borderRadius);
  justify-self: flex-start;
  transition: all 300ms;
}

#scrollUp {
  bottom: 20px;
	right: 20px;
	width: 50px;
  height: 50px;
  border-radius: 100%;
  background: var(--secondaryColor);
  display: grid;
  justify-content: center;
  align-items: center;
}
#scrollUp path { color: var(--colorTexto); }

body > .main {
  padding: 30px 175px;
}
@media screen and (max-width: 1400px) {
  body > .main {padding: 20px 125px;}
}
@media screen and (max-width: 1300px) {
  body > .main {padding: 20px 75px;}
}
@media screen and (max-width: 1200px) {
  body > .main {padding: 10px 25px;}
}
@media screen and (max-width: 1050px) {
  .productos-slider ul.main .precio-oferta {
    grid-template-columns: unset;
    grid-template-rows: minmax(auto, auto) minmax(auto, auto);
    grid-gap: 10px;
  }
}

@media screen and (max-width: 500px) {
  body > .main {padding: 20px 15px;}

  .swiper-container-slider {margin-bottom: 40px !important;}

  .breadcrumb-main {padding: 30px 15px;}

  .productos-slider {margin-bottom: 50px;}
  .productos-slider .tituloDestacado h1 {font-size: 20px;}
  .productos-slider .tituloDestacado {margin-bottom: 10px;}

  .content .titulo-productos {margin-bottom: 20px;}
  .content .barraProductos-productos {margin-bottom: 20px;}

  .content ul.main-productos {
    grid-template-columns: 1fr 1fr;
    grid-gap: 50px 15px;
  }
}



/*=============================================
/* -CSS SWEET ALERT
=============================================*/
.swal-button {
  padding: 10px 24px;
  font-size: 1.6rem;
  font-weight: 400;
  color: #fff;
  background-color: var(--mainColorBrightness);
  border-radius: var(--borderRadius);
  box-shadow: none !important;
  transition: all 300ms;
}
.swal-button:not([disabled]):hover,
.swal-button:active { background-color: var(--mainColorDarkness); }
.swal-modal {border-radius: var(--borderRadius);}
.swal-text {
  text-align: center;
  font-size: 1.8rem;
}
.swal-btn-center .swal-footer {text-align: center;}

.swal-icon--warning { border-color: var(--mainColor) !important; }
.swal-icon--warning__body, .swal-icon--warning__dot { background-color: var(--mainColor) !important; }
@keyframes pulseWarning {
  0% { border-color: var(--mainColor) !important; }
  100% { border-color: var(--mainColor) !important; }
}

.swal-icon--error { border-color: var(--mainColor) !important; }
.swal-icon--error__line { background-color: var(--mainColor) !important; }

.swal-icon--success__ring { border-color: var(--mainColor) !important; }
.swal-icon--success__line { background-color: var(--mainColor) !important; }

/*=============================================
/* -CSS BREADCRUMB
=============================================*/
.breadcrumb {
  width: 100%;
  background:#f3f3f3;
  display: grid;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
}
.breadcrumb ol {
  display: flex;
  align-items: center;
  grid-gap: 10px 10px;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
}
.breadcrumb h4,
.breadcrumb a {
  font-size: 16px;
  color: #1b1b1b;
  font-weight: 400;
}
@media screen and (max-width:500px) {
  .breadcrumb {
    padding: 30px 10px;
  }
}



/*=============================================
/* -CSS HEADER
=============================================*/
header { background: var(--secondaryColor); }
.header {
  width: 100%;
  padding: 8px 40px;
  display: grid;
  grid-template-columns: min-content min-content max-content;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo  ninos   carro"
                       "menu  ninos   buscador";
  align-items: center;
  justify-content: space-between;
}
.header #logotipo {grid-area: logo; justify-self: flex-start;}
.header #carrito {grid-area: carro; justify-self: flex-end;}
.header #menu {grid-area: menu; justify-self: flex-start;}
.header #buscador {grid-area: buscador; justify-self: flex-end;}
.header #g-ninos {grid-area: ninos;}



/*--------------------- LOGO -----------------------*/
.header #logo img {max-width: 140px;}



/*------------------- BUSCADOR ---------------------*/
.header #buscador {
  display: grid;
  grid-template-columns: 1fr auto;
  width: 100%;
  justify-items: flex-end;
}
.header #buscador input {
  width: 100%;
  max-width: 300px;
  border-radius: var(--borderRadius) 0 0 var(--borderRadius);
  padding: 6px 16px;
}
.header #buscador button {
  height: 100%;
  padding: 0 12px;
  background: #fff;
  color: var(--colorTexto);
  font-size: 1.6em;
  border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
}



/*------------------- PERFIL ---------------------*/
.header #carrito .elemento .perfil { position: relative; }
.header #carrito .elemento .perfil:hover .perfilMenu { display: block; }
.header #carrito .elemento .perfil .nombre {
  display: grid;
  grid-auto-flow: column;
  justify-content: flex-start;
  align-items: center;
  grid-gap: 5px;
  font-size: 1.5rem;
  color: #fff;
}
.header #carrito .elemento .perfil .nombre path { fill: #fff; }
.header #carrito .elemento .perfil .perfilMenu {
  display: none;
  width: max-content;
  padding: 5px 0;
  position: absolute;
  right: 0;
  background: var(--mainColorBrightness);
  z-index: 10;
  border-radius: var(--borderRadius);
}
.header #carrito .elemento .perfil .perfilMenu a {
  display: block;
  padding: 5px 25px;
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  transition: all 300ms;
}
.header #carrito .elemento .perfil .perfilMenu a:hover { background: var(--mainColorDarkness); }
.header #carrito .elemento .inicial-img {
  color: #fff;
  background: var(--mainColor);
  width: 50px;
  height: 50px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  font-size: 4rem;
  font-weight: 600;
  overflow: hidden;
}


/*------------------- CARRO ---------------------*/
.header #carrito {
  display: grid;
  grid-template-columns: minmax(auto, max-content) minmax(auto, max-content);
  gap: 50px;
  justify-content: end;
}
.header #carrito .elemento {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  grid-gap: 10px;
}
.header #carrito .elemento .icon {
  border-radius: 100%;
  width: 40px;
  height: 40px;
  font-size: 2em;
  display: grid;
  justify-content: center;
  align-items: center;
  background: #fff;
}
.header #carrito .elemento .icon path { fill: #000; }
.header #carrito .elemento .texto {
  display: grid;
  grid-gap: 5px;
}
.header #carrito .elemento .texto a,
.header #carrito .elemento .texto p,
.header #carrito .elemento .texto p span { font-size: 1.4rem; color: #fff; }
.header #carrito .elemento .texto p.pointer { cursor: pointer; }



/*------------------- MENU ---------------------*/
.header #menu ul {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 30px;
  align-items: center;
}
.header #menu ul li {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  grid-gap: 7px;
  cursor: pointer;
  font-size: 1.5em;
  color: #fff;
}
.header #menu ul li path { fill: #fff; }
.header #menu ul li p,
.header #menu ul li a {font-size: 1.5rem; color: #fff; }
.header #menu ul li .transition-i {transition: all 300ms; transform: rotate(0deg);}
.header #menu ul li .rotar-i {transition: all 300ms;transform: rotate(180deg);}



/*---------------- G NIÑOS -----------------------*/
.header #g-ninos a {display: block; text-align: center;}
.header #g-ninos img {max-height: 130px;}



/*---------------- OFERTAS -----------------------*/
.header  #ofertas a {
  color: #fff;
  font-size: 17px;
  display: grid;
  justify-content: center;
  text-align: center;
  grid-gap: 10px;
}




/*------------------- SUBMENU ---------------------*/
header .submenu {
  background: var(--secondaryColorDarkness);
  display: none;
  padding: 0 50px 30px 50px;
}
header .submenu > ul {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 15px 40px;
  margin: 0;
}
header .submenu ul.subtemas {
  border-top: 2px solid var(--colorTexto);
  margin-top: 5px;
  padding-top: 4px;
  display: grid;
  grid-gap: 5px;
}

header .submenu h4 { font-weight: 600; }
header .submenu a { display: block; margin: 10px 0; color: #fff; font-size: 1.6rem; transition: all 300ms; }
header .submenu a:hover { text-decoration: underline; }


@media screen and (max-width: 1400px) {
  .header {padding: 20px;}
  .header #menu ul {grid-gap: 20px;}
}
@media screen and (max-width: 1200px) {
  .header {padding: 10px 20px;}
}
@media screen and (max-width: 500px) {
  header * { user-select: none; }

  .header {
    padding: 10px;
    grid-template-columns: 1fr min-content min-content;
    grid-template-rows: unset;
    grid-template-areas: "logo ofertas ninos" "carro carro carro" "buscador buscador buscador" "menu menu menu";
    grid-gap: 20px 30px;
  }
  .header #g-ninos img {
    max-height: unset;
    max-width: 60px;
  }
  .header #ofertas img {
    max-width: 60px !important;
  }
  .header #ofertas a {
    font-size: 15px;
    grid-gap: 5px;
  }
  .header #carrito {
    width: 100%;
    justify-content: space-between;
    grid-gap: 10px;
  }
  .header #carrito .elemento .icon {
    width: 35px;
    height: 35px;
    font-size: 1.6em;
  }
  .header #carrito .elemento .perfil .perfilMenu {
    left: 0;
    right: unset;
  }
  .header #buscador input {max-width: unset;}

  .header #menu {grid-template-columns: 1fr; width: 100%;}
  .header #menu ul {
    width: 100%;
    grid-template-areas: "btnNovedades btnAutores" "ebooks revistas" "btnTemas btnColecciones";
    grid-gap: 10px 0;
    justify-items: baseline;
  }
  .header #menu ul li#btnNovedades {grid-area: btnNovedades;}
  .header #menu ul li#btnTemas {grid-area: btnTemas;}
  .header #menu ul li#btnColecciones {grid-area: btnColecciones;}
  .header #menu ul li#ebooks {grid-area: ebooks;}
  .header #menu ul li#revistas {grid-area: revistas;}
  .header #menu ul li#btnAutores {grid-area: btnAutores;}
  .header #menu ul li#btnQuienesSomos {display: none;}

  header .submenu { padding: 20px 10px; }
  header .submenu > ul {
    grid-gap: 20px 10px;
    grid-template-columns: repeat(2, 1fr);
  }
  header .submenu > ul h4 { font-size: 15px; }
  header .submenu > ul a { margin: 0; }
}




/*=============================================
/* -CSS MODAL
=============================================*/
.ingresarRegistraModal {
  max-width: 600px;
  width: 100%;
  padding: 0;
  border-radius: calc(var(--borderRadius) + 5px);
}
.modal1000 { max-width: 1000px; }
.ingresarRegistraModal .btnCerrarModal {
  border-radius: 1px solid #000;
  background: #fff;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  display: grid;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -20px;
  left: 20px;
  font-size: 1.6rem;
}
.ingresarRegistraModal .cerrar path { fill: var(--colorTexto); }
.ingresarRegistraModal .grid {
  display: grid;
  grid-gap: 30px;
}
.ingresarRegistraModal .headerModal {
  padding: 12px;
  border-radius: var(--borderRadius) var(--borderRadius) 0 0;
}
.ingresarRegistraModal .headerModal h3 {
  font-size: 2.4rem;
  font-weight: 500;
  text-align: center;
  color: #fff;
  text-transform: uppercase;;
}
.ingresarRegistraModal form {
  padding: 0 20px;
  display: grid;
  grid-gap: 20px;
}
.ingresarRegistraModal form.pb {
  padding: 20px 30px 50px 30px;
  grid-gap: 50px;
}
.ingresarRegistraModal form > p {
  font-size: 1.4rem;
  font-weight: 500;
  text-align: justify;
}
.ingresarRegistraModal form p.alert {
  margin-top: 5px;
  text-align: right;
  font-size: 1.5rem;
  font-weight: 500;
}
.ingresarRegistraModal form .input > div {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 35px 1fr;
}
.ingresarRegistraModal form .input span {
  display: grid;
  justify-content: flex-end;
  align-items: center;
  font-size: 1.6rem;
  background: #e8e8e8;
  border-radius: var(--borderRadius) 0 0 var(--borderRadius);
}
.ingresarRegistraModal form .input input {
  border: none;
  background: #e8e8e8;
  border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
  width: 100%;
}
.ingresarRegistraModal form > a {
  justify-self: center;
  display: block;
  text-align: center;
  font-size: 1.5em;
  text-decoration: underline;
  cursor: pointer;
}
.ingresarRegistraModal form .checkbox > div {
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: column;
  grid-template-columns: auto 1fr;
  align-items: center;
}
.ingresarRegistraModal form .checkbox h5,
.ingresarRegistraModal form .checkbox a {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.6rem;
}
.ingresarRegistraModal form .checkbox a { text-decoration: underline; }


.ingresarRegistraModal .checkout {
  padding: 0 30px 30px 30px;
  display: grid;
  grid-gap: 50px;
}
.ingresarRegistraModal .checkout .direccion,
.ingresarRegistraModal .checkout .detalles {
  display: grid;
  grid-gap: 10px;
}
.ingresarRegistraModal .checkout .direccion .titulo,
.ingresarRegistraModal .checkout .detalles .titulo {
  padding: 15px 0;
  background: #e8e8e8;
  border-radius: var(--borderRadius);
  font-size: 1.8rem;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
}
.ingresarRegistraModal .checkout .direccion > div {
  display: grid;
  grid-gap: 5px;
}
.ingresarRegistraModal .checkout .direccion p,
.ingresarRegistraModal .checkout .direccion strong { font-size: 1.4rem; }
.ingresarRegistraModal .checkout .direccion strong { font-weight: 600; }

.ingresarRegistraModal .checkout .detalles > div {
  display: grid;
  grid-gap: 20px;
}
.ingresarRegistraModal .checkout .detalles .detalle {
  width: 100%;
  border-spacing: 0;
}
.ingresarRegistraModal .checkout .detalles .detalle .center { text-align: center; }
.ingresarRegistraModal .checkout .detalles .detalle .fondo { background: #e8e8e8;}
.ingresarRegistraModal .checkout .detalles .detalle .fondo:first-child { border-radius: var(--borderRadius) 0 0 var(--borderRadius); }
.ingresarRegistraModal .checkout .detalles .detalle .fondo:last-child { border-radius: 0 var(--borderRadius) var(--borderRadius) 0; }
.ingresarRegistraModal .checkout .detalles .detalle th,
.ingresarRegistraModal .checkout .detalles .detalle td { padding: 6px; }
.ingresarRegistraModal .checkout .detalles .detalle * { font-size: 1.4rem; }

.ingresarRegistraModal .checkout .detalles .total {
  justify-self: flex-end;
  max-width: 250px;
  width: 100%;
  border-spacing: 0;
}
.ingresarRegistraModal .checkout .detalles .total * { font-size: 1.4rem; }
.ingresarRegistraModal .checkout .detalles .total td { padding: 6px 15px; }
.ingresarRegistraModal .checkout .detalles .total .fondo { background: #e8e8e8;}
.ingresarRegistraModal .checkout .detalles .total .fondo:first-child { border-radius: var(--borderRadius) 0 0 var(--borderRadius); }
.ingresarRegistraModal .checkout .detalles .total .fondo:last-child { border-radius: 0 var(--borderRadius) var(--borderRadius) 0; }

.ingresarRegistraModal .checkout .openpay {
  display: grid;
  grid-gap: 20px 50px;
  grid-template-columns: auto auto;
}
.ingresarRegistraModal .checkout .openpay .titulo {
  grid-column: span 2;
  display: grid;
  grid-gap: 10px;
}
.ingresarRegistraModal .checkout .openpay .titulo h3 {
  font-size: 1.6rem;
  font-weight: 500;
}
.ingresarRegistraModal .checkout .openpay .credito p,
.ingresarRegistraModal .checkout .openpay .debito p {
  font-size: 14px;
  font-weight: 500;
}
.ingresarRegistraModal .procesando {
  padding: 30px 0;
  grid-gap: 20px;
  display: grid;
  justify-items: center;
}
.ingresarRegistraModal .procesando h2 {
  font-size: 2.4rem;
  font-weight: 500;
  text-align: center;
}
.ingresarRegistraModal .procesando h3 {
  font-size: 2rem;
  font-weight: 400;
  text-align: center;
}


.ingresarRegistraModal form .perfil {
  display: grid;
  grid-gap: 20px 50px;
  grid-template-columns: 1fr 1fr;
}
.ingresarRegistraModal form .perfil .nombre { grid-column: span 2; }
.ingresarRegistraModal form .perfil span h3 {
  font-size: 1.6rem;
  font-weight: 600;
}
.ingresarRegistraModal form .perfil input,
.ingresarRegistraModal form .perfil select {
  width: 100%;
  background: #e8e8e8;
  border-radius: var(--borderRadius);
  text-transform: uppercase;
}
.ingresarRegistraModal form .perfil select {
  border: none;
  box-shadow: none;
  padding: 10px 16px;
  font-size: 1.6em;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.ingresarRegistraModal form .perfil option {
  font-size: 1.6rem;
}
.ingresarRegistraModal form .perfil select::-ms-expand { display: none; }
.ingresarRegistraModal form .botones {
  display: grid;
  grid-gap: 20px;
  grid-auto-flow: column;
  justify-content: center;
}


.ingresarRegistraModal form.solicitarFactura {
  grid-gap: 10px;
}
.ingresarRegistraModal form.solicitarFactura h4 {
  font-size: 1.6rem;
  font-weight: 400;
}
.ingresarRegistraModal form.solicitarFactura h4 strong {
  font-size: 1.6rem;
  font-weight: 500;
}
.ingresarRegistraModal form.solicitarFactura select {
  width: 100%;
  padding: 10px 16px;
  background: #e8e8e8;
  border: none;
  border-radius: var(--borderRadius);
  font-size: 1.6rem;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.ingresarRegistraModal form.solicitarFactura option {
  font-size: 1.6rem;
}


.ingresarRegistraModal .fatlaDireccion {
  display: grid;
  justify-items: center;
  grid-gap: 20px;
  padding: 0 20px 30px 20px;
}
.ingresarRegistraModal .fatlaDireccion h3 {
  font-size: 2rem;
  font-weight: 500;
  text-align: center;
}


.ingresarRegistraModal .footerModal {
  padding: 15px;
  padding-top: 0;
  font-size: 1.4rem;
  text-align: right;
  background: #fff;
  border-radius: var(--borderRadius);
}
.ingresarRegistraModal .footerModal a {
  font-size: 1.4rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

@media screen and (max-width: 500px) {
  .ingresarRegistraModal form.pb { padding: 0 20px 20px 20px; }
  .ingresarRegistraModal form .perfil { grid-template-columns: 1fr; }

  .ingresarRegistraModal .checkout { padding: 0 20px 20px 20px; }
  .ingresarRegistraModal .checkout .openpay { grid-template-columns: 1fr; }
  .ingresarRegistraModal .checkout .openpay .titulo { grid-column: unset; }
}





/*=============================================
/* -CSS FOOTER
=============================================*/
footer {
	background: var(--mainColor);
	padding: 50px 100px;
  display: grid;
  grid-gap: 75px;
}
footer .submenu > ul {
  display: grid;
  grid-template-columns: repeat(6, minmax(auto, auto));
  grid-gap: 25px 40px;
  margin: 0;
}
footer .submenu ul.subtemas {
  border-top: 2px solid #fff;
  margin-top: 5px;
  padding-top: 4px;
  display: grid;
  grid-gap: 5px;
}
footer .submenu ul.subtemas a { font-size: 1.4rem; }
footer .submenu h4 { font-weight: 600; }
footer .submenu a { color: #fff; font-size: 1.6rem; }

footer .contacto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
}

footer .contacto .infoContacto {
  display: grid;
  grid-gap: 20px;
  align-content: flex-start;
}
footer .contacto .infoContacto h5 { word-wrap: anywhere; }
footer .contacto .infoContacto h5,
footer .contacto .infoContacto a {
  display: grid;
  grid-auto-flow: column;
  justify-content: flex-start;
  align-items: center;
  grid-gap: 10px;
  font-size: 1.6rem;
  font-weight: 500;
  color: #fff;
}
footer .contacto .infoContacto h5 svg { font-size: 2rem; }
footer .contacto .infoContacto h5 path { color: #fff; }

footer .contacto .formContacto {
  display: grid;
  grid-gap: 10px;
}
footer .contacto .formContacto h4 {
  font-size: 1.8rem;
  font-weight: 500;
  color: #fff;
}
footer .contacto .formContacto form {
  display: grid;
  grid-gap: 20px;
}
footer .contacto .formContacto form input,
footer .contacto .formContacto form textarea {
  width: 100%;
  border-radius: var(--borderRadius);
  font-size: 1.6rem;
  font-weight: 400;
  padding: 6px 15px;
}
footer .contacto .formContacto form textarea {
  resize: vertical;
  min-height: 150px;
  max-height: 250px;
  border: none;
}
footer .contacto .formContacto form input[type=submit] {
  width: max-content;
  justify-self: flex-end;
  cursor: pointer;
  background: #fff;
  transition: all 300ms;
}
footer .contacto .formContacto form input[type=submit]:hover {background: #eee;}
footer .contacto .formContacto form .alert {
  margin-top: 5px;
  font-size: 1.4rem;
  text-align: right;
  color: #fff;
}


.final {
	padding: 20px 100px;
  background: var(--mainColor);
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: space-between;
}

.final .copyright h5,
.final .copyright a {
  font-size: 1.4rem;
  font-weight: 500;
  color: #fff;
}
.final .copyright a { text-decoration: underline; }

@media screen and (max-width: 1200px) {
  footer { padding: 10px 50px; }
}
@media screen and (max-width: 1050px) {
  footer { padding: 10px 20px; }
}
@media screen and (max-width: 1000px) {
  footer .submenu ul { grid-template-columns: repeat(4, minmax(auto, auto)); }
}
@media screen and (max-width: 500px) {
  footer {padding: 15px;}
  footer .submenu {display: none;}

  footer .contacto {
    grid-template-columns: 1fr;
    grid-gap: 0;
  }

  .final {
    padding: 15px;
    grid-template-columns: 1fr;
    grid-gap: 50px;
  }
  .final ul {justify-content: flex-start;}
}



/*=============================================
/* -CSS SLIDE
=============================================*/
.slideMain .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  opacity: 1;
  border: 2px solid #fff;
  transition: all 300ms;
}
.slideMain .swiper-pagination-bullet-active {
  width: 15px;
  height: 15px;
}




/*=============================================
/* -CSS DESTACADOS
=============================================*/
.envioGratis {
  margin-bottom: 50px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 20px;
  align-items: center;
}
.envioGratis h3 { font-size: 24px; font-weight: 500;  }
.envioGratis h4 { font-size: 18px; font-weight: 500;  }
.destacados {
  margin-bottom: 75px;
}
.destacados .tituloDestacado {
  display: grid;
  grid-auto-flow: column;
  justify-content: flex-start;
  align-items: center;
  grid-gap: 10px;
}
.destacados .tituloDestacado h1 {
  margin-bottom: 0;
  font-weight: 600;
  color: var(--colorTexto);
  font-size: 2.2rem;
}

.swiper-button-prev-destacados,
.swiper-button-next-destacados {background: #fff;width: 40px;height: 40px;border-radius: 100%;color: #000000; box-shadow: 0 0 5px 2px rgba(0,0,0,0.6);}
.swiper-button-prev-destacados::after,
.swiper-button-next-destacados::after {display: none;}




/*=============================================
/* -CSS TITULOS
=============================================*/
.titulosMain {
  display: grid;
  grid-gap: 25px;
}
.titulosMain .relacionados {
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  align-items: center;
}
.titulosMain .relacionados h3 {
  font-size: 2.2rem;
  font-weight: 400;
}
.titulosMain .titulo h1 {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 2.5rem;
}
.titulosMain .titulo p {
  font-size: 1.5rem;
  text-align: justify;
  margin-top: 10px;
}
.titulosMain .barraTitulos {
  background: #f3f3f3;
  padding: 15px;
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--borderRadius);
}
.titulosMain .barraTitulos h4 {
  font-size: 1.6em;
  font-weight: 500;
}
.titulosMain .barraTitulos .ordenar {
  display: grid;
  grid-auto-flow: column;
  justify-content: flex-end;
  align-items: center;
  grid-gap: 10px;
}
.titulosMain .barraTitulos .ordenar .dropdown { position: relative; }
.titulosMain .barraTitulos .ordenar .dropdown ul {
  display: none;
  top: 40px;
  right: 0;
  position: absolute;
  width: max-content;
  padding: 5px 0;
  border-radius: var(--borderRadius);
  background: #fff;
  box-shadow: 0 0 2px 2px rgba(0,0,0,.1);
  z-index: 20;
}
.titulosMain .barraTitulos .ordenar .dropdown ul li a {
  display: block;
  font-size: 1.4rem;
  padding: 4px 10px;
  transition: all 300ms;
}
.titulosMain .barraTitulos .ordenar .dropdown ul li a:hover {
  background: #e8e8e8;
}


ul.titulos {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 50px;
  margin-bottom: 50px;
}
ul.titulosDestacados { display: unset; }
ul.titulos .elemento { display: grid; }
ul.titulos li {
  display: grid;
  grid-template-rows: minmax(auto, auto) min-content min-content;
  grid-gap: 10px;
}
ul.titulos li .portada {
  align-self: flex-end;
  overflow: hidden;
}
ul.titulos li .portada img { transition: 300ms all; }
ul.titulos li:hover .portada img {
  opacity: .8;
	transform: scale(1.1,1.1);
}
ul.titulos li > div {
  display: grid;
  grid-gap: 10px;
}
ul.titulos li .titulo-producto a {
  font-weight: 500;
  display: grid;
  grid-gap: 5px;
}
ul.titulos li .titulo-producto a span { transition: all 300ms; }
ul.titulos li:hover .titulo-producto a span { color: #000; }
ul.titulos li .titulo-producto .titulo { font-size: 15px; }
ul.titulos li .titulo-producto .titulo,
ul.titulos li .titulo-producto .autor {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 20px;
  height: 40px;
}
ul.titulos li .titulo-producto .subtitulo,
ul.titulos li .titulo-producto .autor {
  font-size: 14px;
  line-height: 20px;
}
ul.titulos li .precio-oferta {
  display: grid;
  grid-template-columns: minmax(auto, auto) minmax(auto, auto);
  justify-content: space-between;
  align-items: center;
}
ul.titulos li .precio-oferta .precio h2 {
  font-size: 20px;
  font-weight: 600;
}
ul.titulos li .precio-oferta .enlaces {
  display: grid;
  grid-auto-flow: column;
  gap: 5px;
}
ul.titulos li .ebook {
  height: 30.8px;
  position: relative;
}
ul.titulos li .ebook .tiendas {
  position: absolute;
  bottom: 100%;
  width: 100%;
  display: none;
  padding-bottom: 4px;
}
ul.titulos li .ebook:hover .tiendas {
  display: unset;
}
ul.titulos li .ebook .tiendas ul {
  background: #000;
}
ul.titulos li .ebook .tiendas li {
  display: block;
}
ul.titulos li .ebook .tiendas a {
  display: block;
  color: #fff;
  font-size: 15px;
  padding: 6px 10px;
  transition: all 300ms;
  text-transform: capitalize;
}
ul.titulos li .ebook .tiendas a:hover {
  background: #333;
}
ul.titulos li .ebook button {
  height: 100%;
  width: 100%;
  background: #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
ul.titulos li .ebook button span {
  color: #fff;
  font-size: 16px;
}
ul.titulos li .ebook button path { fill: #fff; }
ul.titulos li .boton-accion-producto {
  background: var(--secondaryColor);
  border-radius: var(--borderRadius);
  font-size: 11px;
  border: none;
  padding: 7px;
}
ul.titulos li .boton-accion-producto path { fill: #fff; }

.paginacion {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
}
.paginacion > li > a {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
  border-radius: var(--borderRadius);
  font-size: 1.4rem;
  color: #000;
  margin-left: -1px;
}

.paginacion > .active > a,
.paginacion > .active > a:hover {
  background: var(--secondaryColor);
  color: #fff;
}
@media screen and (max-width: 500px) {
  .titulosMain .barraTitulos { grid-auto-flow: unset; grid-gap: 10px; }
  ul.titulos { grid-template-columns: 1fr 1fr; grid-gap: 30px 20px; }
}




/*=============================================
/* -CSS INFO TITULO
=============================================*/
.infoproducto {
  display: grid;
  grid-template-columns: 2fr 3fr;
  grid-template-areas: "multimedia detalles";
  gap: 0 30px;
  margin-bottom: 50px;
}
.infoproducto .multimedia {grid-area: multimedia;}
.infoproducto .detalles {
  grid-area: detalles;
  display: grid;
  grid-gap: 20px;
  align-content: flex-start;
}

.infoproducto .multimedia .swiper-container {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0;
}
.infoproducto .multimedia .gallery-thumbs {
  max-width: unset;
  padding-top: 10px;
}
.infoproducto .multimedia .gallery-thumbs .swiper-slide { opacity: 0.4; }
.infoproducto .multimedia .gallery-thumbs .swiper-slide-thumb-active { opacity: 1; }

.infoproducto .detalles h5 a {
  display: block;
  font-size: 1.3rem;
  font-weight: 500;
  cursor: pointer;
}
.infoproducto .detalles h1.titulo-producto {
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
}
.infoproducto .detalles h2.titulo-producto {
  font-size: 1.6rem;
  font-weight: 400;
  margin-bottom: 5px;
}

.infoproducto .detalles .comprar {
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: center;
  grid-gap: 10px 50px;
  grid-template-areas: "precio cantidad" "comprar comprar" "deseo deseo";
}
.infoproducto .detalles .comprar > .precio {grid-area: precio;}
.infoproducto .detalles .comprar > .cantidad {grid-area: cantidad;}
.infoproducto .detalles .comprar > button {grid-area: comprar;}
.infoproducto .detalles .comprar > h5 {grid-area: deseo;}

.infoproducto .detalles .comprar .precio h2 {
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: .5px;
}
.infoproducto .detalles .comprar > button.noDisponible { background: var(--mainColorBrightness) !important; cursor: default; }
.infoproducto .detalles .comprar .precio .descuento {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 20px;
}
.infoproducto .detalles .comprar .precio .descuento h2 { font-size: 2rem !important; }

.infoproducto .detalles .datosTitulo {
  display: grid;
  grid-gap: 3px;
}
.infoproducto .detalles .datosTitulo h2 {
  font-size: 1.6rem;
  font-weight: 500;
}
.infoproducto .detalles .datosTitulo span {
  font-size: 1.6rem;
  font-weight: 400;
}
.infoproducto .detalles .datosTitulo a {
  font-size: 1.6rem;
  text-decoration: underline;
}

.infoproducto .detalles .resena h2 {
  font-size: 1.6rem;
  font-weight: 500;
}
.infoproducto .detalles .resena p {
  font-size: 1.5rem;
  text-align: justify;
  line-height: 21px;
}

.infoproducto .detalles h2.detalleTitulo {
  font-size: 1.7rem;
  font-weight: 600;
}
.infoproducto .detalles div.detalleTitulo {
  border: 2px solid #000;
  width: 100%;
  padding: 10px;
  margin: -10px;
  max-height: 450px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  grid-gap: 0 40px;
}
.infoproducto .detalles .detalleTitulo > * {
  max-width: 350px;
  text-align: justify;
}
.infoproducto .detalles .detalleTitulo h2 {
  font-size: 1.6rem;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 2px;
  text-transform: uppercase;
}
.infoproducto .detalles .detalleTitulo h2:first-child { margin-top: 0; }
.infoproducto .detalles .detalleTitulo h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 20px;
}
.infoproducto .detalles .detalleTitulo h4 {
  font-size: 1.4rem;
  font-weight: 600;
}
.infoproducto .detalles .detalleTitulo p {
  font-size: 1.3rem;
  margin-bottom: 10px;
}


@media screen and (max-width: 500px) {
  .infoproducto {
    grid-template-columns: 1fr;
    grid-template-areas: "multimedia" "detalles";
  }
  .infoproducto .multimedia { display: grid; justify-items: center; }
  .infoproducto .multimedia .gallery-top { text-align: center; }
  .infoproducto .multimedia .gallery-top .swiper-slide img { max-width: 150px; }
  .infoproducto .multimedia .gallery-thumbs .swiper-slide img { max-width: 75px; }

  .infoproducto .detalles h1.titulo-producto,
  .infoproducto .detalles h2.titulo-producto { text-align: center; }
  .infoproducto .detalles .comprar {
    margin: -10px 0 10px 0;
    grid-template-columns: 1fr;
    grid-template-areas: "precio" "cantidad" "comprar" "deseo";
    justify-content: center;
    text-align: center;
  }
}


/*=============================================
/* -CSS QUIENES SOMOS
=============================================*/
.quienes-somos h2 { font-size: 30px; font-weight: 500; }
.quienes-somos p {
  font-size: 16px;
  text-align: justify;
  margin-top: 15px;
}
@media screen and (max-width: 500px) {
  .quienes-somos h2 { font-size: 26px; }
}



/*=============================================
/* -CSS AUTORES
=============================================*/
.letras {margin-bottom: 50px;}
.letras ul {
  margin: 0;
  display: grid;
  grid-auto-flow: column;
}
.letras ul li a.letra {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  background: var(--mainColor);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 500;
  text-transform: uppercase;
  transition: all 200ms;
}
.letras ul li a.letra:hover,
.letras ul li a.active {
  background: var(--secondaryColor);
  color: var(--colorTexto);
}


.autores ul {
  display: none;
  margin: 0;
  grid-auto-flow: column;
  grid-gap: 10px;
}
.autores ul li a.autor {
  color: var(--colorTexto);
  font-size: 16px;
}
.autores ul li a.autor:hover { text-decoration: underline !important; }
@media screen and (max-width: 500px) {
  .letras ul {
    grid-auto-flow: unset;
    grid-template-columns: repeat(10, 1fr);
    grid-gap: 3px;
  }
  .autores ul {grid-gap: 10px 20px;}
}



/*=============================================
/* -CSS CARRITO
=============================================*/
.carritoMain .cargandoCarrito {
  padding: 50px 0;
  display:grid;
  justify-content: center;
}
.carritoMain .carrito {
  display: none;
  grid-gap: 50px;
  padding: 20px 0;
}
.carritoMain .carrito .vacio {
  padding: 50px 0;
  grid-gap: 20px;
  display: grid;
  justify-items: center;
}
.carritoMain .carrito .vacio h2 {
  font-size: 2.5rem;
  font-weight: 500;
}
.carritoMain .sumaCarrito {
  justify-self: flex-end;
  padding: 25px 50px;
  display: grid;
  grid-gap: 40px;
  grid-auto-flow: column;
  align-items: center;
  background: #efefef;
  border-radius: var(--borderRadius);
}
.carritoMain .sumaCarrito h4 { font-size: 1.8rem; font-weight: 500; }
.carritoMain .sumaCarrito h4.sumaSubTotal { font-weight: 700; }
.carritoMain .procederPago { justify-self: flex-end; }



/*=============================================
/* -CSS PEDIDO
=============================================*/
.pedidoMain {
  display: grid;
  grid-gap: 50px;
}
.pedidoMain .tituloPedido {
  display: grid;
  grid-gap: 10px;
}
.pedidoMain .tituloPedido h1 {
  font-size: 2.4rem;
  font-weight: 400;
}
.pedidoMain .tituloPedido h4 {
  font-size: 1.8rem;
  font-weight: 400;
}
.pedidoMain .tituloPedido h4 strong {
  font-size: 1.8rem;
  font-weight: 500;
}
.pedidoMain .tituloPedido .pagar {
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: column;
  justify-content: flex-start;
}
.pedidoMain .tituloPedido .btnFactura { justify-self: flex-start; }
.pedidoMain .sumaPedido {
  justify-self: flex-end;
  padding: 25px 50px;
  display: grid;
  grid-gap: 40px;
  grid-auto-flow: column;
  align-items: center;
  background: #efefef;
  border-radius: var(--borderRadius);
}
.pedidoMain .sumaPedido h4 {
  font-size: 1.8rem;
  font-weight: 500; 
}
.pedidoMain .sumaPedido .sumaTotal { font-weight: 700; }



/*=============================================
/* -CSS DESCRIPCION PEDIDO
=============================================*/
.descripcion-overflow { overflow: auto; }
.descripcionPedido {
  border-bottom: 1px solid rgba(0,0,0,.1);
  border-radius: var(--borderRadius);
  width: 100%;
}
.descripcionPedido .headerPedido th {
  padding: 15px 20px;
  background: var(--mainColor);
}
.descripcionPedido .headerPedido th:first-child { border-radius: var(--borderRadius) 0 0 0; }
.descripcionPedido .headerPedido th:last-child { border-radius: 0 var(--borderRadius) 0 0; }
.descripcionPedido .headerPedido th h2 {
  font-size: 1.8rem;
  font-weight: 500;
  color: #fff;
}
.descripcionPedido .bodyPedido tr:last-child td { border-radius: 0 0 var(--borderRadius) var(--borderRadius); }
.descripcionPedido .bodyPedido td {
  text-align: center;
  font-size: 1.4rem;
}
.descripcionPedido .bodyPedido.bodyPedidoPadding td { padding: 15px 20px; } 
.descripcionPedido .bodyPedido td:first-child { border-left: 1px solid rgba(0,0,0,.1); }
.descripcionPedido .bodyPedido td:last-child { border-right: 1px solid rgba(0,0,0,.1); }
.descripcionPedido .bodyPedido td a {
  display: block;
  padding: 15px 20px;
  text-align: center;
  font-size: 1.4rem;
}
.descripcionPedido .bodyPedido td.titulo {
  text-align: left;
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: column;
  justify-content: flex-start;
  align-items: center;
}
.descripcionPedido .bodyPedido td.titulo img {
  max-width: 80px;
}
.descripcionPedido .bodyPedido td.subtotal { font-weight: 600; }
.descripcionPedido .bodyPedido td.linea { padding: 0; }
.descripcionPedido .bodyPedido td.lineaPadding { padding: 5px 0; }
.descripcionPedido .bodyPedido td hr {
  width: 95%;
  margin: 0 auto;
  border: 1px solid #eee;
}




/*=============================================
/* -CSS PERFIL
=============================================*/
.perfilMain {
  padding: 20px 0;
  display: grid;
  grid-gap: 20px;
}
.perfilMain > h3 {
  font-weight: 500;
  font-size: 1.8rem;
}

.miDireccion {
  display: grid;
  grid-gap: 50px;
}
.miDireccion .direccion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px 50px;
}
.miDireccion .direccion .editar {
  display: grid;
  grid-gap: 25px;
  grid-auto-flow: column;
  justify-content: flex-start;
  align-items: center;
}
.miDireccion .direccion .editar h4 {
  font-size: 2rem;
  font-weight: 500;
}
.miDireccion .direccion .input h3 {
  font-size: 1.6rem;
  font-weight: 600;
}
.miDireccion .direccion .input input {
  background: #e8e8e8;
  border-radius: var(--borderRadius);
  width: 100%;
}
.miDireccion .direccion .input .nombre {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr auto;
  align-items: center;
}
@media screen and (max-width: 500px) {
  .miDireccion .direccion {grid-template-columns: 1fr;}
  #editarDireccionDiv .grid,
  #editarFacturacionDiv .grid {grid-template-columns: 1fr;}

  .tabla-pedidos-overflow {overflow-x: auto;}
}



/*=============================================
/* -CSS ERROR
=============================================*/
.error {
  display: grid;
  justify-items: center;
  grid-gap: 10px;
  padding: 50px 0;
}
.error h2 {
  font-size: 3.5rem;
  font-weight: 500;
  text-transform: uppercase;
}



/*=============================================
/* -CSS POLITICAS
=============================================*/
.politicas h2 {
  font-size: 3rem;
  font-weight: 500;
  margin-bottom: 10px;
}
.politicas h3 {
  font-size: 2.4rem;
  font-weight: 500;
  margin-top: 25px;
  margin-bottom: 5px;
} 
.politicas p {
  font-size: 1.6rem;
  margin-bottom: 10px;
  text-align: justify;
}
.politicas ul { margin-bottom: 10px; }
.politicas li { 
  font-size: 1.6rem;
  text-align: justify;
}




/*================*/
@-webkit-keyframes bounce {
  0%  { transform: translateY(-180px); }
  7%  { transform: translateY(-180px), scale(1) }
  8%  { transform: translateY(0); }
  10% { transform: translateY(-60px); }
  12% { transform: translateY(0); }
  14% { transform: translateY(-20px); }
  16% { transform: translateY(0); }

  30% { transform: rotate(360deg) }
  34% { transform: rotate(0deg) }

  50% { transform: scale(1); }
  52% { transform: scale(1.3); }
  54% { transform: scale(1); }
  56% { transform: scale(1.3); }
  58% { transform: scale(1); }

  70% { transform: rotate(-360deg) }
  74% { transform: rotate(0deg) }

  82% { transform: translateX(0) }
  84% { transform: translateX(-40px) }
  88% { transform: translateX(40px) }
  90% { transform: translateX(0) }
  91% { transform: scale(1) }
  93% { transform: scale(0) }
  100% { transform: scale(0) }
}
@-moz-keyframes bounce {
  0%  { transform: translateY(-180px); }
  7%  { transform: translateY(-180px), scale(1) }
  8%  { transform: translateY(0); }
  10% { transform: translateY(-60px); }
  12% { transform: translateY(0); }
  14% { transform: translateY(-20px); }
  16% { transform: translateY(0); }

  30% { transform: rotate(360deg) }
  34% { transform: rotate(0deg) }

  50% { transform: scale(1); }
  52% { transform: scale(1.3); }
  54% { transform: scale(1); }
  56% { transform: scale(1.3); }
  58% { transform: scale(1); }

  70% { transform: rotate(-360deg) }
  74% { transform: rotate(0deg) }

  82% { transform: translateX(0) }
  84% { transform: translateX(-40px) }
  88% { transform: translateX(40px) }
  90% { transform: translateX(0) }
  91% { transform: scale(1) }
  93% { transform: scale(0) }
  100% { transform: scale(0) }
}
@keyframes bounce {
  0%  { transform: translateY(-180px); }
  7%  { transform: translateY(-180px), scale(1) }
  8%  { transform: translateY(0); }
  10% { transform: translateY(-60px); }
  12% { transform: translateY(0); }
  14% { transform: translateY(-20px); }
  16% { transform: translateY(0); }

  30% { transform: rotate(360deg) }
  34% { transform: rotate(0deg) }

  50% { transform: scale(1); }
  52% { transform: scale(1.3); }
  54% { transform: scale(1); }
  56% { transform: scale(1.3); }
  58% { transform: scale(1); }

  70% { transform: rotate(-360deg) }
  74% { transform: rotate(0deg) }

  82% { transform: translateX(0) }
  84% { transform: translateX(-40px) }
  88% { transform: translateX(40px) }
  90% { transform: translateX(0) }
  91% { transform: scale(1) }
  93% { transform: scale(0) }
  100% { transform: scale(0) }
}
.bounce {
  animation: bounce 13s infinite;
  -webkit-animation: bounce 13s infinite;
}