/* *{
    border: 1px solid red;
} */
.home_text{
  text-align: center;
  margin: 5%;
} 

.redes_sociales{
  text-align: center;
  margin-bottom: 5%;
}

.tours_presentacion{
  text-align: center;
  margin: 5%;
}

.tours_presentacion > p{
  font-size: large; color: grey;
}

.tours-items{
  margin: 5%;
}

.kodfun-galeri
{
  display: flex;
  gap: 1rem;
}

.tour_descrip{
  margin: 10%;
}

    @media screen and (min-width: 768px) {
      .tour_descrip{
        margin-left: 25%;
      }

      .kodfun-galeri
      {
        margin-top: 4rem;
        height: 62.5rem;
      }

      .kodfun-galeri > div > div
      {
        height: 10rem;
      }

      .kodfun-galeri > div:hover > div
      {
        color: white;
        backdrop-filter: blur(10px);
        margin: 20rem;
      }

      footer > div
      {
          width: 11%;
          margin-left: 44.5%;
      }

      .card-flip
      {
          background-color: transparent;
          width: 25rem;
          height: 25rem;
          perspective: 100rem;
      }
      
      .sobre_mi_div
      {
        width: 70%;
        height: 40%;
        margin-left: 15%;
        margin-top: 2rem;
        display: flex;
        color: #4f5759;
      }

      .sobre_mi_div > div > h2
      {
        font-size: 3vw;
      }

      .sobre_mi_div > div > h5
      {
        font-size: 1.5vw;
      }

      .slider
      {
        margin-top: 30vw;
      }
    }

    @media screen and (max-width: 768px) {
      .tour_descrip{
        margin: 10%;
      }

      .container-fluid{
        width: 80% !important;
      }

      .kodfun-galeri
      {
        margin-top: 6.5rem;
        height: 34.5rem;
      }

      .kodfun-galeri > div > div
      {
        margin-top: 6rem;
      }

      .kodfun-galeri > div:hover > div
      {
        color: white;
        backdrop-filter: blur(10px);
      }

      footer > div
      {
        width: 60%;
        margin-left: 20%;
      }

      .card-flip
      {
        background-color: transparent;
        width: 22rem;
        height: 20rem;
        perspective: 100rem;
      }

      .sobre_mi_div
      {
        width: 80%;
        height: 60%;
        margin-left: 10%;
        margin-top: 5rem;
        display: flex;
        color: #4f5759;
      }

      .sobre_mi_div > div > h2
      {
        font-size: 4vw;
      }

      .sobre_mi_div > div > h5
      {
        font-size: 2vw;
      }

      .slider
      {
        margin-top: 55vw;
      }
    }

    .kodfun-galeri > div
    {
      flex: 1;
      border-radius: 1rem;
      background-position: center;
      background-repeat: no-repeat;
      background-size: auto 100%;
      transition: all .8s cubic-bezier(.25, .4, .45, 1.4);
      text-align: center;
    }

    .kodfun-galeri > div > div
    {
      color: transparent;
      width: 0px;
    }

    .kodfun-galeri > div:hover
    {
      flex: 10;
    }

    .kodfun-galeri > div:hover > div
    {
      color: white;
      width: auto;
    }

    body
    {
      background: rgb(144,188,243);
      background: linear-gradient(0deg, rgba(144,188,243,1) 0%, rgba(255,255,255,1) 100%);  
    }

    .navbar
    {
        background-color: #4f5759 !important;
    }

    .nav-link
    {
        width: 100%; white-space: nowrap;
    }

    .dropdown-menu
    {
        min-width: 55px;
        background-color: #4f5759;
    }

    .nav-item .dropdown
    {
        width: 10px;
    }

    .dropdown-item img
    {
        width: 20px; height: 20px; border-radius: 50%;
    }

    .dropdown-item
    {
        color: rgba(255,255,255,.55);
    }

    .card-flip-inner
    {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.5s;
        transform-style: preserve-3d;
    }

    .card-flip:hover .card-flip-inner
    {
        transform: rotateY(180deg);
    }

    .card-flip-front, .card-flip-back
    {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .card-flip-front
    {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .card-flip-back
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transform: rotateY(180deg);
    }

    .button
    {
        display: inline-block;
        height: 60px;
        width: 60px;
        margin: 0 5px;
        overflow: hidden;
        background: #fff;
        border-radius: 50px;
        cursor: pointer;
        box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
        transition: all 0.3s ease-out;
    }

    .button .icon
    {
        display: inline-block;
        height: 60px;
        width: 60px;
        text-align: center;
        border-radius: 50px;
        box-sizing: border-box;
        line-height: 60px;
        transition: all 0.3s ease-out;
    }

    .button:nth-child(1):hover .icon
    {
        background: #4267B2;
    }

    .button:nth-child(2):hover .icon
    {
        background: #1da1f2;
    }

    .button:nth-child(3):hover .icon
    {
        background: #E1306C;
    }

    .button:nth-child(4):hover .icon
    {
        background: #ff0000;
    }

    .button .icon i
    {
        font-size: 25px;
        line-height: 60px;
        transition: all 0.3s ease-out;
    }

    .button:hover .icon i
    {
        color: #fff;
    }

    footer > div > div > a
    {
        color: black;
    }

    .sobre_mi_div > img
    {
      width: 45%;
      height: 45%;
      margin-left: -5%;
      margin-top: 10%;
      margin-bottom: 10%;
      flex: 1;
      border-radius: 60% 5%;
    }

    .sobre_mi_div > div
    {
      text-align: center;
      width: 100%;
      margin-left: 5%;
      margin-right: 5%;
      margin-top: 20%;
      height: 10%;
    }

    .sobre-mi-items
    {
      margin-left: 10%;
      width: 80%;
      background: rgb(144,188,243);
      background: linear-gradient(0deg, rgba(144,188,243,1) 0%, rgba(255,255,255,1) 100%);
      box-shadow: 20px 20px 60px #bebebe,
              -20px -20px 60px #ffffff;
    }

    .marketing
    {
      background: rgb(144,188,243);
      background: linear-gradient(0deg, rgba(144,188,243,1) 0%, rgba(255,255,255,1) 100%);
      width: 90vw;
      box-shadow: 20px 20px 60px #bebebe,
              -20px -20px 60px #ffffff;
    }

    .slider
    {
      background-image: url("./imgs/carousel/tercera.jpg");
      background-size: 100% 100%;
      margin-left: 50%;
      transform: translate(-50%, -50%);
      width: 90vw;
      height: 40vw;
      border-radius: 20px;
      animation: slide 40s infinite linear;
    }

    .slider > div
    {
      text-align: center;
      position: absolute;
      bottom: 5%;
      left: 25%;
      width: 50%;
      color: transparent;
    }

    .slider > div > h1
    {
      font-size: 4vw;
    }

    .slider > div > h4
    {
      font-size: 2vw;
    }

    .slider1
    {
      animation: slide1 40s infinite linear;
    }

    .slider2
    {
      animation: slide2 40s infinite linear;
    }

    .slider3
    {
      animation: slide3 40s infinite linear;
    }

    .slider4
    {
      animation: slide4 40s infinite linear;
    }

    .slider5
    {
      animation: slide5 40s infinite linear;
    }

    .slider6
    {
      animation: slide6 40s infinite linear;
    }

    #calendario th, #calendario td
    {
      /* border: 1px solid black; */
      background-color: #4f5759;
      color: #ffffff;
      padding: 10px;
    }

    .nodisp
    {
      color: #a9b2b3 !important;
    }

    .calendario
    {
      margin-left: 40%;
      width: 20%;
      text-align: center;
    }

    .calendarioMes
    {
      text-align: center;
    }

    .calendarioButton
    {
      background-color: transparent;
      border: transparent;
      color: white;
    }

    .calendarioButton2
    {
      background-color: transparent;
      border: transparent;
      color: yellow;
    }

    .arrow {
      border: solid #ffffff;
      border-width: 0 3px 3px 0;
      display: inline-block;
      padding: 3px;
    }

    .arrow_grey {
      border: solid #a9b2b3;
      border-width: 0 3px 3px 0;
      display: inline-block;
      padding: 3px;
    }
    
    .right {
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
    }
    
    .left {
      transform: rotate(135deg);
      -webkit-transform: rotate(135deg);
    }

    .formularioReserva
    {
      margin-left: 40%;
      padding: 10px;
      width: 20%;
      text-align: left;
    }

    .formularioReserva > form > label
    {
      width: 30%;
    }

    .formularioReservaInput
    {
      margin: 1%;
      width: 65%;
    }

    .reservaButton
    {
      text-align: center;
      width: 80%;
      margin-top: 5%;
      margin-left: 10%;
    }
    
    @keyframes slide
    {
      0% {background-image: url("./imgs/carousel/tercera_val.jpg");}
      4% {background-image: url("./imgs/carousel/tercera_val.jpg");}
      16% {background-image: url("./imgs/carousel/primera.jpg");}
      24% {background-image: url("./imgs/carousel/primera.jpg");}
      32% {background-image: url("./imgs/carousel/primera_val.jpg");}
      40% {background-image: url("./imgs/carousel/primera_val.jpg");}
      48% {background-image: url("./imgs/carousel/segunda.jpg");}
      56% {background-image: url("./imgs/carousel/segunda.jpg");}
      64% {background-image: url("./imgs/carousel/segunda_val.jpg");}
      72% {background-image: url("./imgs/carousel/segunda_val.jpg");}
      80% {background-image: url("./imgs/carousel/tercera.jpg");}
      88% {background-image: url("./imgs/carousel/tercera.jpg");}
      96% {background-image: url("./imgs/carousel/tercera_val.jpg");}
      100% {background-image: url("./imgs/carousel/tercera_val.jpg");}
    }

    @keyframes slide1
    {
      16% {color: white;}
      24% {color: white;}
      32% {color: transparent;}
    }

    @keyframes slide2
    {
      24% {color: transparent;}
      32% {color: white;}
      40% {color: white;}
      48% {color: transparent;}
    }

    @keyframes slide3
    {
      40% {color: transparent;}
      48% {color: white;}
      56% {color: white;}
      64% {color: transparent;}
    }

    @keyframes slide4
    {
      56% {color: transparent;}
      64% {color: white;}
      72% {color: white;}
      80% {color: transparent;}
    } 

    @keyframes slide5
    {
      72% {color: transparent;}
      80% {color: white;}
      88% {color: white;}
      96% {color: transparent;}
    } 

    @keyframes slide6
    {
      4% {color: white;}
      16% {color: transparent;}
      88% {color: transparent;}
      96% {color: white;}
      100% {color: white;}
    }