:root {
  --primary: #143199;
  --secondary: #0D143F;
  --tertiary: #E12845;
  --cuaternary: #950a1f;
  --quinary: #F4F7FE;
  --senary: #2251FF;
  --octanary: #ffedf0;
}

::selection {
  background: var(--primary);
  color: white;
}

input[type=search]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

input[type=search]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

input[type="search"] {
  -webkit-appearance: none;
}

input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

input:focus, select:focus, textarea:focus, button:focus {
  outline: none !important;
  box-shadow: 0 0 0 0rem rgb(0 0 0 / 0%) !important;
}

input[type=text] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type=email] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input:focus {
  outline-offset: 0px;
}

btn:focus {
  outline: -webkit-focus-ring-color auto 0px !important;
}

:focus {
  outline: none;
}

input:focus, select:focus, textarea:focus, button:focus {
  outline: none !important;
}

.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
  color: transparent;
  background-color: transparent;
  border-color: transparent;
}

button:focus {
  outline: none;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Plus Jakarta Sans';
  font-weight: normal;
  font-style: normal;
}

hr {
  border-top: white solid 1px;
}

#bloker {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0 0 0 / .5);
  z-index: 98;
  transition: all 0.3s ease-in-out;
  transition-delay: 0.3s;
  opacity: 0;
  visibility: hidden;
  cursor: crosshair;
}

#bloker.open {
  opacity: 1;
  visibility: visible;
  transition: all 0.3s ease-in-out;
  transition-delay: 0.3s;
}

/* animation */

.blur {
  animation: blur 0.3s ease forwards;
  animation-delay: .3s;
  filter: blur(3px);
}

@keyframes blur {
  to {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    filter: blur(0px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

/* --- */

.fnt-libre {
  font-family: 'Libre Baskerville';
}

.fnt-jakarta {
  font-family: 'Plus Jakarta Sans';
}

.fnt-questrial {
  font-family: 'Questrial';
}

.headline {
  font-size: 6rem;
}

.fnt-12 {
  font-size: 12px;
}

.fnt-14 {
  font-size: 14px;
}

.fnt-16 {
  font-size: 16px;
}

.fnt-18 {
  font-size: 18px;
}

.fnt-20 {
  font-size: 20px;
}

.fnt-22 {
  font-size: 22px;
}

.fnt-24 {
  font-size: 24px;
}

.fnt-60 {
  font-size: 60px;
}

.fnt-4 {
  font-size: 2rem;
}

@media (min-width: 768px) {
  .fnt-4 {
    font-size: 3rem;
  }
}

@media (min-width: 1200px) {
  .fnt-4 {
    font-size: 3.5rem;
  }
}

.fnt-rpsv-1_5-2 {
  font-size: 1.5rem !important;
}

@media (min-width: 992px) {
  .fnt-rpsv-1_5-2 {
    font-size: 2rem !important;
  }
}

.ls-2 {
  letter-spacing: 2px;
}

.ls-4 {
  letter-spacing: 4px;
}

.ls-20 {
  letter-spacing: 10px;
}

.lh-normal {
  line-height: normal;
}

.lh-60 {
  line-height: 60%;
}

.lh-90 {
  line-height: 90%;
}

.lh-100 {
  line-height: 100%;
}

.lh-110 {
  line-height: 110%;
}

.lh-120 {
  line-height: 120%;
}

.lh-130 {
  line-height: 130%;
}

.lh-140 {
  line-height: 140%;
}

.fnt-600 {
  font-weight: 600;
}

.fnt-shadow {
  text-shadow: 0 1px 1px rgba(0 0 0 / 20%);
}

.fnt-shadow-sm {
  text-shadow: 0 1px 2px rgba(0 0 0 / 20%);
}

.fnt-shadow-lg {
  text-shadow: 0 1px 4px rgba(0 0 0 / 20%);
}

.fnt-white {
  color: white;
}

.fnt-blue {
  color: var(--primary);
}

.fnt-lightblue {
  color: var(--senary);
}

.fnt-darkblue {
  color: var(--secondary);
}

.fnt-red {
  color: var(--tertiary);
}

.fnt-gray {
  color: gray;
}

.bg-light-blue {
  background: var(--quinary);
}

.bg-blue {
  background: var(--primary);
}

.bg-darkblue {
  background: var(--secondary);
}

.bg-red {
  background: var(--tertiary);
}

.bg-darkwhite{
  background: #A6A6A6;
}

.fnt-uppercase {
  text-transform: uppercase;
}

.link-white {
  display: flex;
  position: relative;
  padding: 3px 0;
  text-decoration: none;
  background-color: transparent;
  background-image: linear-gradient(45deg, white 0%, white 100%);
  background-position: 0 90%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: .3s;
  color: white;
}

.link-white:hover {
  color: white;
  text-decoration: none;
  background-size: 100% 1px;
}

.max-w-33 {
  max-width: 33%;
}

.max-w-66 {
  max-width: 66%;
}

.max-w-75 {
  max-width: 75%;
}

/* --- */

.aspect {
  position: relative;
  width: 100%;
  z-index: 0;
  transition: .3s ease;
}

.aspect img {
  position: absolute;
  top: 0;
  object-fit: cover;
  transition: .3s;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.aspect-4-4 {
  padding-top: 100%;
}

.aspect-4-3 {
  padding-top: 75%;
}

.aspect-2-3 {
  padding-top: 66.67%;
}

.aspect-16-9 {
  padding-top: 56.25%;
}

.aspect-vertical {
  padding-top: 150%;
}

/* header */

#header {
  position: fixed;
  width: 100%;
  height: 90px;
  z-index: 3;
}

#content {
  position: relative;
  z-index: 1;
}

.bg-headerbg-header {
  position: fixed;
  width: 100%;
  height: 0;
  z-index: 2;
  top: 0;
  transition: .3s;
}

.bg-header.active {
  background: white;
  position: fixed;
  width: 100%;
  height: 90px;
  top: 0;
  z-index: 2;
  transition: .3s;
}

/* Menu desktop */

.menu-desktop ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 9;
}

.menu-desktop ul li ul {
  display: none;
}

.menu-desktop .menu-item {
  white-space: nowrap;
  margin-right: 30px;
}

.menu-desktop ul li a {
  display: flex;
  position: relative;
  text-decoration: none;
  color: white;
  font-weight: bold;
  transition: .3s ease;
  border-top: solid 1px white;
  padding: 10px 20px 10px 0;
}

.menu-desktop.active ul li a {
  border-top: solid 1px var(--secondary);
  color: var(--secondary);
}

.menu-desktop.active .sub-menu li a {
  border-top: none;
}

.menu-desktop ul li a:hover {
  text-decoration: none;
  opacity: .8;
}

.menu-desktop ul li a:hover + ul {
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: .1s;
  animation-delay: .1s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeIn;
  transition: .3s ease;
}

.menu-desktop ul li a:hover + ul, .menu-desktop ul li ul:hover {
  display: flex;
  justify-content: center;
  position: absolute;
  background: white;
  flex-direction: column;
  z-index: 9999;
  width: auto;
  padding: 15px;
  border-radius: 10px;
}

.menu-desktop .menu-item .sub-menu a {
  transition: .3s ease;
  font-weight: normal;
  color: var(--secondary);
  padding: 5px 5px;
}

.menu-desktop .menu-item .sub-menu a:before {
  background-color: transparent;
}

.menu-desktop .menu-item .sub-menu a:hover {
  color: var(--primary);
}

.menu-desktop .menu-item .sub-menu a:hover:before {
  background-color: transparent;
}

.menu-desktop .menu-item-has-children a:after {
  content: url('../../assets/img/icons/drop-down.svg');
  position: relative;
  top: 0;
  right: -20px;
}

.menu-desktop .menu-item .sub-menu a:after {
  content: "";
}

.menu-desktop.active .menu-item-has-children a:after {
  content: url('../../assets/img/icons/drop-down-dark.svg');
}

.menu-desktop.active .menu-item .sub-menu a:after {
  content: "";
}

/* --- */

/* menu mobile */

.menu-mobile ul {
  padding: 0;
  list-style: none;
  width: 100%;
}

.menu-mobile ul li {
  margin: 15px 0;
  position: relative;
}

.menu-mobile ul li ul {
  display: none;
}

.menu-mobile a {
  font-size: 18px;
  color: white;
  font-weight: bold;
  text-decoration: none;
  background-image: linear-gradient(45deg, white 0%, white 100%);
  background-position: 0 90%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  padding: 10px 0;
  transition: background-size .5s;
  transition: .3s;
}

.menu-mobile a:hover {
  color: white;
  text-decoration: none;
  background-size: 100% 2px;
}

.menu-mobile ul li a:hover + ul, .menu-mobile ul li ul:hover {
  display: none;
  position: relative;
}

.menu-mobile .sub-menu .menu-item {
  margin: 5px 0;
}

.menu-mobile .sub-menu .menu-item a {
  margin-left: 10px;
  font-size: 1em;
  color: white;
  padding: 5px 0;
  font-weight: 600;
}

.menu-mobile .sub-menu .menu-item a:hover {
  background-size: 0% 2px;
  color: white;
}

.menu-mobile .sub-menu .menu-item:first-child {
  padding: 5px 0 0 0;
}

.menu-mobile .menu-item-has-children::before {
  content: url('../../assets/img/icons/drop-down.svg');
  position: absolute;
  top: 1px;
  left: -20px;
  font-weight: bold;
  width: 10px;
  height: 10px;
  color: var(--secondary);
}

/* menu submenu */

#cover, .bg-cover {
  position: relative;
  background: var(--secondary);
}

.cover {
  position: relative;
}

.bg-cover {
  position: absolute;
}

@media (min-width: 992px) {
  .bg-cover {
    position: relative;
  }
}

#cover .bg-cover img, .cover .bg-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

@media (min-width: 992px) {
  #cover .bg-cover img, .cover .bg-cover img {
    width: 100%;
    height: auto;
  }
}

.content-cover {
  position: relative;
  margin: 120px 0 100px 0;
}

@media (min-width: 992px) {
  .content-cover {
    position: absolute;
    margin: 0;
  }
}

.content-cover-top {
  position: absolute;
  margin-top: 100px;
}

@media (min-width: 576px) {
  .content-cover-top {
    position: absolute;
    margin-top: 150px;
  }
}

@media (min-width: 1400px) {
  .content-cover-top {
    margin-top: 200px;
  }
}

.content-cover-mobile {
  position: relative;
  margin: 120px 0 300px 0;
}

@media (min-width: 992px) {
  .content-cover-mobile {
    position: absolute;
    margin: 0;
  }
}

.bg-cover-top {
  position: relative;
}

.bg-cover-top img {
  width: 100%;
  height: auto;
}

.first-headline {
  font-size: 2.5rem;
}

@media (min-width: 768px) {
  .first-headline {
    font-size: 4.5rem;
  }
}

@media (min-width: 1200px) {
  .first-headline {
    font-size: 5.5rem;
  }
}

.second-headline {
  font-size: 2rem;
}

@media (min-width: 768px) {
  .second-headline {
    font-size: 2.5rem;
  }
}

@media (min-width: 1200px) {
  .second-headline {
    font-size: 3rem;
  }
}

.btn-red-cover {
  display: block;
  padding: 10px 20px;
  background: var(--tertiary);
  color: white;
  text-decoration: none;
  font-size: 1.4em;
  border-radius: 50px;
  transition: .3s ease;
  white-space: nowrap;
  width: 320px;
}

@media (min-width: 992px) {
  .btn-red-cover {
    font-size: 1.8em;
    width: 350px;
    padding: 20px 30px;
  }
}

.btn-red-cover:hover {
  background: var(--cuaternary);
}

.btn-blue-cover {
  display: block;
  padding: 10px 20px;
  background: var(--primary);
  color: white;
  text-decoration: none;
  font-size: 1.4em;
  border-radius: 50px;
  transition: .3s ease;
  white-space: nowrap;
  width: 320px;
}

@media (min-width: 992px) {
  .btn-blue-cover {
    font-size: 1.8em;
    width: 350px;
    padding: 20px 30px;
  }
}

.btn-blue-cover:hover {
  background: var(--secondary);
}

.line-v {
  width: 1px;
  height: 50px;
  background: var(--secondary);
}

.first-paragraph {
  font-size: 18px;
  font-weight: 600;
  padding: 0 30px;
}

@media (min-width: 992px) {
  .first-paragraph {
    font-size: 24px;
    padding: 0px 100px;
  }
}

.form-input {
  position: relative;
  width: 100%;
}

.form-input input {
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  outline: none;
  background: none;
  z-index: 1;
  color: white;
  font-size: 16px;
  font-weight: 600;
  border: none;
  padding: 0;
  height: 50px;
  border-bottom: solid 2px white;
  border-radius: 0;
}

@media (min-width: 768px) {
  .form-input input {
    position: absolute;
  }
}

.form-input ::placeholder {
  color: transparent;
}

.form-input label {
  position: absolute;
  top: 8px;
  font-size: 16px;
  transition: 0.3s;
  z-index: 0;
  color: white;
}

.form-input .input:focus + .label {
  top: -10px;
  z-index: 10;
  color: white;
  font-size: 12px;
  opacity: .5;
}

.form-input .input:not(:placeholder-shown) + .label {
  top: -10px;
  z-index: 10;
  font-size: 12px;
  color: white;
}

.form-control:focus {
  background: transparent;
  color: white;
}

.btn-send {
  width: 100%;
  background: white;
  border: none;
  height: 50px;
  border-radius: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 5px 5px 15px;
  color: var(--primary);
  font-weight: 400;
  transition: .3s ease;
}

.btn-send:hover {
  background: #f6f6f6;
  padding: 5px 5px 5px 20px;
}

.btn-send img {
  transform: rotate(0deg);
  transition: .3s ease;
}

.btn-send:hover > img {
  transform: rotate(45deg);
}

.btn-send-red {
  width: 100%;
  background: white;
  border: none;
  height: 50px;
  border-radius: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 5px 5px 15px;
  color: var(--tertiary);
  font-weight: 400;
  transition: .3s ease;
}

.btn-send-red:hover {
  background: #f6f6f6;
  padding: 5px 5px 5px 20px;
}

.btn-send-red img {
  transform: rotate(0deg);
  transition: .3s ease;
}

.btn-send-red:hover > img {
  transform: rotate(45deg);
}

#conatct {
  padding: 70px 0;
  position: relative;
}

@media (min-width: 992px) {
  #conatct {
    padding: 100px 0;
    position: relative;
  }
}

.geometric {
  position: absolute;
  top: 0;
  left: 0;
}

.geometric.white div {
  background: white;
}

.geometric.lightblue div {
  background: var(--quinary);
}

.geometric.darkblue div {
  background: var(--secondary);
}
.geometric.darkwhite div {
  background: #A6A6A6;
}

.geometric-one {
  width: 20vw;
  height: 3vh;
}

@media (min-width: 992px) {
  .geometric-one {
    width: 10vw;
    height: 4vh;
  }
}

.geometric-two {
  width: 10vw;
  height: 3vh;
}

@media (min-width: 992px) {
  .geometric-two {
    width: 5vw;
    height: 4vh;
  }
}

.geometric-three {
  width: 2.5vw;
  height: 5vh;
}

@media (min-width: 992px) {
  .geometric-three {
    width: 2.5vw;
    height: 7.5vh;
  }
}

.footer {
  position: relative;
}

#up {
  position: absolute;
  top: -10px;
  right: -15px;
}

.btn-efect {
  transition: .5s;
  mix-blend-mode: initial;
}

.btn-efect:hover {
  mix-blend-mode: overlay;
}

.invert-on.active {
  display: none;
  transition: .3s;
}

.invert-off.active {
  display: none;
  transition: .3s;
}

#btn-search {
  width: 50px;
  height: 50px;
  background: white;
  border-radius: 50%;
  transition: .3s ease;
  position: relative;
}

#btn-search.active {
  background: var(--secondary);
}

#btn-search .rotate {
  transform: rotate(0deg);
  transition: .3s ease;
}

#btn-search:hover > .rotate {
  transform: rotate(90deg);
  transition: .3s ease;
}

#search {
  position: absolute;
  overflow: hidden;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

#search.open {
  position: absolute;
  width: calc(100vw - 100px);
  height: 52px;
  background: white;
  right: -1px;
  border-radius: 30px;
  border: solid 2px #eee;
}

#search .efect {
  opacity: 0;
  visibility: hidden;
}

#search.open .efect {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 576px) {
  #search.open {
    width: calc(80vw - 100px);
  }
}

@media (min-width: 992px) {
  #search.open {
    width: calc(50vw - 100px);
  }
}

#search-close {
  width: 30px;
  height: 30px;
  position: relative;
  z-index: 6;
  padding: 5px;
  cursor: pointer;
}

#search input {
  background: transparent;
  border: none;
  color: var(--secondary);
}

/* btn-menu */

.btn-menu {
  width: 35px;
  height: 35px;
  transition-duration: 0.5s;
  cursor: pointer;
}

.btn-menu .icon {
  transition-duration: 0.5s;
  position: absolute;
  height: 35px;
  width: 35px;
}

.btn-menu .icon:before {
  transition-duration: 0.5s;
  position: absolute;
  width: 35px;
  height: 2px;
  background-color: white;
  content: "";
  top: 10px;
  border-radius: 5px;
}

.btn-menu.active .icon:before {
  background-color: var(--secondary);
}

.btn-menu .icon:after {
  transition-duration: 0.5s;
  position: absolute;
  width: 35px;
  height: 2px;
  background-color: white;
  content: "";
  top: 20px;
  border-radius: 5px;
}

.btn-menu.active .icon:after {
  background-color: var(--secondary);
}

.btn-menu.open .icon {
  transition: 0.5s;
}

.btn-menu.open .icon:before {
  transform: rotateZ(45deg) scaleX(1) translate(3px, 4px);
}

.btn-menu.open .icon:after {
  transform: rotateZ(-45deg) scaleX(1) translate(3px, -4px);
}

.btn-menu:hover {
  cursor: pointer;
}

/* btn menu */

.hidden {
  display: none;
}

@media (min-width: 992px) {
  .hidden {
    display: block;
  }
}

/* --- */

#navigation {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: auto;
  overflow: hidden auto;
  width: 95%;
  z-index: 99;
  -webkit-transition: -webkit-transform 0.8s;
  transition: -webkit-transform 0.8s;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

@media (min-width: 768px) {
  #navigation {
    width: 650px;
  }
}

#navigation.open {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform 0.8s;
  transition: -webkit-transform 0.8s;
  transition-timing-function: ease, ease;
}

#navigation .efect-navigation {
  height: 100%;
  padding: 30px;
  overflow: auto;
}

@media (min-width: 768px) {
  #navigation .efect-navigation {
    padding: 30px 60px;
  }
}

#navigation .efect-navigation {
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s ease-in-out;
  position: relative;
}

#navigation.open .efect-navigation {
  opacity: 1;
  visibility: visible;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}

#close-menu {
  position: absolute;
  top: 20px;
  right: 25px;
  cursor: pointer;
}

#close-menu picture {
  transition: .3s ease;
  transform: rotate(0deg);
  display: block;
}

#close-menu:hover > picture {
  transform: rotate(90deg);
}

/* - */

.btn-red-large {
  width: 100%;
  background: var(--tertiary);
  border: none;
  height: 50px;
  border-radius: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 15px 30px 25px;
  color: white;
  font-weight: 400;
  transition: .3s ease;
}

.btn-red-large:hover {
  background: var(--cuaternary);
  padding: 30px 15px 30px 30px;
}

.btn-red-large img {
  transform: rotate(0deg);
  transition: .3s ease;
}

.btn-red-large:hover > img {
  transform: rotate(45deg);
}

/* - */

.btn-red-small {
  width: 100%;
  background: var(--tertiary);
  border: solid 2px var(--tertiary);
  height: 50px;
  border-radius: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10px 30px 15px;
  color: white;
  font-weight: 400;
  transition: .3s ease;
}

.btn-red-small:hover {
  background: var(--cuaternary);
  border: solid 2px var(--cuaternary);
  padding: 30px 10px 30px 20px;
}

.btn-red-small img {
  transform: rotate(0deg);
  transition: .3s ease;
}

.btn-red-small:hover > img {
  transform: rotate(45deg);
}

/* - */

.btn-white-small {
  width: 100%;
  border: solid 2px var(--senary);
  background: white;
  height: 50px;
  border-radius: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10px 30px 15px;
  color: var(--senary);
  font-weight: 400;
  transition: .3s ease;
}

.btn-white-small:hover {
  background: var(--quinary);
  padding: 30px 10px 30px 20px;
}

.btn-white-small img {
  transform: rotate(0deg);
  transition: .3s ease;
}

.btn-white-small:hover > img {
  transform: rotate(45deg);
}

/* - */

.btn-white-red-small {
  width: 100%;
  border: solid 2px var(--tertiary);
  background: white;
  height: 50px;
  border-radius: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10px 30px 15px;
  color: var(--tertiary);
  font-weight: 400;
  transition: .3s ease;
}

.btn-white-red-small:hover {
  background: var(--octanary);
  padding: 30px 10px 30px 20px;
}

.btn-white-red-small img {
  transform: rotate(0deg);
  transition: .3s ease;
}

.btn-white-red-small:hover > img {
  transform: rotate(45deg);
}

.indice {
  font-size: .8em;
}

@media (min-width: 992px) {
  .indice {
    font-size: 1em;
  }
}

.post {
  position: relative;
}

.post-picture {
  position: relative;
  z-index: 1;
}

.post-picture img {
  width: 100%;
  height: auto;
  transition: .3s;
}

.post-content {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.post-content h2 {
  font-size: 2rem;
}

@media (min-width: 1200px) {
  .post-content h2 {
    font-size: 1.8rem;
  }
}

.post:hover img {
  animation-delay: .3s;
  /* filter: blur(1px); */
  opacity: .8;
  transition: .3s ease;
}

.section {
  padding: 100px 0;
  position: relative;
}

.slider-counter {
  position: absolute;
  width: 100%;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  font-family: 'Libre Baskerville';
  color: #959595;
  font-size: 2rem;
  padding: 0 15px;
  text-shadow: 0 0 3px rgba(0 0 0 / 10%);
}

@media (min-width: 992px) {
  .slider-counter {
    font-size: 3rem;
  }
}

.slider-counter span:first-child {
  font-size: 1rem !important;
}

@media (min-width: 992px) {
  .slider-counter span:first-child {
    font-size: 1.5rem !important;
  }
}

.pos-slide {
  width: 80%;
}

@media (min-width: 576px) {
  .pos-slide {
    width: 70%;
  }
}

@media (min-width: 768px) {
  .pos-slide {
    width: 60%;
  }
}

@media (min-width: 992px) {
  .pos-slide {
    width: 40%;
  }
}

@container (min-width: 952.796875px) {
  .pos-slide {
    width: 30%;
  }
}

@media (min-width: 1400px) {
  .pos-slide {
    width: 25%;
  }
}

.carousel-cell {
  padding: 15px;
}

.counter {
  width: 70px;
  height: 40px;
  background: white;
  color: #aaaaaa;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-prev {
  background: #EFF0F5;
  border-radius: 0;
  width: 50px;
  height: 50px;
  padding: 12px;
  transition: .3s;
}

.btn-prev:hover, .btn-prev:active {
  background: #e3e4ea !important;
}

.btn-next {
  background: var(--tertiary);
  border-radius: 0;
  width: 150px;
  height: 50px;
  text-align: left;
  padding: 12px;
  transition: .3s;
}

@media (min-width: 768px) {
  .btn-next {
    width: 200px;
  }
}

.btn-next:hover, .btn-next:active {
  background: var(--cuaternary) !important;
}

.search-category input {
  width: 100%;
  height: 40px;
  background: transparent;
  border: none;
  color: var(--secondary) !important;
}

.search-category input::placeholder {
  color: lightgray;
}

#category-search {
  width: 100%;
  height: 50px;
  border: solid 1px lightgray;
  border-radius: 30px;
}

.form-grup {
  border-bottom: solid 1px lightgray;
}

.form-grup select {
  border: none;
}

.select-filter {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 0px;
  border: 1px solid #dfdfdf;
  border-radius: 2px;
  width: 100%;
  color: black;
}

.post-book {
  width: 100%;
}

.post-book-picture {
  height: 215px;
}

@media (min-width: 576px) {
  .post-book-picture {
    height: 285px;
  }
}

.post-book-picture picture, .post-book-picture a {
  height: 215px;
  width: 100%;
}

@media (min-width: 576px) {
  .post-book-picture picture, .post-book-picture a {
    height: 285px;
  }
}

.post-book-picture img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: left bottom;
}

.post-book:hover > .post-book-content a {
  background-size: 100% 2px;
}

.link-black {
  background-color: transparent;
  color: black;
  text-decoration: none;
  background-image: linear-gradient(black,black);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size .5s;
}

.link-black:hover {
  background-size: 100% 1px;
  color: black;
}

.link-red {
  background-color: transparent;
  color: var(--tertiary);
  text-decoration: none;
  background-image: linear-gradient(var(--tertiary),var(--tertiary));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size .5s;
}

.link-red:hover {
  background-size: 100% 1px;
  color: var(--tertiary);
}

.btn-basic-red {
  color: white;
  background: var(--tertiary);
  padding: 15px 60px;
  border-radius: 30px;
  transition: .3s ease;
}

.btn-basic-red:hover, .btn-basic-red:active {
  background: var(--cuaternary) !important;
  color: white;
}

.slider-events .slick-slide {
  opacity: .6;
}

.slider-events .slick-slide.slick-center {
  opacity: 1;
}

#events .btn-next, .colection .btn-next {
  width: 50px !important;
}

.gradient-white-right {
  position: absolute;
  background: linear-gradient(90deg, rgba(1, 57, 96, 0) 0%, rgb(255,255,255) 100%);
  top: 0;
  right: -15px;
  width: 10%;
  height: 100%;
  z-index: 3;
}

.gradient-white-left {
  position: absolute;
  background: linear-gradient(270deg, rgba(1, 57, 96, 0) 0%, rgb(255,255,255) 100%);
  top: 0;
  left: -15px;
  width: 10%;
  height: 100%;
  z-index: 3;
}

.gradient-lightblue-right {
  position: absolute;
  background: linear-gradient(90deg, rgba(244, 247, 254, 0) 0%, rgb(244, 247, 254) 100%);
  top: 0;
  right: -15px;
  width: 10%;
  height: 100%;
  z-index: 3;
}

.gradient-lightblue-left {
  position: absolute;
  background: linear-gradient(270deg, rgba(244, 247, 254, 0) 0%, rgb(244, 247, 254) 100%);
  top: 0;
  left: -15px;
  width: 10%;
  height: 100%;
  z-index: 3;
}

.background-attachment {
  width: 100%;
  height: 80%;
  background-color: var(--quinary);
  position: absolute;
  z-index: 1;
}

.content-attachment {
  position: relative;
  z-index: 2;
  padding: 100px 0 0 0;
}

@media (min-width: 768px) {
  .content-attachment {
    padding: 150px 0 0 0;
  }
}

.post-attachment {
  position: relative;
}

.post-book-attachment {
  width: 100%;
}

.post-book-attachment {
  height: auto;
}

.post-book-attachment picture, .post-book-attachment a {
  height: auto;
  width: 100%;
}

.post-book-attachment img {
  height: auto;
  width: 100%;
  object-fit: contain;
  object-position: left bottom;
}

.geometric-attachment {
  position: absolute;
  top: 80%;
  left: 0;
}

.geometric-attachment.lightblue div {
  background: var(--quinary);
}

.overflow-hiddent {
  overflow: hidden;
}

/* styles new book */

#form-book {
  position: relative;
}

#form-book input {
  height: 50px;
  border: none;
  background: transparent;
  color: black;
}

#form-book input::placeholder {
  color: gray;
}

.field-area {
  border-bottom: solid 1px black;
}

/* --- New block --- */

.bg-blue-hlm {
  background: #00A1B9;
}

.bg-orange-hlm {
  background: #D26700;
}

.bg-purple-hlm {
  background: #8C208A;
}

.bg-gray-hlm {
  background: #959595;
}

.fnt-blue-hlm {
  color: #00A1B9;
}

.fnt-orange-hlm {
  color: #D26700;
}

.fnt-purple-hlm {
  color: #8C208A;
}

.btn-hlm-large {
  width: 100%;
  background: #00A1B9;
  border: none;
  height: 50px;
  border-radius: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 15px 30px 25px;
  color: white;
  font-weight: 400;
  transition: .3s ease;
}

.btn-hlm-large:hover {
  background: #007889;
  padding: 30px 15px 30px 30px;
}

.btn-hlm-large img {
  transform: rotate(0deg);
  transition: .3s ease;
}

.btn-hlm-large:hover > img {
  transform: rotate(45deg);
}

.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  flex-wrap: nowrap;
  scrollbar-color: light;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}

@media (min-width: 1200px) {
  .scrolling-wrapper {
    overflow-x: hidden;
    flex-wrap: wrap;
  }
}

.scrolling-wrapper > div {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.scrolling-wrapper::-webkit-scrollbar {
  width: auto;
  height: 2px !important;
}

.scrolling-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.btn-send {
  color: var(--senary);
}

.space-header {
  width: 100%;
  height: 100px;
}

.btn-hlm-purple {
  width: 100%;
  background: #8C208A;
  border: none;
  height: 50px;
  border-radius: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 15px 30px 25px;
  color: white;
  font-weight: 400;
  transition: .3s ease;
}

.btn-hlm-purple:hover {
  background: #741372;
  padding: 30px 15px 30px 30px;
}

.btn-hlm-purple img {
  transform: rotate(0deg);
  transition: .3s ease;
}

.btn-hlm-purple:hover > img {
  transform: rotate(45deg);
}

/* Carrusel todos los niveles */

.mobile-light{display: none;}

.desktop-light{display: block;}

@media (max-width: 1400px) {
  .mobile-light{display: block;}
  .desktop-light{display:none}
}

.fnt-shadow-strong{
  text-shadow: 0 5px 5px rgb(0 0 0 / 66%);
}

/* Interactive */

.interactive {
  position: relative;
}

.interactive-picture {
  position: relative;
  z-index: 1;
}

.interactive-picture img {
  width: 100%;
}

.interactive-content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
}

.interactive-content a {
  display: block;
  background: var(--quinary);
  padding: 3px 10px;
  color: black;
  text-decoration: none;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0 0 0 / 5%);
  position: absolute;
  transition: .3s;
}

.interactive-content a:hover {
  color: white;
  box-shadow: 0 2px 6px rgba(0 0 0 / 10%);
  background: var(--bs-body-color);
}

.btn-interactive-1 {
  top: 6%;
  left: 14%;
}

.btn-interactive-2 {
  top: 45%;
  left: 2%;
}

.btn-interactive-3 {
  top: 27%;
  left: 8%;
}

.btn-interactive-4 {
  top: 35%;
  left: 68%;
}

.btn-interactive-5 {
  top: 16%;
  left: 64%;
}

.btn-interactive-6 {
  top: 59%;
  left: 75%;
}