/* Smooth scroll behavior */
:root {
  scroll-behavior: smooth;
}

/* Barra navegacion */
#navbar-main {
  background-color: #98c3d7!important;
}
.mm-navbar{
  background: #1b445d;
}
div#mm-1,
#off-canvas {
  --mm-color-background: #093149;
  background: #093149;
}
div#mm-1 a,
#off-canvas a {
  color: white;
  font-size: 20px;
  text-decoration: none;
}
.mm-btn--next:after {
  border-color: #fff700;
}
a.is-active.mm-listitem__text {
  background: red;
}
#block-landingmaker-responsivemenumobileicon {
  filter: invert(1);
}
li.menu-item--front-page.menu-name--main.mm-listitem a {
  background: none !important;
}

/* Telefonos en vertical (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

  .offcanvas-body .navbar-light .nav-link {
    color: white!important;
    font-size: large;
    font-weight: bold;
  }


  #block-wct2023-branding a.site-title {
    font-size: 100%;
  }

  .field--name-field-categoria-snippet.field__items,
  .field.field--name-field-categoria-post.field--type-entity-reference.field--label-above .field__items,
  .field.field--name-field-categoria-top.field--type-entity-reference.field--label-above .field__items {
    height: calc(25vh - 10px);
  }

  #block-landingmaker-main-menu a {
    color: white;
    font-size: 20px;
    text-decoration: none;
  }
  #CollapsingNavbar {
    background: #001d2c;
  }
  #block-landingmaker-main-menu ul.dropdown-menu.show {
    background: #1a3148;
    max-width: 88%;
  }
  #block-landingmaker-main-menu li.dropdown-item.active {
    background: #1b4f7a;
  }
  #navbar-main button.btn-close.text-reset {
    filter: invert(1);
    font-size: 20px;
    margin-top: 15px;
  }

}

/* Telefonos en horizontal (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .field--name-field-categoria-snippet.field__items,
  .field.field--name-field-categoria-post.field--type-entity-reference.field--label-above .field__items,
  .field.field--name-field-categoria-top.field--type-entity-reference.field--label-above .field__items {
    height: calc(25vh - 10px);
  }
  #block-landingmaker-main-menu a {
    color: white;
    font-size: 20px;
  }
  #CollapsingNavbar {
    background: #001d2c;
  }
  #block-landingmaker-responsivemenumobileicon {
    margin-right: 56px;
  }
}

/* Tabletas y Ipod (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  i.bi.bi-list.mobile-nav-toggle {
    display: none;
  }
  #block-landingmaker-main-menu a {
    color: white;
    font-size: 20px;
  }
  #CollapsingNavbar {
    background: #001d2c;
  }
  #block-landingmaker-responsivemenumobileicon {
    margin-right: 56px;
  }
}

/* Ordenadores y Laptops (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  i.bi.bi-list.mobile-nav-toggle {
    display: none;
  }
  header .container-fluid {
    max-width: 1200px;
    margin: auto!important;
  }
  .blazy--view .card-body {
    min-height: 100px;
  }
  #block-landingmaker-main-menu a {
    color: #001d2c;
  }
  #block-landingmaker-main-menu a.is-active {
    text-decoration: underline;
    font-weight: 700;
  }

  #block-landingmaker-responsivemenumobileicon {
    margin-right: 56px;
  }
}

/* Pantallas grandes (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  i.bi.bi-list.mobile-nav-toggle {
    display: none;
  }
  header .container-fluid {
    max-width: 1200px;
    margin: auto!important;
  }
  .blazy--view .card-body {
    min-height: 100px;
  }
  #block-landingmaker-main-menu a {
    color: #001d2c;
  }
  #block-landingmaker-main-menu a.is-active {
    text-decoration: underline;
    font-weight: 700;
  }
  #block-landingmaker-responsivemenumobileicon {
    margin-right: 56px;
  }
}
.node__content {
  margin-top: 0;
}

/* PAGINA CONTACTO */
.path-contact main#content {
  max-width: 1200px;
  margin: 20px auto;
  background: #093149;
  padding: 20px;
  color: white;
}
.path-contact .button {
  background: #0f638d;
  border-radius: 25px;
  border-color: #0f638d;
}
#wrapping-286, #box-285 {
  color: white;
}
#block-condrupal-search-form-wide {
  padding-top: 10px;
}
#wrapping-286 #edit-submit {
  max-width: 280px;
  border-radius: 25px;
  padding: 10px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  background: #114c6b;
  border-color: #114c6b;
  color: white;
  width: 100%;
}

/* Back to top button */
.back-to-top {
  position: fixed;
  color: #fff;
  padding: 6px;
  font-size: 20px;
  border-radius: 10px;
  right: 6px;
  bottom: 30px;
  transition: background 0.5s;
  border: 2px solid;
  background: #8db6cb;
}

i.fa.fa-chevron-up.btn-primary {
  padding: 10px;
}

/* Especificos LandingPage */
.page-node-type-landing-page header {
  display: none;
}
.page-node-type-landing-page .region-content {
  padding: 0;
}

/* Menu Lateral Curso */
.block-views-blockvideos-curso-gratis-block-1 ul {
  list-style: none;
  padding: 0;
}
.block-views-blockvideos-curso-gratis-block-1 .item-list li {
    margin-left: 0;
    padding: 20px 0;
    border-bottom: 1px dotted #ededed;
    font-weight: 400;
    margin-bottom: 10px;
}
.page-node-type-capitulo-gratuito .table-striped > tbody > tr:nth-of-type(odd) > *{
  background: none!important;
}
#block-wct2023-powered-by-drupal {
  padding: 20px;
  text-align: center;
}
/* Banner Cookies */
#sliding-popup {
  padding-top: 20px;
  background: #0c5476;
}
button.agree-button.eu-cookie-compliance-secondary-button.button.button--small {
  color: white;
  border: 1px solid;
  border-radius: 25px;
}
button.decline-button.eu-cookie-compliance-default-button.button.button--small.button--primary {
  border-radius: 25px;
}
/* Vista Snippets */
.field--name-field-categoria-snippet.field__items,
.field.field--name-field-categoria-post.field--type-entity-reference.field--label-above .field__items,
.field.field--name-field-categoria-top.field--type-entity-reference.field--label-above .field__items
{
  display: flex;
  justify-content: space-around;
  flex-flow: wrap;
}
.field--name-field-categoria-snippet.field__items a,
.field.field--name-field-categoria-post.field--type-entity-reference.field--label-above .field__items a,
.field.field--name-field-categoria-top.field--type-entity-reference.field--label-above .field__items a {
  background: #2c5a89;
  padding: 5px 10px;
  border-radius: 25px;
  text-decoration: none;
  color: white;
}
.field--name-field-categoria-post .field__label,
.field--name-field-categoria-top .field__label {
  background: #126281;
  padding: 5px 10px;
  font-size: 1.3rem;
  margin-bottom: 20px;
  box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;
  margin-top: 10px;
  color: white;
}
.field--name-field-categoria-post,
.field--name-field-categoria-top {
  margin-bottom: 20px;
}
.view-snippets .node--type-snippet h2 a {
  color: #2c5a89;
  text-decoration: none;
}
.view-snippets .views-row,
.view-top-modules .views-row,
.view-blog .views-row{
  margin-bottom: 20px;
  border-bottom: 1px dotted;
  padding-bottom: 40px;
}
.view-snippets .view-filters,
.view-top-modules .view-filters,
.view-blog .view-filters  {
  background: #4d99c5;
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 1rem;
  margin-bottom: 20px;
}
.view-snippets h2 {
  margin-bottom: 20px;
}
.view-snippets .js-form-type-select,
.view-top-modules .js-form-type-select,
.view-blog .js-form-type-select {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}
.view-snippets .js-form-type-select label,
.view-top-modules .js-form-type-select label,
.view-blog .js-form-type-select label {
  width: 240px;
  padding-top: 6px;
}

.blazy--view .card {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
#block-wct2023-page-title h1 {
  background: #195283;
  padding: 20px;
  margin-top: 10px;
  color: #d9f1f9;
}
pre, .field--name-field-codigo {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  padding: 20px;
  background: #ededed;
}

a.btn.btn-outline-inverse {
  border: 1px solid #29608f;
  border-radius: 25px;
  width: 50%;
}
a.btn.btn-outline-inverse:hover {
  background: #29608f;
  color: white;
}
.card-footer.text-align-center {
  background: none;
  padding: 20px;
}
.page-node-type-pagina-inicio .region-content {
  padding: 0;
}
/* Paginador vistas */
ul.js-pager__items.pager {
  text-align: center;
}
.pager__item .button {
  background: #29608f;
  color: white;
  border-radius: 25px;
  width: 250px;
}
/* Bloque Login Home */
#block-loginandregistrationformpopup {
  text-align: center;
  padding: 20px;
  background: #064c7e;
}
#block-loginandregistrationformpopup a {
  color: white;
  font-weight: bold;
}
#block-loginandregistrationformpopup h2 {
  color: #8f959d;
}
#createdby {
  color: #727a7e;
  font-size: 11px;
}

/* EFECTOS Y ANIMACIONES */
@keyframes fadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
/* flipping class and key frames*/
.flixx {
  animation: 1s anim-flipX ease infinite;
}
@keyframes anim-flipX {
  0% {
    opacity: 0;
    transform: rotateX(90def);
  }
  50% {
    opacity: 1;
    transform: rotateX(720deg);
  }
  100% {
    /* animate nothing to pause animation at the end */
    opacity: 1;
    transform: rotateX(720deg);
  }
}
/* lineup class and keyframes */
.lineup {
  animation: 2s anim-lineUp ease-out infinite;
}
@keyframes anim-lineUp {
  0% {
    opacity: 0;
    transform: translateY(80%);
  }
  20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: translateY(0%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
/* subtle zoom to attention and then back */
.popoutin {
  animation: 2s anim-popoutin ease infinite;
}
@keyframes anim-popoutin {
  0% {
    color: black;
    transform: scale(0);
    opacity: 0;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  25% {
    color: red;
    transform: scale(2);
    opacity: 1;
    text-shadow: 3px 10px 5px rgba(0, 0, 0, 0.5);
  }
  50% {
    color: black;
    transform: scale(1);
    opacity: 1;
    text-shadow: 1px 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    /* animate nothing to add pause at the end of animation */
    transform: scale(1);
    opacity: 1;
    text-shadow: 1px 0 0 rgba(0, 0, 0, 0);
  }
}

.frontop {
  animation: 2s anim-fromtop linear infinite;
}
@keyframes anim-fromtop {
  0% { opacity: 0; transform: translateY(-100%);}
  25% { opacity: 1; transform: translateY(0%);}
  50% {
  }
  100% {
  }
}
.bounce {
  animation: bounce 2s ease infinite;
}
@keyframes bounce {
  70% { transform:translateY(0%); }
  80% { transform:translateY(-15%); }
  90% { transform:translateY(0%); }
  95% { transform:translateY(-7%); }
  97% { transform:translateY(0%); }
  99% { transform:translateY(-3%); }
  100% { transform:translateY(0); }
}
.bounce2 {
  animation: bounce2 2s ease infinite;
}
@keyframes bounce2 {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-30px);}
  60% {transform: translateY(-15px);}
}

.gelatine {
  animation: gelatine 0.5s infinite;
}
@keyframes gelatine {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}

.swing {
  transform-origin: top center;
  animation: swing 2s ease infinite;
}
@keyframes swing {
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

.wobble {
  animation: wobble 2s ease infinite;
}
@keyframes wobble {
  0% { transform: translateX(0%); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0%); }
}

.bounceinright {
  animation: bounce-in-right 2s ease infinite;
}
@keyframes bounce-in-right {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    transform: translateX(-30px);
  }
  80% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

.hithere {
  animation: hithere 1s ease infinite;
}
@keyframes hithere {
  30% { transform: scale(1.2); }
  40%, 60% { transform: rotate(-20deg) scale(1.2); }
  50% { transform: rotate(20deg) scale(1.2); }
  70% { transform: rotate(0deg) scale(1.2); }
  100% { transform: scale(1); }
}

.pulse {
  animation: pulse 1s infinite ease-in-out alternate;
}
@keyframes pulse {
  from { transform: scale(0.8); }
  to { transform: scale(1.2); }
}

#block-landingmaker-powered {
  text-align: center;
}