*{
        box-sizing: border-box;
      }

      body{
        font-family: 'Roboto';
        font-size: 17px;
        color: #000000;
        margin: 0;

      }

       header
       {
            color:#FFF;
            height:45vh;
            display:flex;
            flex-direction: column;
            text-align: center;
            background: #0d4169;

       }

       nav{
        display: flex;
        flex-direction: column;
       }

       nav a{
        
        color: #f9f5ed;
        text-decoration: none;
      }

      a.active{
        color:#88c9ff;
        font-weight: bold;
        text-decoration: underline;
      }

       #header-social-media > ul{
            padding: 0;
            display: flex;
            justify-content: center;
         align-items: center;

           
       }

       #header-social-media > ul > li{
        margin-right: 10px;
        }

        footer
        {
         color:#FFF;
         background:#0d4169;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
        } 

        footer label{
            display: block;
            text-align: center
        }
       .link-us{
        display: none;
       } 

       .ul-horizontal li{
        display: inline-block;
         margin-right: 5px;
     }

     .ul-horizontal{
      text-align: center;
     }

      #info-links{
            padding: 0;
            text-align: center;
            
        }

        .title-bold{
          font-weight: bold;
        }

        #info-links li a {
          color: #FFF;
          text-decoration: none;
          text-align: left;
        }
    /* 
      
        footer{
        height:20vh;
        border: solid 1px;
        display: flex;
         justify-content: center;
         align-items: center;
         color:#FFF;
         background:#3258a8;
          bottom: 0;
    } 

   
    

      */

   

    .container{
        max-width:1400px;
        margin:auto;
        padding:10px;
        width: 100%;

        
    }


    #hero{
        position: relative;
        height:100%;
        
        color:#FFF;
       
    }
    
    #hero video{
         width: 100%;
         height: 100%;
        object-fit:scale-down;
        margin: 0;
         background-size: 100% auto;
    }

 .collage-exodos{
        display: inline-block;
      }

    ul {
  list-style-type: none;
}

 .fx{
        display: flex;
        flex-direction: column;
        width: 100%;
       }
        .flx-box{
            display: flex;
            flex-direction: column;
        } 

        ul#carousel li{
          text-align: center;
        }

        .bx-wrapper ul li { height: 200px; }
        .bx-wrapper{margin: auto;}
        .bx-controls{
          display: none;
        }


        .icons-social-media{
          width: 90%;
        }
        .icons-social-media-2{
          width: 75%;

        }

      .gvParticular{
        display: grid;
        place-content: center;
        column-gap:  50px;
        row-gap:  15px;
        max-width: 800px;
      }  

      .gvParticular > div > label{
        display: block;
      }

      .gvParticular > div > input{
       padding: 10px;
       border-radius: 5px;
       border: solid 1px grey;
       width: 99%;
      }

      .underline-tab ul{
        list-style-type: disc;
      }

.title-64{
   font-weight: bold;
    color:#063b66;
    font-family: Georgia;
    font-size: 32px; 
}

.ngt-nav-tabs{display:grid; grid-template-rows: repeat(1, auto); position:absolute;width:99%;height:20px;}
.box-collage
      {
        max-width: 1000px;
        margin: auto;
        gap: 10px;
        padding-top: 60px;
      }

      .card-d{
        height: 350px;
        position: relative;
        margin-bottom: 10px;
      }
      .btna{
        background: #063b66;
        color: #FFF;
        text-decoration: none;
        border-radius: 5px;
         padding: 4px;
       }

       .flx{
        display: flex;
        width: 100%;
        gap: 15px;
        flex-direction: column;
       }

     @media (min-width:720px){

      .gvParticular{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(4, 1fr);
      }  

      .blur{
        background: rgba(0,0,0,0.4) !important;
        position: absolute;
        top: 0;
        height: 100%;
        width: 100%;
      }

      .headerhome{
          height: 80vh !important;
        }

        .headerPage{
          height: 45vh !important;
        }

       header{
        /*height: 15vh;*/
        height: 130px;
        background-color: #0d4169;
        position: sticky;
        top: 0;
        z-index:999;
        width: 100%;

        display:flex;
        flex-direction: row;
        

        }

         #hero {
        
        }

        

        #hero video{
          object-fit:cover;
        }

        .header{
            display: flex;
            justify-content: space-between; 
            align-items: flex-start;
          
        }

        nav{
            display: flex;
            flex-direction: row;
        }

         .nav{
            display: flex;
         
        }

        #right-corner li{
            display: inline-block;
            margin-right: 10px;
        }

        #right-corner{
            display: flex;
            gap:10px;
            height: 90px;
            align-items: center;
        }  

        #header-social-media ul{

            margin: auto;
        }

        nav a{
            margin-right: 40px;
        }
        
         footer{
            height:30vh;
            border: solid 1px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            bottom: 0;
        } 

         footer div{
        
         text-align: center;
        }


        footer > div:first-child ul li {
            display: inline-block;
            

        }

         .link-us{
            
       } 

       #info-links{
        display: inline-grid;
        text-align: left;
       }

       footer div ul{
        padding: 0;
       }


       .sHero{
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        background-size: 100%;
        object-fit: cover;
       

       }


      

      .collage-exodos{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
         gap: 5px;
      }

      .title-72{
        color: #f9f5ed;
        font-size: 60px;
        font-family: Georgia;

      }

      .cont-collage{
        padding-top: 30px;
        /*padding-bottom: 30px;*/
      }

      .dv-content{
       max-width: 1200px;
       margin: auto;
      }

      .dv-decalogo-txt p{
        text-align: justify;
      }


      .fx{
        flex-direction: row;
       }

       div.fx > :nth-child(1) {
        width: 40%;
     }

     div.fx > :nth-child(2) {
        width: 20%;
     }
    div.fx > :nth-child(3) {
            width: 20%;
     }

      div.fx > :nth-child(4) {
            width: 20%;
     }
      .flx-box{
            flex-direction: row;
            gap:50px;
        } 

       .title-64{
        font-size: 64px;      
       }
      .ngt-nav-tabs{ grid-template-columns: repeat(3, 1fr)}

      .box-collage{
        padding-top: 0;
      }
      
       .card-d{
        
        /*
        background-repeat: no-repeat;
        background-position: center center;  Optional: centers the image 
        
         object-fit: fill;
        height: 200px; 
        */
        height: 49vh;
    }

    .btna{
      padding: 8px;
    }

    .flx{
     
        flex-direction: row;
       }
    
    } /* END MEDIA  */ 

    #banner-recuerdos{
        height: 40vh;
        background-size: cover;
        background-repeat: no-repeat;

        background-position: center center; /* Center the image horizontally and vertically */
       
        background-size: 100% auto;
    }
   

    .card-d img{
            
            min-height: 100px;
            height: 100%;
            width: 100%;
            object-fit: cover;
            border-radius: 10px;
            /*
        width: 100%;
        height: 100%;
         object-fit: cover;
          background-size: 100% auto;
          border-radius: 10px ;
          */


    }

        .grid-2{
            display: flex;
            /*grid-template-columns: 1fr 1fr;*/
            padding-bottom: 10px;
            gap:10px;
            justify-content: space-around;
        }
       

         .grid-3{
            display: flex;
            /*grid-template-columns: 1fr 1fr 1fr;*/
            justify-content: space-around;
            padding-bottom: 10px;
             gap:10px;
        }

      


        .cards-dest{
            /*max-width: 1000px;*/
            margin: auto;
        }


        .card-description{
            position: absolute;
            bottom: 0;
            z-index: 100;
            height: 100%;
            background-color: rgba(0,0,0,0.4);
            color: #FFF;
            width: 100%;
            padding: 10px;
            border-radius: 10px;
            flex-direction: column;
            display: flex;
            justify-content: flex-end;
        }

        .card-description p{
          
          
          
        }
          /* ================================================================================ */

        .menuwrap {
        margin-top: 0px; 
        padding:0px; 
        background-color: white ; 
        /* overflow: auto;  */
        white-space: nowrap; 
        width: 100%; 
        height: 35px;
        max-width: 1000px;
        margin: auto;
      }

      .mylinec { 
        margin-left: 0px; 
        margin-top: 10px;
        top: 0px; 
        position: relative; 
        background-color: #0D4169; 
        height: 3.5px; 
        width:150px; 
      } 

      .mybutton {
       /*  width:100px;*/
        background: transparent; 
        border:0px; 
        color: black; 
        padding: 10px 15px; 
        text-align: center; 
        text-decoration: none; 
        display: inline-block; 
        font-size: 13px; 
        margin: 0px 0px; 
        cursor: pointer; 
        -webkit-transition-duration: 0.4s; 
        /* Safari */ 
        transition-duration: 0.4s; 
         /* //if need shadow;  */
        /*//box-shadow: 0px 5px 18px*/
      }

      .underline{
        text-align: center;
        
      }
       
      .underline-tab{

        max-width: 1000px;
        margin: auto;
        
      }
      #collage-places, #sin{
        display: none;
      }

      

      

       /* ================================================================================ */


       #exodos
       {
        
         /*background-color: lightgray;*/
         position: relative;
       }

       .dv-txt-cen{
        text-align: center;
       }

       .fx-1{
        flex:1;
       }

       .dv-bottom{
        width: 100%;
        position: absolute;
        bottom: 0;
       }

       .logo-ng{
        
       }

       .logo-2{

       }

       

       

       .flx-center{

        justify-content: center;
        padding: 10px;
       }

       

       .mrg-bottom-60{
        margin-bottom: 60px;
       }

       .obj-cen{
        display: flex;
        align-items: center;
       }


       .dest-img{
            width: 400px;
          height: 600px;
          object-fit: cover;
           border-radius: 5px;
       }

       .bold{
        font-weight: bold;
       }

       .titles{
        font-family: 'roboto';
        font-weight: bold;
        font-size: 34px;
        color:#000;
        font-family: Georgia;
       }

      

       .title-16{
        font-size: 16px;
        color:#88c9ff ;
        font-family: Georgia;


       }

       .title-17{
        font-size:17px;
       }

       .title-19{
          color:#063b66;
          font-size: 19px;
          font-weight: bold;
          font-family: Georgia;
        }
       .title-48{
        font-size: 48px;
        color:#f9f5ed  ;
        font-family: Georgia;
        
       }

        .img-principal{
           max-width: 385px;
           /*max-height: 560px;*/
           height: 70vh;
        }

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

         .flx-box div{
            padding: 5px;
         }

         .carrusel div{
           max-width: 385px;
           max-height: 250px;
         }

         .carrusel div img{
            width: 100%;
            flex: 1;
            
            height: 100%;
            object-fit: fill;
            border-radius: 10px;
            justify-content: center;
            align-items: center;
            
         }

         .carrusel{
            padding-left: 5px;
         }
         .info{
            max-width: 1000px;
            margin: auto;
         }
         .dv-35c{
            width: 35%;
         }
         .dv-65pc{
            width: 65%;
         }

         .dv-50pc{
            width: 50%;
         }
         .txt-center{
            text-align: center;
         }

         .full-width{
            width: 100%;
         }

         .mgn-top-50{
          margin-top: 50px;
         }

         .pad-bottom-40{
          padding-bottom: 40px;
         }

         .pad-40{
           padding-top: 40px;
           padding-bottom: 40px;
         }

         .underline{
          color: #0D4169;
         }
         .current-tab{
          font-weight: bold;
          color: #0D4169;
         }


/*********************************************************************************/


.wrapper {
  width: 100%;
  margin: auto;
  background-color: white;
  /*border-radius: 10px;*/
  /*box-shadow: 0px 5px 15px rgba(0, 0, 0, .1);*/
}

.buttonWrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

button {
  letter-spacing: 3px;
  border: none;
  padding: 10px;
  background-color: #DBEDF9;
  color: #232c3d;
  font-size: 18px;
  cursor: pointer;
  transition: 0.5s;
}

button:hover {
  background-color: #d5e3ff;
}

button.active {
  background-color: #7EC0EA;
  color: #FFF;
  font-weight: bold;
}

.btnactive {
  background-color: white;
}



.content {
  display: none;
  padding: 10px 20px;
}

.content.active {
  display: block;
}
.txt-gold{
  color: #A16E30;
}

.dv-content p{
  text-align: justify;
}