@media only screen and (max-width: 1023px) {
    #header > .container {
        width: 100%;
        background-color: #f3f3f3;
        }

    .region-header {
        /*flex-direction: column;*/
        align-items: center;
        padding-top: 0;
        display: flex;
        background-color: #f3f3f3;
        width: 100%;

        #block-cuscotours-site-branding {
        width: 45%;
        background-color: #f3f3f3;
        padding: 10px 5px;

        .site-logo img {
            max-width: 150px;
            margin-left: 15px;
            }
        }

        #block-cuscotours-blockheadermain {
            width: 45%;
            background-color: #f3f3f3;
            .container {
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                .field--name-field-tipbloq-headm-blkcontch {
                margin-top: 10px;

                #block-blockcontactheader {
                    /*position: absolute;
                    right: 0;
                    top: 15%;
                    margin-bottom: 0;*/
                        .field--name-field-tipbloq-contchd-prg-conth {
                        display: none ;
                        }
                        .field--name-field-tipbloq-contchd-dispolink {
                        display: none;
                        }
                        .field--name-field-tipbloq-contchd-customlink {
                        display: none;
                        }

                        .field--name-field-tipbloq-contchd-flags2 {
                            div#block-advancedlanguageselectorblock {
                                .list-group {
                                display: flex;
                                gap: 10px;
}                               }
                        }

                        /*.field--name-field-tipparg-contchd-icon {
                        background-color: #cecece;
                        border-radius: 50%;
                        padding: 5px;
                        }

                        .field--name-field-tipparg-contchd-link {
                        display: none;
                        }

                        .field--name-field-tipbloq-contchd-prg-conth {
                        gap: 5px;
                        }*/
                    }

                
                

                
                }
                .field--name-field-tipbloq-headm-blkcontch:after {
                content: "";
                display: block;
                height: 3px;
                background-color: #f4b85e;
                margin-bottom: 10px;
                display: none;
                }


            }
            

        }
        /*div#block-cuscotours-advancedlanguageselectorblock {
        width: 30%;
        }*/

         

    }

    


    /*.field--name-field-tipbloq-headm-blkcontch::after {
        margin-bottom: 0;
    }*/

      

   .tbm.tbm--mobile {
        display: flex;
        flex-direction: row;
        justify-content: end;
    }

    .tbm-button {
        background-color: transparent;
        border: none;
        margin-bottom: 0;
    }

    .tbm.tbm--mobile .tbm-collapse {
        padding-top: 0;
    }

    .tbm-button-container {
        width: 35px;
        height: 30px;
    }

    #block-cuscotours-blockslidermain {

        /*padding-top: 15%;*/
        padding-bottom: 15%;
        text-align: center;
    }

    #block-cuscotours-blockslidermain .field--name-field-tipbloq-slidma-background {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }

    #block-cuscotours-blockslidermain .field--name-field-tipbloq-slidma-background img {
        height: 100%;
        object-fit: cover;
    }

    #block-cuscotours-blockslidermain .overlay-slider {
        position: relative;
    }

    #block-cuscotours-blockslidermain .overlay-slider .container {
        width: 90%;
        margin: 0 auto;
    }

    #block-cuscotours-blockslidermain .field--name-field-tipbloq-slidma-title {
        width: 100%;
    }

    #block-cuscotours-blockslidermain .field--name-field-tipbloq-slidma-title h2 {
        font-size: 1.8em;
    }

    #block-cuscotours-blockslidermain .field--name-body {
        width: 100%;
    }

    #block-cuscotours-blockcuscotours {
        margin-top: 5%;
    }

    #block-cuscotours-blockcuscotours > .container {
        width: 90%;
        margin: 0 auto;
    }

    #block-cuscotours-blockcuscotours .field--name-field-tipbloq-cusctor-title h1 {
        font-size: 1.4em;
    }

    #block-cuscotours-blockcuscotours .field--name-body {
        width: 100%;
    }

    #block-cuscotours-blockcuscotours .field--name-field-tipbloq-cusctor-prgcustor {
        grid-template-columns: 1fr;
    }

    #block-cuscotours-blocktourpoulares > .container {
        width: 90%;
        margin: 0 auto;
    }

    #block-cuscotours-blocktourpoulares .field--name-field-tipbloq-trpopu-title h2 {
        font-size: 1.4em;
    }

    #block-cuscotours-blocktourpoulares .field--name-body {
        width: 100%;
    }

    .view-view-popular-tour-home > .view-content {
        grid-template-columns: 1fr;
    }

    #block-cuscotours-blocksliderperu .container {
        width: 90%;
        margin: 0 auto;
    }

    #block-cuscotours-blockcustomtours > .container {
        width: 90%;
        margin: 0 auto;
    }

    #block-cuscotours-blockcustomtours .field--name-field-tipbloq-custtour-title h2 {
        font-size: 1.4em;
    }

    #block-cuscotours-blockcustomtours .field--name-body {
        width: 100%;
    }

    .view-view-custom-tour-home > .view-content {
        grid-template-columns: 1fr;
    }

   

    #block-cuscotours-blocksliderhumantay .overlay-main .container {
        width: 90%;
        margin: 0 auto;
    }


    #block-cuscotours-blocksliderhumantay .overlay-main .body-container {
        width: 100%;
    }



    #block-cuscotours-blocksliderhumantay .field--name-field-tipbloq-humans-title h2 {
        font-size: 1.4em;
        color: white;
    }

    #block-cuscotours-blockpackagesperu > .container {
        width: 90%;
        margin: 0 auto;
    }

    #block-cuscotours-blockpackagesperu .field--name-field-tipbloq-packp-title h2 {
        font-size: 1.4em;
    }

    #block-cuscotours-blockpackagesperu .field--name-body {
        width: 100%;
    }

    .view-view-packages-peru-home > .view-content {
        grid-template-columns: 1fr;
    }

    #block-cuscotours-blockdetailsagen > .container {
        width: 90%;
        margin: 0 auto;
    }

    #block-cuscotours-blockdetailsagen .field--name-field-tipbloq-detagen-prgdetag {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    #block-cuscotours-blockdetailsagen .field--name-field-tipbloq-detagen-prgdetag .field--name-field-tipparg-detagen-icon {
        width: 60px;
        height: 60px;
    }

    #block-cuscotours-blockdetailsagen .field--name-field-tipbloq-detagen-prgdetag .field--name-field-tipparg-detagen-icon img {
        width: 100%;
        height: auto;
        display: block;
    }

    #block-cuscotours-blockbloghome > .container {
        width: 90%;
        margin: 0 auto;
    }

    #block-cuscotours-blockbloghome .field--name-field-tipbloq-blogh-title h2 {
        font-size: 1.4em;
    }

    #block-cuscotours-blockbloghome .field--name-body {
        width: 100%;
    }

    .view-view-blog-home .view-content {
        grid-template-columns: 1fr;
    }

    .field--name-field-tip-parg-cont-blog-body img {
    width: 100%;
        
    }


    #block-cuscotours-blockquestionscontent > .container {
        width: 90%;
        margin: 0 auto;
    }

    #block-cuscotours-blockquestionscontent .field--name-field-tipbloq-quest-title h2 {
        font-size: 1.4em;
    }

    #block-cuscotours-blockcertificactions > .container {
        width: 90%;
        margin: 0 auto;
    }

    #block-cuscotours-blockcertificactions .field--name-field-tipbloq-cert-title h2 {
        font-size: 1.4em;
    }

    #block-cuscotours-blockcertificactions .field--name-field-tipbloq-cert-images img {
    width: 100px;
   
}

    #block-cuscotours-blockfootermain > .container {
        display: block;
        margin: 0 auto;
        div#block-blockinfocontact{
            .field--name-field-tipbloq-infocont-logo {
            display: flex;
            justify-content: center;
            }
            .field--name-field-tipbloq-infocont-prgconftr {
            align-items: center;
            }

        }
        div#block-blockaboutusfooter{
            margin-top: 30px;
            border-top: solid 1px white;
            padding-top: 10px;
            .field.field--name-field-tipbloq-aboutus-ftr H2{
                text-align: center;
            }
            .field--name-field-tipbloq-aboutus-ftr-vabtus{
                margin-top: 10px;

            }

        }
        div#block-blocksocialmfooter {
            margin-top: 30px;
            border-top: solid 1px white;
            padding-top: 10px;
            .field--name-field-tipbloq-socialm-prgsociftr {
                justify-content: space-evenly;
                margin-top: 10px;
                margin-bottom: 30px;
            }
        }
        div#block-bloquebooksfooter {
            margin-top: 30px;
            border-top: solid 1px white;
            padding-top: 10px;
            .field--name-field-tipbloq-bookf-prgbookf {
                justify-content: space-evenly;
                margin-top: 10px;
            }
        }


    }

    .page-node-type-tour-page #contenedor {
        grid-template-columns: 1fr;
        width: 90%;
        margin: 0 auto;
    }

    .page-node-type-tour-page .view-view-slider-tour .view-content {
        width: 90%;
        margin: 0 auto;
    }

    .page-node-type-tour-page .view-view-slider-tour .views-field-field-pgtour-short-gallery .field-content {
        grid-template-columns: 1fr;
    }

    .page-node-type-tour-page .view-view-slider-tour .views-field-field-pgtour-short-gallery .thumbnails {
        grid-template-columns: repeat(4, 1fr);
      grid-template-rows: none;
      height: auto;
    }

    /*----------------------------- SLIDE TOURS CON IMG MEDIA ----------------------*/
     .page-node-type-tour-page .view-view-slider-tour .views-field-field-pgtour-slide-gallery .field-content {
        grid-template-columns: 1fr;
    }

    .page-node-type-tour-page .view-view-slider-tour .views-field-field-pgtour-slide-gallery .thumbnails {
        grid-template-columns: repeat(4, 1fr);
      grid-template-rows: none;
      height: auto;
    }
    .page-node-type-tour-page .view-view-slider-tour .views-field-field-pgtour-slide-gallery .slider-module {
    height: auto;
  }

  .page-node-type-tour-page .view-view-slider-tour .views-field-field-pgtour-slide-gallery .thumbnail img {
    height: 100px;
  }
    /*------------------------------ FIN SLIDE TOURS--------------------------------*/

    .page-node-type-tour-page .view-view-slider-tour .views-field-title {
        bottom: 45%;
        left: 0;

        width: 100%;
        box-sizing: border-box;

        h1 {
            font-size: 1.8em;
        }
    }

    .page-node-type-tour-page .nav-button {
        font-size: 14px;
        padding: 5px 10px;
    }

    .page-node-type-tour-page .entity-ref-anchor-formatter > ul {
        flex-wrap: wrap;
        padding: 10px;
        top: 95px;
        background: #f1f1f1;
        justify-content: space-evenly;

    }

    .page-node-type-tour-page .entity-ref-anchor-formatter .value-formatter {
        font-size: 14px;
    }

    .field--name-field-pgtour-short-description img {
    width: 100%;
    }
    .field--name-field-tipparg-tabtour-body img {
    width: 100%;
    
    }



    #block-blockaboutusfooter .field--name-field-tipbloq-aboutus-ftr h2 {
        text-align: start;
    }

    #block-blocktoursfooter .field--name-field-tipbloq-tours-ftr h2 {
        text-align: start;
    }

    .view-view-slider-about-us .views-field-title h1 {
        font-size: 2em;
    }

    .view-view-tax-blog > .view-content {
        grid-template-columns: 1fr;
    }

    .page-node-type-blog-page {
        #contenedor {
            grid-template-columns: 1fr;
            width: 90%;
        }
    }

    .view-view-blog-recient {
        .view-content {
            grid-template-columns: 1fr;
        }
    }
  .page-node-type-tour-page .view-view-slider-tour .views-field-field-pgtour-short-gallery .slider-module {
    height: auto;
  }

  .page-node-type-tour-page .view-view-slider-tour .views-field-field-pgtour-short-gallery .thumbnail img {
    height: 100px;
  }

  /*
 * Estilos para Dispositivos Móviles y Tabletas Pequeñas
 * Se aplican cuando el ancho de la pantalla es de 768px o menos.
 */

    .days-summary {
        padding-bottom: 15px; /* Reducir el espacio inferior */
    }

    /* Ajustar la línea vertical para pantallas más pequeñas */
    .days-summary:before {
        left: 1.5rem; /* Mover la línea más a la izquierda */
        border-left: 0px; /* Tu color y estilo de línea */
    }


    .days-summary .day-header {
        flex-direction: none;  /*Apilar el número del día y el título */
        /*align-items: flex-start;  Alinear a la izquierda */
        margin-bottom: 10px;
        padding-left: 1.5rem; /* Empujar el contenido a la derecha de la línea */
    }

    .days-summary h4 {
        margin-left: 10px; /* Quitar el margen izquierdo cuando está apilado */
        margin-top: 0px; /* Espacio encima del título cuando está apilado */
        font-size: 15px; /* Reducir un poco el tamaño de fuente del título */
        text-align: start; /* Centrar el título si lo deseas */
        width: 100%; /* Asegurar que ocupe todo el ancho */
    }

    .days-summary .day-highlights {
        padding-left: 1.5rem; /* Reducir el padding para que no sea tan extremo */
        margin-top: 0.5rem;
    }

    .days-summary .day-number {
        width: 4rem; /* Reducir el tamaño del círculo */
        height: 4rem; /* Reducir el tamaño del círculo */
        font-size: 12px; /* Reducir tamaño de fuente del "Día" */
        margin-left: 0; /* Eliminar el margen izquierdo si lo tuviera */
        margin-right: auto; /* Centrar si está solo o empujar a la izquierda */
    }

    .days-summary .day-number span {
        font-size: 18px; /* Reducir tamaño de fuente del número */
    }


/*
 * Estilos para Dispositivos Móviles muy pequeños (ej. anchos menores a 480px)
 * Puedes añadir otra media query para ajustes aún más finos.
 */

    /*---------------- template ck editor-----------*/
.template-2-columns-row {
  display: block; /* Utiliza Flexbox para el diseño de columnas */
  justify-content: space-between; /* Espacia las columnas */
  }

  /* themes/custom/cuscotours/css/ckeditor-only.css */

/* --- Estilos para resaltar el template de 2 columnas en el CKEditor --- */

/* Resaltar el contenedor principal de las columnas */
.ck-editor__editable_inline .template-2-columns-row {
  position: relative;
  border: 1px dashed #d6d6d6 !important; /* Borde punteado para el contenedor de la fila */
  padding: 15px !important; /* Espacio interno para que el borde no se pegue al contenido */
  min-height: 150px; /* Altura mínima para que sea visible si está vacío */
  background-color: rgba(255, 255, 0, 0.03); /* Fondo muy sutil */
  /* Para móvil, las columnas se apilan verticalmente */
  display: block !important; /* Asegura que el contenedor se comporte como un bloque */
  box-sizing: border-box; /* Incluye padding y borde en el tamaño */
}

/* Marca para la columna izquierda */
.ck-editor__editable_inline .template-2-columns-row .column-left {
  position: relative;
  border: 1px dashed #ccc !important; /* Borde punteado para la columna izquierda */
  background-color: rgba(255, 255, 0, 0.05); /* Fondo sutil para la columna */
  min-height: 100px; /* Asegura visibilidad */
  padding: 10px !important; /* Padding para el contenido de la columna */
  margin-bottom: 20px !important; /* Espacio entre columnas apiladas en móvil */
  box-sizing: border-box; /* Incluye padding y borde en el tamaño */
}

/* Etiqueta flotante para la columna izquierda */
.ck-editor__editable_inline .template-2-columns-row .column-left::before {
  content: "Columna Izquierda"; /* Texto de la etiqueta */
  position: absolute;
  top: 5px;
  left: 5px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 5px;
  font-size: 0.7em;
  border-radius: 3px;
  z-index: 10;
  pointer-events: none;
}

/* Marca para la columna derecha */
.ck-editor__editable_inline .template-2-columns-row .column-right {
  position: relative;
  border: 1px dashed #ccc !important; /* Borde punteado para la columna derecha */
  background-color: rgba(255, 255, 0, 0.05); /* Fondo sutil para la columna */
  min-height: 100px; /* Asegura visibilidad */
  padding: 10px !important; /* Padding para el contenido de la columna */
  box-sizing: border-box; /* Incluye padding y borde en el tamaño */
}

/* Etiqueta flotante para la columna derecha */
.ck-editor__editable_inline .template-2-columns-row .column-right::before {
  content: "Columna Derecha"; /* Texto de la etiqueta */
  position: absolute;
  top: 5px;
  left: 5px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 5px;
  font-size: 0.7em;
  border-radius: 3px;
  z-index: 10;
  pointer-events: none;
}

/* Asegurar que las imágenes o elementos grandes dentro de las columnas no se desborden */
.ck-editor__editable_inline .template-2-columns-row img,
.ck-editor__editable_inline .template-2-columns-row video,
.ck-editor__editable_inline .template-2-columns-row iframe {
  max-width: 100% !important;
  height: auto !important;
}

/* Resetea márgenes y paddings por si el editor los aplica de forma inesperada dentro de las columnas */
.ck-editor__editable_inline .template-2-columns-row p,
.ck-editor__editable_inline .template-2-columns-row ul,
.ck-editor__editable_inline .template-2-columns-row ol,
.ck-editor__editable_inline .template-2-columns-row li {
  margin: 0 !important;
  padding: 0 !important;
}


/*---------------------------------*/
.tbm-nav, [dir='ltr'] .tbm-nav {
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
}

div#block-cuscotours-content {
    img {
    width: 100%;
    /*display: none*/   
    }
}

.page-node-type-about-us-page #contenedor {
    display: block;
    width: 85%;
    margin: auto;
}
.page-node-type-about-us-page #contenido {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    
}

.page-node-type-about-us-page #sidebar_right {
    padding: 0;
    border-left: none;
    width: 100%;
    
}

form#webform-submission-libro-de-reclamaciones-add-form {
    width: 85%;
    padding: 30px 10px;
}

#block-cuscotours-blockdetailsagen {
    width: 90%;
    margin: 0 auto;
}

.field--name-field-pgtour-short-gallerytours {
         .field__item a.colorbox.cboxElement img.image-style-large {
        width: 100px !important;
        height: 100px;
        
        }
}


.path-node.page-node-type-tour-page #block-cuscotours-content .entity-ref-tab-formatter-tabs.ui-tabs.ui-corner-all.ui-widget.ui-widget-content {
    
    ul.ui-tabs-nav.ui-corner-all.ui-helper-reset.ui-helper-clearfix.ui-widget-header {
               display: flex;
           }
    }

div#block-cuscotours-bloquefacebook {
display: none;
}

li.ui-tabs-tab.ui-corner-top.ui-state-default.ui-tab {
    width: 145px;
}

.view-view-tax-cat-tours > .view-content {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
}

}
@media (max-width: 480px) {
    .days-summary:before {
        left: 0px; /* Mover la línea aún más a la izquierda */
    }

    .days-summary .day-header {
        padding-left: 0;
    }

    .days-summary .day-highlights {
        padding-left: 1rem;
    }

    .days-summary .day-number {
        width: 3.5rem;
        height: 3.5rem;
        font-size: 11px;
    }

    .days-summary .day-number span {
        font-size: 16px;
    }

    .ui-tabs .ui-tabs-panel {
    padding: 1em 1em !important;
    background: none;
    }
    div#block-cuscotours-content article.contextual-region.node.node--type-tour-page.node--view-mode-full {
    .ui-tabs .ui-tabs-panel {
        line-height: 1.5;
        text-align: justify;
        font-size: 0.9em;
    }
    }

    .page-node-type-tour-page #contenido {
    background-color: white;
    padding: 20px 10px;
    }
    .clearfix.text-formatted.field.field--name-field-tipparg-tabtour-body.field--type-text-long.field--label-hidden.field__item ul {
    padding: 15px 0 0 15px !important;
    }

    form#webform-submission-custom-your-trip-add-form {
    width: 85%;
    margin: auto;
    box-shadow: 0 0 10px #626262;
    padding: 30px 10px;

    }

    .path-node.page-node-type-tour-page #block-cuscotours-content .field--name-field-pgtour-map-otras-img {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 30px;
    
        .field__item {
            width: 100%;
            margin: auto;
            display: flex;
            justify-content: center;
            img {
                width: 100%;
                height: auto;
                object-fit: cover;
            }
            }
    

}

}