/*
Theme Name: Template personalizado para MONS
Theme URI: URL
Description: -
Author: Villalva Mateo
Author URI: -
Version: 8.76
License: GPLv2
License URI: - 
Text Domain: -
*/


@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --main-color: #E68F04;
  --main-bg-color: #E68F04;
  --color-fondo: #1C362B;
  /*VERDE #1C362B*/
}
.mc4wp-alert{

  color: white !important;

}
.link-f:hover {
  font-weight: bold !important;
}

.link-f.active,
.link-f.active a {
  font-weight: bold !important;
  color: var(--main-bg-color);
}

#popup-modal .image-container img {
  position: absolute;
  right: -25px;
  top: -10px;
  width: 30px;

}

.oculto {
  opacity: 0 !important;
  transition: opacity 0.5s ease-in-out;
  /* Transición suave */
}



.mostrar {
  opacity: 1 !important;
}



.principal-color {

  color: var(--main-color);
}

.principal-color-fondo {

  background-color: var(--main-bg-color);
}

.color-fondo {

  background-color: var(--color-fondo);

}

body {
  overflow-x: hidden !important;
  font-family: 'StageGrotesk';
  font-weight: normal;
  margin: 0;

  background-color: var(--color-fondo);

}

html,
body {
  overflow-x: hidden !important;
}

@font-face {
  font-family: 'StageGrotesk';
  src: url('/wp-content/themes/Mons/Fonts/OTF/StageGrotesk-Light.otf') format('opentype');
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: 'StageGrotesk';
  src: url('/wp-content/themes/Mons/Fonts/OTF/StageGrotesk-Bold.otf') format('opentype');
  font-weight: bold;
  font-display: swap;
}



.d-s {
  top: 9vw;
}



/*
nav ul{
    display:flex;
    gap:10px;
  padding: 0 25px;
  margin:0;
    justify-content:space-between;
}
nav p {
    margin:0;
    font-size:25px;
    padding:0 50px ;
}

nav{
 
    background-color:#2b3831;
    color:white;
    padding: 25px 10px 5px 10px;
    display:flex; 
    align-items:end;
    justify-content:space-between;
}
*/
.b-text {
  color: #9ac1cf;
}

.navbar {
  position: relative;
  z-index: 100;
  width: 100vw;
  background-color: var(--color-fondo);
  top: 0;
}

#navs {
  transition: padding 0.5s ease;
}

.scrolled {
  padding: 5px 0 !important;
  /* Cambia el padding para hacer la barra de navegación más pequeña */
}

header hr {

  height: 3px !important;
  z-index: 15;
  background: rgb(255, 255, 255);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
  border: none;
  margin: 0 25px !important;
}

footer hr {
  border: none;
  height: 3px;

  color: #ffffff;
  /* old IE */
  background: rgb(255, 255, 255);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(154, 193, 207, 0.7539390756302521) 50%, rgba(255, 255, 255, 0) 100%);

}

nav ul {
  z-index: 15;
  position: absolute;
  /*
  right: 10vw;
  */
  right: 0;
  bottom: -3px;
}

nav ul li {

  position: relative;
  margin-bottom: 10px;
  /* Ajusta el espacio entre elementos */
  cursor: pointer;
  /* Cambia el cursor al pasar sobre los elementos */
}

.itemsnav::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -23px;
  /* Ajusta la distancia del borde inferior */
  width: 0;
  /* Inicialmente, el borde está oculto */
  height: 4px;
  /*
  background-color: #ffffff;
  */
  transition: width 0.3s ease;
  /* Animación de la anchura */
}

nav ul li:hover::after {

  width: 100%;
  /* Muestra el borde inferior al hacer hover o enfoque */
  background-color: #802375;
}

.searchnav:hover::after {

  bottom: -10px !important;


}

ul li.active,
ul li.active a {
  font-weight: bold;
  font-style: normal;
  /* Otros estilos específicos para el enlace activo o visitado */
}

/*
.colorfondo {
  background-color: #2b3731;
}
*/
.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}


#eliminar-btn {
  position: fixed;
  top: calc(13vw - 25px);
  right: calc(3vw - 25px);
  ;
  z-index: 15;
}

.cont {
  top: 13vw;
  right: 3vw;
  overflow: hidden;
  float: right;
  padding: 15px;
  position: fixed;
  width: 250px;
  height: 250px;
}

.circle {

  position: relative;

  width: 100%;
  height: 100%;
  border-radius: 100vmax;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  /* Cambiado a fondo transparente */
}

.logo {
  position: absolute;
  width: 75px;
  z-index: 55;
  height: 75px;
  background: url("https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/whatsapp-white-icon.png");
  background-size: cover;
  background-position: center;
}

.text {
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 10px;
  fill: #111;



}

.fondocircle {
  width: calc(100% - 40px);

  height: calc(100% - 40px);
}

#whatsapp-link img {
  position: absolute;

  display: flex;
  justify-content: center;

  filter: drop-shadow(0px 0px 5px #333);
}


#whatsapp-link {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}

#whatsapp-link img {
  position: absolute;

}

#whatsapp-link svg {
  width: 100%;
  /* Ancho del círculo */
  height: 100%;
  /* Altura del círculo */
}

#whatsapp-link .text {
  fill: #ffffff;
  /* Color del texto */
}

#whatsapp-link #circle {
  fill: transparent;
}

#whatsapp-link #textMask {
  mask: url(#circle);
}





#rotatingText {
  color: #fff;
  width: 100%;
  height: 100%;
  animation-name: rotate-circle;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes rotate-circle {
  to {
    transform: rotate(1turn);
  }
}
















:root {
  --d: 700ms;
  --e: cubic-bezier(0.19, 1, 0.22, 1);
}

.page-content {
  margin: 100px 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "a b b"
    "c d e";

  /*
  max-width: 1024px;
  */
  height: 98vw;
  min-height: 850px;


}

#card-1 {
  grid-area: a;

  height: 100%;
}

#card-2 {
  grid-area: b;
  height: 100%;
}

#card-3 {
  grid-area: c;
  height: 100%;
}

#card-4 {
  grid-area: d;
  height: 100%;
}

#card-5 {
  grid-area: e;
  height: 100%;
}

/*
@media (min-width: 600px) {
  .page-content {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 800px) {
  .page-content {
    grid-template-columns: repeat(4, 1fr);
  }
}
*/

.card {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 1rem 1rem 1rem 7vw;
  width: 100%;

  color: whitesmoke;
  background-color: whitesmoke;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
}

@media (min-width: 600px) {


  .card {
    height: 350px;
  }
}





.card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 110%;
  background-size: cover;
  background-position: 0 0;
  transition: transform calc(var(--d) * 1.5) var(--e);
  pointer-events: none;
}

.card:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  pointer-events: none;

  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.009) 11.7%, rgba(0, 0, 0, 0.034) 22.1%, rgba(0, 0, 0, 0.072) 31.2%, rgba(0, 0, 0, 0.123) 39.4%, rgba(0, 0, 0, 0.182) 46.6%, rgba(0, 0, 0, 0.249) 53.1%, rgba(0, 0, 0, 0.32) 58.9%, rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%, rgba(0, 0, 0, 0.54) 74.1%, rgba(0, 0, 0, 0.607) 78.8%, rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%, rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.79) 100%);
  transform: translateY(-50%);
  transition: transform calc(var(--d) * 2) var(--e);
}




.card:hover::before {
  filter: blur(5px);
}

.content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 100%;
  padding: 1rem;
  transition: transform var(--d) var(--e);
  z-index: 1;
  width: auto;
  transition: transform 0.5s ease;
}

.content>*+* {
  margin-top: 1rem;
}

.card:hover,
.card:focus {
  padding: 1rem;
}

.card:hover .content,
.card:focus .content {
  width: 100%;

  transition: 2s;
  padding: 1rem;
  text-align: center !important;

  align-items: center;
  /*
align-items: center; ANALIZAR
*/
}



.title {
  white-space: pre-line !important;
  font-size: 3vw;
  font-weight: normal !important;
  line-height: 1.2;
}

.title span {
  font-weight: bold !important;
}

.copy {
  /*
  font-size: 1.125rem;

  font-style: italic;
  */
  padding: 12px 0;
  line-height: 1.1;
}


.btn {
  cursor: pointer;
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.65rem;
  font-weight: bold;
  letter-spacing: 0.025rem;
  text-transform: uppercase;
  color: white;
  background-color: black;
  border: none;
}

.btn:hover {
  background-color: #0d0d0d;
}

.btn:focus {
  outline: 1px dashed rgba(255, 115, 0, 0.863);
  outline-offset: 3px;
}

@media (hover: hover) and (min-width: 1600px) {
  .card:after {
    transform: translateY(0);


  }

  .content {
    transform: translateY(calc(100% - 25rem));

    transition: transform 0.5s ease;
  }

  .content:focus {
    transform: translateY(calc(100% - 25rem));

    transition: transform 0.5s ease;
  }

  .content>*:not(.title) {
    opacity: 0;

    transform: translateY(1rem);
    transition: transform var(--d) var(--e), opacity var(--d) var(--e);

  }

  .subtitle {
    opacity: 1 !important;
  }

  .card:hover,
  .card:focus-within {
    align-items: center;
  }

  .card:hover:before,
  .card:focus-within:before {
    transform: translateY(-4%);
  }

  .card:hover:after,
  .card:focus-within:after {
    transform: translateY(-50%);
  }

  .card:hover .content,
  .card:focus-within .content {


    transform: translateY(0);
  }

  .card:hover .content>*:not(.title),
  .card:focus-within .content>*:not(.title) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--d) / 8);
  }

  .card:focus-within:before,
  .card:focus-within:after,
  .card:focus-within .content,
  .card:focus-within .content>*:not(.title) {
    transition-duration: 1s;
  }
}






















.swiper-container {
  width: 100%;

  padding-top: 50px;
  padding-bottom: 50px;
}

.swiper {
  padding: 0 113px !important;
}

.swiper-slide {
  margin: 0;
  background-position: center;
  background-size: cover;

  background-color: #fff;
  overflow: hidden;
  border-radius: 12px;
}





.img-rating {
  border-radius: 10px;
  width: 100%;
  object-fit: cover;
  height: 300px;
}




.galeria h2 {
  /*
  font-size: 1vw;
  */
  font-weight: bolder;
}



.galeria {

  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  font-family: 'StageGrotesk' !important;
  font-weight: normal;

  padding-block: min(20vh, 3rem);
}


input {
  border: 1px solid #ccc;
  /* Establece un borde sólido de color gris por defecto */

  transition: border-color 0.3s ease;
  /* Transición suave para el cambio de color de borde */
}

input:focus,
textarea:focus {
  /* Cambia el color del borde cuando el input está enfocado */
  border: 3px solid var(--main-color) !important;
  outline: none !important;
  /* Quita el contorno predeterminado */
}

.galeria>div span {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 1rem;
  color: #717171;
}



.galeria>div>a:hover {
  border: 0.125rem solid #e5ff00;
  color: #e5ff00;
}

.swiper {
  width: 100%;
  padding-top: 3.125rem;
}

.swiper-pagination-bullet,
.swiper-pagination-bullet-active {
  background: #fff;
}

.swiper-pagination {
  bottom: 1.25rem !important;
}

.swiper-slide {
  width: 18.75rem;
  height: 28.125rem;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: self-start;
}



.swiper-slide a {
  margin: 1.25rem 1.563rem 3.438rem 1.563rem;
  padding: 0.438em 1.875rem;
  font-size: 0.9rem;
}

.swiper-slide a:hover {
  color: #005baa;
}


.swiper-slide-active div {
  display: block;
  opacity: 1;
}

.swiper-button-next {

  right: -125px !important;
}

.swiper-button-prev {

  left: -125px !important;
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  color: #802375;

}

@media screen and (min-width: 48rem) {
  .galeria {
    display: flex;
    align-items: center;
  }

}

@media screen and (min-width: 93.75rem) {
  .swiper {
    width: 100%;
  }
}

.suscripcion {
  border: 1px solid var(--main-color) !important;
  height: 35px;
  background-color: #0000 !important;
}

#form-ss [type=text] {
  border: 1px solid var(--main-color) !important;
}

#form-ss ::placeholder {
  color: var(--main-color);
}

.button-s {

  font-size: 21px;
}







.social {
  color: var(--main-color);
  transition: all .125s ease-in-out;
}

@-moz-keyframes bump {
  33% {
    -moz-transform: scale(1.3);
  }

  66% {
    -moz-transform: scale(0.8);
  }

  100% {
    -moz-transform: scale(1.0);
  }
}

@-webkit-keyframes bump {
  33% {
    -webkit-transform: scale(1.3);
  }

  66% {
    -webkit-transform: scale(0.8);
  }

  100% {
    -webkit-transform: scale(1.0);
  }
}

@keyframes bump {
  33% {
    transform: scale(1.3);
  }

  66% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1.0);
  }
}



.fa {
  font-size: 10vw;
  color: var(--main-color);
}

/*
.social span:not(:first-child):not(:last-child) {
  margin-left: 10vw;
  margin-right: 10vw;
}
*/
.social span:hover {
  -webkit-animation: bump .25s ease-in-out;
  -moz-animation: bump .25s ease-in-out;
  animation: bump .25s ease-in-out;
  cursor: pointer;
}

.social .fa:hover {

  color: white;

}


html {
  scroll-behavior: smooth;
}


/* MOBILES */



#whatsapp-icon {
  width: 110px;
  height: 110px;
}

@media screen and (max-width:866px) {


  .copy {

    padding:  0;

  }
  

  .content>*:not(.title) {
    opacity: 1;

    transform: translateY(0);

  }



  .button-s {

    font-size: 11px;
  }



  .d-s {
    top: 0;
  }



  .swiper {
    padding: 0 60px !important;
  }

  .card:hover .content,
  .card:focus .content {

    transition: 1s;
    /*
align-items: center; ANALIZAR
*/
  }



  .page-content {
    width: 100%;

    grid-template-columns: 1fr;
    grid-template-areas:
      "a"
      "b"
      "c"
      "d"
      "e";

    height: auto;



  }

  #whatsapp-link {
    left: 0;
    top: 0;
  }

  .fondocircle {
    width: calc(100% - 20px);

    height: calc(100% - 20px);
  }

  #whatsapp-icon {

    width: 65px;
    height: 65px;
  }

  .cont {
    top: 70%;
    width: 130px;
    height: 130px;

    right: 35px;
  }

  #eliminar-btn {

    top: calc(70% - 25px);
    z-index: 15;

    right: 15px;

  }

 

  #navs ul {
    display: none;
  }

}


.image-container img {


  position: absolute;
  right: -40px;
  top: -10px;
  width: 50px;
}

@media screen and (max-width:550px) {

  .img-rating {
    height: 160px;
  }

}

@media only screen and (max-width: 1600px) {


  .swiper-button-next {

    right: 0 !important;
  }

  .swiper-button-prev {

    left: 0 !important;
  }

  .title {

    font-size: 25px;


  }




  .image-container img {

    right: -25px;
    top: 0;
    width: 20px;
  }

  .card:after {
    transform: translateY(0);


  }

  .content {
    transform: translateY(calc(100% - 8rem));

    transition: transform 0.5s ease;
  }

  .content:focus {
    transform: translateY(calc(100% - 25rem));
    align-items: center;
    transition: transform 0.5s ease;
  }

  /*
  .content>*:not(.title) {
    opacity: 0;
    transform: translateY(1rem);
    transition: transform var(--d) var(--e), opacity var(--d) var(--e);
  }
*/
  .card:hover,
  .card:focus-within {
    align-items: center;
  }

  .card:hover:before,
  .card:focus-within:before {
    transform: translateY(-4%);
  }

  .card:hover:after,
  .card:focus-within:after {
    transform: translateY(-50%);
  }

  .card:hover .content,
  .card:focus-within .content {
    transform: translateY(0);
  }

  .card:hover .content>*:not(.title),
  .card:focus-within .content>*:not(.title) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--d) / 8);
  }

  .card:focus-within:before,
  .card:focus-within:after,
  .card:focus-within .content,
  .card:focus-within .content>*:not(.title) {
    transition-duration: 0.5s;
  }

}
































.window {
  position: relative;
  display: block;

  z-index: 100;
  box-shadow: 0 0 65px 15px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  border-radius: 3px;
  background: #ffffff00;
}



.window .header {

  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;

  overflow: hidden;
  transition: all 0.5s ease-out, background-color 0.5s ease-out;
  transition-delay: 0.2s;
  z-index: 1;
}

.window .header .burger-container {

  z-index: 50;
  position: relative;
  display: inline-block;
  height: 50px;
  width: 50px;
  cursor: pointer;
  transform: rotate(0deg);
  transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.window .header .burger-container #burger {
  width: 18px;
  height: 8px;
  position: relative;
  display: block;
  margin: -4px auto 0;
  top: 50%;
}

.window .header .burger-container #burger .bar {
  width: 100%;
  height: 1px;
  display: block;
  position: relative;
  background: #FFF;
  transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  transition-delay: 0s;
}

.window .header .burger-container #burger .bar.topBar {
  transform: translateY(0px) rotate(0deg);
}

.window .header .burger-container #burger .bar.btmBar {
  transform: translateY(6px) rotate(0deg);
}

.window .header .icon {
  display: inline-block;
  position: absolute;
  height: 100%;
  line-height: 50px;
  width: 50px;
  height: 50px;
  text-align: center;
  color: #FFF;
  font-size: 22px;
  left: 50%;
  transform: translateX(-50%);
}

.window .header .icon.icon-bag {
  right: 0;
  top: 0;
  left: auto;
  transform: translateX(0px);
  transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  transition-delay: 0.65s;
}

.window .header ul.menu {
  position: relative;
  display: block;
  padding: 0px 48px 0;
  list-style: none;
}

.window .header ul.menu li.menu-item {
  border-bottom: 1px solid #333;
  margin-top: 5px;
  transform: scale(1.15) translateY(-30px);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}

.window .header ul.menu li.menu-item:nth-child(1) {
  transition-delay: 0.49s;
}

.window .header ul.menu li.menu-item:nth-child(2) {
  transition-delay: 0.42s;
}

.window .header ul.menu li.menu-item:nth-child(3) {
  transition-delay: 0.35s;
}

.window .header ul.menu li.menu-item:nth-child(4) {
  transition-delay: 0.28s;
}

.window .header ul.menu li.menu-item:nth-child(5) {
  transition-delay: 0.21s;
}

.window .header ul.menu li.menu-item:nth-child(6) {
  transition-delay: 0.14s;
}

.window .header ul.menu li.menu-item:nth-child(7) {
  transition-delay: 0.07s;
}

.window .header ul.menu li.menu-item a {
  display: block;
  position: relative;
  color: #FFF;
  font-family: "Ek Mukta", sans-serif;
  font-weight: 100;
  text-decoration: none;
  font-size: 22px;
  line-height: 2.35;
  font-weight: 200;
  width: 100%;
}

.window .header.menu-opened {
  height: 100%;
  background-color: var(--color-fondo);
  transition: all 0.3s ease-in, background 0.5s ease-in;
  transition-delay: 0.25s;
}

.window .header.menu-opened .burger-container {
  transform: rotate(90deg);
}

.window .header.menu-opened .burger-container #burger .bar {
  transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  transition-delay: 0.2s;
}

.window .header.menu-opened .burger-container #burger .bar.topBar {
  transform: translateY(4px) rotate(45deg);
}

.window .header.menu-opened .burger-container #burger .bar.btmBar {
  transform: translateY(3px) rotate(-45deg);
}

.window .header.menu-opened ul.menu li.menu-item {
  transform: scale(1) translateY(0px);
  opacity: 1;
}

.window .header.menu-opened ul.menu li.menu-item:nth-child(1) {
  transition-delay: 0.27s;
}

.window .header.menu-opened ul.menu li.menu-item:nth-child(2) {
  transition-delay: 0.34s;
}

.window .header.menu-opened ul.menu li.menu-item:nth-child(3) {
  transition-delay: 0.41s;
}

.window .header.menu-opened ul.menu li.menu-item:nth-child(4) {
  transition-delay: 0.48s;
}

.window .header.menu-opened ul.menu li.menu-item:nth-child(5) {
  transition-delay: 0.55s;
}

.window .header.menu-opened ul.menu li.menu-item:nth-child(6) {
  transition-delay: 0.62s;
}

.window .header.menu-opened ul.menu li.menu-item:nth-child(7) {
  transition-delay: 0.69s;
}

.window .header.menu-opened .icon.icon-bag {
  transform: translateX(75px);
  transition-delay: 0.3s;
}

.window .content {
  font-family: "Ek Mukta", sans-serif;
  padding: 67px 4% 0;
  text-align: justify;
  overflow: scroll;
  max-height: 100%;
}

.window .content::-webkit-scrollbar {
  display: none;
}

.window .content h2 {
  margin-bottom: 0px;
  letter-spacing: 1px;
}

.window .content img {
  width: 95%;
  position: relative;
  display: block;
  margin: 75px auto 75px;
}

.window .content img:nth-of-type(2) {
  margin: 75px auto;
}

.container-2 input#search {
  width: 50px;
  height: 50px;
  background: var(--color-fondo);
  border: none;
  font-size: 10pt;
  float: left;
  color: #262626;
  padding-left: 50px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #fff;

  -webkit-transition: width .55s ease;
  -moz-transition: width .55s ease;
  -ms-transition: width .55s ease;
  -o-transition: width .55s ease;
  transition: width .55s ease;
}


#navs {
  display: block;
}

#destinos-s {
  font-size: 1.7vw;

}

#titulo-pr {
  font-size: 5vw;
  top: 45vw;
  left: 6vw;
}

#conexiones-i {
  top: 45vw;
  left: 27vw;
  font-size: 1.7vw;
}

@media (max-width: 1176px) {
  #titulo-pr {
    top: 40vw;
    left: 1vw;
  }

  #destinos-s {
    top: 5.5vw;
    font-size: 2vw;
  }

  #conexiones-i {
    font-size: 2vw;


    top: 37vw;
    left: 26vw;
  }

  #navs {
    display: none;
  }

  .container-2 input#search {
    background: #1d2d26;
  }

  .window {
    width: 100%;
    /*
    height: 100vh;
    */
    height: 0;
    margin: 0;
    border-radius: 0px;
  }

  .window .header {
    position: fixed;
  }
}













.box {
  /*
  width: 300px;
  */
  height: 50px;
}

.container-2 {
  /*
  width: 300px;
  */
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}



.container-2 input#search::-webkit-input-placeholder {
  color: #65737e;
}

.container-2 input#search:-moz-placeholder {
  /* Firefox 18- */
  color: #65737e;
}

.container-2 input#search::-moz-placeholder {
  /* Firefox 19+ */
  color: #65737e;
}

.container-2 input#search:-ms-input-placeholder {
  color: #65737e;
}

.container-2 .icon {
  position: absolute;
  top: 50%;
  top: 13px;
  left: 18px;
  z-index: 1;
  color: #4f5b66;
}

.container-2 input#search:focus,
.container-2 input#search:active {
  outline: none;
  width: 300px;
}

.container-2:hover input#search {
  width: 300px;
}

.container-2:hover .icon {
  color: #93a2ad;
}