@font-face {
    font-family: 'Aleo';
    src: url("Aleo-Regular.otf") format('truetype');
    font-style: normal;

}

@font-face {
    font-family: 'RedHatText';
    src: url("RedHatText-Regular.otf") format('truetype');
    font-style: normal;
 
}

@font-face {
    font-family: 'RedHatText-Medium';
    src: url("RedHatText-Medium.otf") format('truetype');
    font-style: normal; 
}


:root {
--btn: #181C47;
--background-sombra: #fff7f1;
--h1-titulo: #181C47;
--actividades-titulo:#003153;
--hr:#181C47;
--background-info: #181C47;
--background-museo: #fff;
--background-timeline: #181C47;
--btn-plus: var(--h1-titulo);
--bg-footer:#181c47;
--bg-menu:#303030; 
--bg-emergente:#ffff ;	
--btn--edita:#6C2523;
}

.oblig{
    color: #181C47;
}
.form-group{
    padding-bottom: 20px;
}

h1{ 
color: var(--h1-titulo);
font-family: 'Aleo';
}

h2,h3{
    font-family: 'Aleo';
    color: #303030;
}

p{
    font-family: 'RedHatText';
}

a{
    text-decoration: none;
}

strong{
    font-family: 'RedHatText-Medium';
}

a[href^="https://"], article a[href^="http://"]{
    word-wrap: break-word;
        color: var(--btn);
}

thead{
   background-color: var(--background-timeline); 
   color: white;
}

.btn-guardar{
    background-color: var(--background-timeline);
    font-size: 20px;
    font-weight: bold;
    border-radius: 5px;
    color: white;
    
}

.btn-editar{
    background-color: var(--btn--edita);
    color: white;
    font-size: 20px;
    font-weight: bold;
    border-radius: 5px;
}
.btn-editar:hover{
    border-color: var(--btn--edita);
}

.btn-eliminar{
    background-color: red;
    color: white;
    font-size: 20px;
    font-weight: bold;
    border-radius: 5px;
}
.btn-eliminar:hover{
    background-color: red;
    font-size: 20px;
    font-weight: bold;
    border-radius: 5px;
}

.modal-backdrop {
    --bs-backdrop-zindex: 0!important;
}
.se-social{
    height: 25vh;
    background-size: cover;
    background-position-y: center;
}
.login {
display: flex;
flex-direction: column;
width: 300px;
height: 400px;
background-color: rgb(255, 255, 255, 0.3);
color: var(--accent);
position: absolute;
padding: 10px 30px;
margin-top: 50px;
backdrop-filter: blur(10px);
border: 2px solid rgb(255, 255, 255, 0.3);
border-radius: 16px;
text-align: center;
}

.login  input {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
margin: 10px 0;
height: 40px;
width: 296px;
border: none;
border-bottom: 1px solid var(--hr);
background-color: transparent;
outline: none;
}

.login .btn-entrar {
background: var(--btn-plus);
color: #EEEEEE;
text-decoration: none;
padding: 12px 0;
margin: 20px 0 10px 0;
text-align: center;
border-radius: 30px;
transition: 0.4s;
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 20px;
cursor: pointer;
}

.login .btn-entrar:hover {
transform: translatey(2px);
box-shadow: none;
}

.circle {
    /*linear-gradient(90deg, rgba(135,28,10,1) 0%, rgba(160,59,5,1) 35%, rgba(250,237,220,1) 100%)*/
position: absolute; 
top: 50%;
left: 50%;
background: var(--h1-titulo);;
border-radius: 50%;
z-index: -1;
width: 100px;
height: 100px; 
transform: translate(-250px, -200px);
}

.circle-1 {
position: absolute;
top: 50%;
left: 50%;
background: var(--h1-titulo);;
width: 250px;
height: 250px; 
border-radius: 50%;
transform: translate(100px, 50px);
z-index: -1;
}

.circle-2 {
position: absolute;
top: 50%;
left: 50%;
background: var(--h1-titulo);;
width: 150px;
height: 150px; 
border-radius: 50%;
transform: translate(-250px, 50px);
z-index: -1;
}

.titulo-modal{
    color: var(--h1-titulo);
    text-align: center;
}

..btn-close{
    color: #303030!important;
}
.modal {
  position:fixed;
  display:table;
  height:100%;
  width:100%; 
  top:0;
  left:0;
  transform:scale(0);
  z-index:20;
}
  .one {
    transform:scaleY(.01) scaleX(0);
    animation:unfoldIn 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
    .modal-dialog  {
      .modal-content {
		  background:var(--bg-emergente);
        transform:scale(0);
        animation: zoomIn .5s .8s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
      }
    }
 }
.out {
      transform:scale(1);
      animation:unfoldOut 1s .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
      .modal-dialog  {
        .modal-content {
			background:var(--bg-emergente);
          animation: zoomOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
        }
      }
    }



@keyframes unfoldIn {
  0% {
    transform:scaleY(.005) scaleX(0);
  }
  50% {
    transform:scaleY(.005) scaleX(1);
  }
  100% {
    transform:scaleY(1) scaleX(1);
  }
}

@keyframes unfoldOut {
  0% {
    transform:scaleY(1) scaleX(1);
  }
  50% {
    transform:scaleY(.005) scaleX(1);
  }
  100% {
    transform:scaleY(.005) scaleX(0);
  }
}

@keyframes zoomIn {
  0% {
    transform:scale(0);
  }
  100% {
    transform:scale(1);
  }
}

@keyframes zoomOut {
  0% {
    transform:scale(1);
  }
  100% {
    transform:scale(0);
  }
}

.text-right{
    text-align: right;
}

.text-justify{
    text-align: justify;
}

.img-responsive{
    width: 100%;
}

.bg-museo{
    background-color:var(--background-museo);
}

.sidenav {

height: 100%;
width: 0;
position: fixed;
z-index: 200;
top: 0;
left: 0;
background-color: var(--bg-menu);
overflow-x: hidden;
transition: 0.5s;
padding-top: 100px;
}

.sidenav a, .dropdown-btn {
    font-family: 'Aleo';
padding: 8px 8px 8px 16px;
text-decoration: none;
font-size: 20px;
color: #fff;
display: block;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
}


.dropdown-btn:hover, .me:hover{
background-color: #82898F;
}

.dropdown-container a:hover{
border:2px #181C47 solid;
}

.active {
background-color: #55565a;
color: white;
}

.dropdown-container {
display: none;
background-color: #FFFFFF;
/*padding-left: 8px;*/

 a{
    color: #181C47;
    font-family: 'Aleo';
 }
}

.fa-caret-down, .fa-external-link {
float: right;
padding-right: 8px;
}

@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

.sidenav .closebtn {
    position: absolute;
    top: -12px;
    left: 250px;
    font-size: 36px;
    margin-left: 50px;
    height: 60px;
}

.open {
color: #fff;
display: block;
height: 60px;
line-height: 65px;
text-align: center;
width: 60px;
position: fixed;
z-index: 2;
padding: 1px;
background-color: #303030;
/*top:60px;*/
}

.home {
    .fa{
      color: var(--btn);  
    }

display: block;
height: 60px;
line-height: 65px;
text-align: center;
width: 60px;
position: fixed;
z-index: 1;
padding: 1px;  
background-color: #fff;
top:60px;
} 

footer {
background-color: var(--bg-footer);
color: #ffffff;
padding: 50px;
font-family: 'Slabo 27px', serif;
    position: relative;
}

.slider{
height: 100vh;
position: relative;
overflow: hidden;
}

.slide{
background-size: cover; background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.5s ease;
/*background-attachment: fixed;*/
}

.current{
opacity: 1;
}

.slide .content{
position: absolute;
bottom: 5%;
left: -100%;
background: rgba(255, 255, 255, 0.6);
padding: 10px 25px;
width: 40%;
line-height: 1.6;
font-size: 14px;
border-radius: 5px;
opacity: 0;
transition: all 0.7s ease-in-out 0.3s;
}

.slide .current .content{
opacity: 1;
/* transform: translateX(100%);*/
left: 0;
}

.content h1{
margin-bottom: 5px;
}

.buttons{
position: absolute;
top: 50%;
left: 0;
right: 0;
}

.next-btn,.prev-btn{
width: 50px;
height: 50px;
border-radius: 50%;
border:2px solid #F1F1F1;
color: #F1F1F1;
font-size: 20px;
cursor: pointer;
background: transparent;
}

.next-btn{
position: absolute;
right: 15px;
}

.prev-btn{
position: absolute;
left: 15px;
}

.next-btn:hover, .prev-btn:hover{
background: #F1F1F1;
color: black;
}
.padding_top{
padding-top: 80px;
}
.margin_top{
margin-top: 80px;
}
.margin_bottom{
margin-bottom: 80px;
}
.padding_bottom{
padding-bottom: 80px;
}
.padding-titulo{
padding-top: 50px;
}
.titulo_contenido{
display: flex;
flex-direction: row;
border-bottom: 2px solid var(--hr);
margin-bottom: 20px;
}
.titulo-principal h1{
font-size: 51.5465px;
}
.titulo_contenido .titulo-principal{
width: 80%;
}
.titulo_contenido .href-more{
width: 40%;
text-align: right;
align-content: center;
}
.titulo_contenido .href-more a, .href-more {
text-decoration: none;
color: black;
}
.href-more:hover{
color: #2d2d2d;
cursor: pointer;
} 
.href-more{
color: #303030;
} 

.mini-desc{
display: flex;
flex-direction: row;
margin: 20px;
}
.mini-desc .img-act{
width: 100%;
}

.mini-desc .act_desc{
width: 50%;
align-content: center;
}
.mini-desc .mini-img{
width: 30%;
}
.mini-desc .mini-btn{
width: 20%;
text-align: right;
align-content: center;
}
.btn-plus{
background-color: var(--btn);
color: #fff;
font-size:14pt;
border-radius: 10px;
}
.btn-plus:hover{
background-color: var(--btn-plus);
color: #fff;
}

.hr-info{
    color: #303030;
}

.churubusco{
    
    .left-img{ 
       float: left;
        width: 10%;
               
    }
    .right-img{ 
       float: right;
        width: 10%;
    }
}


.info-visitor{    
    background-color: var(--background-info);
    align-content: center;
    .left-img{ 
       background-repeat: repeat-y;background-size: 132px;background-position: left;
    }
    .right-img{ 
        background-repeat: repeat-y;background-size: 132px;background-position: right;
    }
        .box{
            display: flex;
            flex-wrap: wrap;        
        .left-box{
            color: #303030;
            background-color: #fff;
            width: 100%;
           .info-div{
             padding: 50px 380px 50px 380px;
           }

            .iconos i, .iconos a {
                color: var(--h1-titulo);
                font-size: 26pt;
            }

            .iconos {
                word-spacing: 26pt;
            }

            .aqui{
               font-style: italic;
            }
            .titulo-inicio h1{
                text-align: center;
                border-bottom: 2px #181c47 solid;
            }
        }
        .right-box{
            width: 100%;
             color: #ffffff;
            .info-desc{
                padding: 50px 380px 50px 380px;
                
                h1, h3, p, small{
                    color: #f9f9f9;
                }
                & h3{
                padding-top: 20px;
                }
                    
            }

            .titulo-inicio h1{
                text-align: center;
                border-bottom: 2px #ffffff solid;
                }
            }
            .aqui_{
               font-style: italic;
               color: #ffffff;
               cursor:pointer;
            }           
           
        }
    
} 

.elmuseo{
background-color: #f9f9f9;
align-content: center;
    .box{
        display: flex;
        flex-direction: row;
         .left-box{
            width: 60%;
            margin-right: 0px;
            background-color: var(--background-museo);
        }
         .right-box{
            width: 40%;
            & img{
                width: 100%;
            }
        }
    }
     .elmuseo-desc{
        width: 70%;
        text-wrap: pretty;
        position: relative;
        margin-top: 100px;
        margin-left: 100px;    
        & p{
            font-size: 14pt;
        }
    }
}

.btn-more{
border: 3px solid var(--btn);
color: var(--btn);
border-radius: 20px;
} 

.btn-more:hover{
border: 3px solid var(--btn);
border-radius: 20px;
}

.act-titulo{
color: var(--actividades-titulo);
}

.desc-modal h1{
    text-align: center;
    border-bottom: 2px var(--hr) solid;
}

.bg-time-line{
    background-color: var(--background-museo);
    .time-line-container{
        text-align: -webkit-center;
        text-align: -moz-center;
     
    }
    .time-line{
    
        width: 90%;
        background-color: var(--background-timeline);
        align-content: center;

        .time-line-content{
            text-align: center;
            align-content: center;
            height: 70vh;
            .desc{
                margin-top: 30px;
            }
            
            & h2{
                    line-height: 1;
                }
            .time-line-img{
                border-radius: 20px;               
            } 
            .big-img{
                height: 50%;
				width: 176px;
            }
            .lit-img{
                height: 350px;
            }
            & img{
                transform: scale(var(--escala, 1));
                transition: transform 0.25s;
                 object-fit: cover;
            }
            & img:hover{
            --escala: 1.1;
            cursor:pointer;
            }
        } 
    }

}

.prepara{
    background-color: var(--background-museo);
    .left-img{ 
       background-repeat: repeat-y;background-size: 124px;background-position: left;
    }
    .right-img{ 
        background-repeat: repeat-y;background-size: 124px;background-position: right;
    }
    .contendor-prepara{
        padding: 0px 380px 0px 380px;
    }
}

summary {
  color: var(--h1-titulo);
  font-family: 'Aleo';
  font-weight: bold;
  font-size: 31.5465px;
  padding: 1rem;
  margin-bottom: 1rem;
  outline: none;
  text-align: left;
  cursor: pointer;
  position: relative;
}
details[open] summary ~ * {
  animation: sweep .5s ease-in-out;
}
@keyframes sweep {
  0%    {opacity: 0; margin-top: -10px}
  100%  {opacity: 1; margin-top: 0px}
}
details > summary::after {
  position: absolute;
  content: "+";
  right: 20px;
}
details[open] > summary::after {
  position: absolute;
  content: "-";
  right: 20px;
}
details > summary::-webkit-details-marker {
  display: none;
}

#what-we-do .card{
-webkit-transition: .5s all ease;
-moz-transition: .5s all ease;
transition: .5s all ease;
background: #fff;
border: 2px #181C47 solid;
}
#what-we-do .card:hover{
-webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
-moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
}   
#what-we-do .card:hover .card-block:before{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);  
-webkit-transition: .5s all ease;
-moz-transition: .5s all ease;
transition: .5s all ease;
}
.own{
padding: 10px;
}
.card .card-block{
padding: 1.25rem;

}
.card .card-block h3{
font-size:1.6vw; 
color: var(--h1-titulo);
}

.card .card-block h4{
font-size:1vw; 
}

.card .card-text{
    font-size: 1.2vw;
}

.asociacion{
    background-color: var(--background-museo);
    .img-asoc-amigos{
        position: absolute;
        width: 90%;
        -webkit-box-shadow: 14px -15px 0px -1px rgba(86,33,11,1);
        -moz-box-shadow: 14px -15px 0px -1px rgba(86,33,11,1);
        box-shadow: 14px -15px 0px -1px rgba(86,33,11,1);
    }
}

.asociacion .box{
    display: flex;
    flex-direction: row;
    .left-box{
        width: 60%;
    }
    .right-box{
        width: 40%;
        position: relative;
        align-content: center;
    }
}

.amigos .box{
    display: flex;
    flex-direction: row;
    .left-box{
        width: 40%;
    }
    .right-box{
        width: 60%;
        position: relative;
        align-content: center;
        padding-left: 50px;
    }
}

.directorio{
    background-color: var(--background-museo);
    .left-img{ 
       background-repeat: repeat-y;background-size: 124px;background-position: left;
    }
    .right-img{ 
        background-repeat: repeat-y;background-size: 124px;background-position: right;
    }
    .contenido-directorio{
        padding: 0px 380px 0px 380px;
    }
}
.social{
    background-color: var(--background-museo);
    .left-img{ 
       background-repeat: repeat-y;background-size: 124px;background-position: left;
    }
    .right-img{ 
        background-repeat: repeat-y;background-size: 124px;background-position: right;
    }
    .contenido-social{
        padding: 0px 380px 0px 380px;
    }
    .social-box{
        display: flex;
        flex-direction: row;
        padding-bottom: 50px;
        .social-intro{
            width: 70%;
            padding: 50px;
            & h1{
                font-weight: bold;
            }
        }
        .social-img{
            width:30%;
            text-align: center;
           
            & img{
                width: 100%;
            }
        }
    }
}

.piezas{
    .box{
        display: flex;
        flex-direction: row;
        padding-bottom: 80px;
        .left-box{
                width: 50%;
            }
        .right-box{
            width: 50%;
            position: relative;
            text-align: center;
            & img{
                width: 70%;
            }
        }
    }
}

.piezas_detalle{
    .box{
        display: flex;
            flex-wrap: wrap;
        padding-bottom: 80px;
        .left-box{
                width: 100%;
            .desc-pieza-detalle {
                background-color: var(--background-timeline);
                padding: 20px 30px 20px 30px;
                border-radius:30px;
                & p{
                    text-align: left;
                    color: #ffffff;
                }
            }
        }
    }
}

.indice-piezas, .indice-before{       
    .box{     
    display: grid;  
    grid-template-columns: repeat(4, 1fr);
        .item-box{
            max-width: 100%;
                padding-right: calc(var(--bs-gutter-x)* .5);
                padding-left: calc(var(--bs-gutter-x)* .5);
                margin-top: var(--bs-gutter-y);
            overflow: hidden;
            position: relative;
 
                & img{
                    width: 100%;
                    height:  270px;
                    position: relative;
                    top: 0;
                    left: 0;
                } 

                & h3{
                    color: var(--h1-titulo);
                }
            }
        }
}

.actividades{
    .contenido-actividades{
        padding: 0px 380px 0px 380px; 
        .box{
        display: flex;
        flex-direction: row;
        padding: 20px;
            .left-box{
                width:60%;
                align-content: center;
                 & h2{
                    color: var(--h1-titulo);
                    font-weight: bold;
                }
            }
            .right-box{
                width: 40%;
                position: relative;
                align-content: center;

            }
        }
    }     
}

.indice-videos{
        display: flex; 
        flex-direction: row;
        padding-left: 100px;
        .left-box{
            width:50%;
            padding-right: 20px;
        }
        .right-box{
            width:50%;
        }
        
        .contenedor-videos{
            padding-bottom: 30px;
            width: 80%;
        }
}

.biblioteca{
    background-color: var(--background-museo);
    .left-img{ 
       background-repeat: repeat-y;background-size: 124px;background-position: left;
    }
    .right-img{ 
        background-repeat: repeat-y;background-size: 124px;background-position: right;
    }
    .contenido-biblioteca{
        padding: 0px 400px 0px 400px;
    }
    .box{
        display: flex;
        flex-direction: row;
        padding-bottom: 20px;
        .left-box{
            height: fit-content;
            width: 50%;
            height:auto;
        }
        .right-box{
            height: fit-content;
            background-color: var(--background-museo);
            width: 50%;
            height:auto;
            align-content: center;
            .desc{
                padding: 10px;
            }
        }
    }
}

.visitas{
    .contenido-visitas{
        padding: 0px 400px 0px 400px;
    }
        & h3{
            color: var(--h1-titulo);
            margin-top: 20px;
            font-weight: bold;
        }
}

.breviario{
    .box{
        display: flex;
        flex-direction: row;
        padding-bottom: 20px;
        .caja{
            width: 33.33%;
       
            padding-right: 30px;
            padding-left: 30px;
            margin-bottom: 40px;
            & h1{
                font-size: 22pt;
                border-bottom: 2px solid var(--hr);
                padding-bottom: 20px;
                height: 100px;
            }
         
            & img{
                width: 100%;
                padding-top: 20px;
                padding-bottom: 20px;
                 transform: scale(var(--escala, 1));
                transition: transform 0.25s;
            }

            & img:hover{
                --escala: 1.1;
                cursor: pointer;
            }
        }
    }
}

.breviario_detalle{
    .img-detalle{
        width: 70%;
    }
}

.ex-perm{
    transform: translateZ(-1px) scale(2.03);
}

.tradicionales{
    
    .box{
        display: flex;
        flex-direction: row;
        .left-box{
            width: 65%;
             & img{
                width: 100%;
                height: 586px;
            }
           
        }
        .right-box{
            width: 30%;
             & img{
                width: 100%;
                height: 278px;
            }
        }
        .img-min{
            padding-bottom: 30px;
        }

    }

    .box-sec{
        display: flex;
        flex-direction: row;
        .item-box{
            width: 33.3333%;
            padding-right: 30px;
             & img{
                width: 100%;
                height: 278px;
            }
           
        }
        .img-min{
            padding-bottom: 30px;
        }

    }
}

main {
display: block;
overflow-x: hidden;
/*max-height: 100%;*/
perspective: 1px;
perspective-origine: center top;
scroll-behavior: smooth;
}

.s-text{
margin-bottom: 70px;	
height: auto;
width: 100%;
/*padding-top: 50px;*/
}
.s-img {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}

.bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.strong-down {
position: absolute;
width: 100%;
height: 0;
left: 48%;
bottom: 100px;
z-index: 1;   
}

/*.s-text strong{
position: absolute;
width: 100%;
height: 0;
left: 48%;
z-index: 1;
}*/

div.s-down{
position: absolute;
width: 0;
height: 0;
left: 50%;
z-index: 1;
    margin-top: 10px;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 55px solid var(--btn);
background: transparent;
/*animation: move-medusa 1s infinite linear alternate;*/
}

div.down{
position: absolute;
width: 0;
height: 0;
left: 50%;
bottom: 20px;
z-index: 1;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 55px solid var(--btn);
background: transparent;
animation: move-medusa 1s infinite linear alternate;
}

  @keyframes move-medusa {
    0%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(30px);
    } 
}

  .video-background-holder {
    position: relative;
    background-color: #181C47;
    height: calc(100vh - 0px);
    min-height: 25rem;
    width: 100%;
    overflow: hidden;
}

.video-background-holder video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}


@media(max-width:991px){
    .container, p{
        text-align: justify;
    }
    .se-social{
        height: 26vh;
    background-size: cover;
    }
    .slide .content{
    width: 100%;
    bottom: -15%;
    left: 0;
    }

    .slide .current .content{
    opacity: 1;
    transform:  translateY(15%);
    left: 0;
    bottom: 0%;
    }

    /***********/
    .card{
        .card-block h3{
            font-size: 6.6vw;
        }
        .card-block h4 {
            font-size: 5vw;
        }
        .card-text{
            font-size: 5vw;
        }
    }

    .video-background-holder {
        height: 0px;
        & strong{
            color: white;
        }
        & video{
            width: 100%;
        }
    }

    .info-visitor{
        .box{
        display: flex;
        flex-direction: column;
            .left-box{
                width: 100%;
                .info-div{
                   padding: 30px; 
                }
                
            }
            .right-box{
               width: 100%;
               .info-desc{
                padding: 30px;
               }
               
            }
            .left-img, .right-img{
               background-size: 20px; 
            }
        }
    }

    .modal-background {
        .modal {
            width: 100%;
        }
    }

    .titulo_contenido .titulo-principal {
        padding-top: 20px;
        width: 100%;
        text-align: center;
        & h1{
            font-size: 28px;
        }
    }

    .titulo_contenido {
        display: flex;
        flex-direction: column;
    }
    .titulo_contenido .href-more {
        width: 100%;
    }

    .elmuseo{
        .box{
            display: flex;
            flex-direction: column; 
             .left-box{
                width: 100%;
                padding: 30px;
            }
             .right-box{
                width: 100%;
               
            } 
            .elmuseo-desc {
                width: 100%; 
                text-wrap: pretty;
                position: relative;
                margin-top: 10px;
                margin-left:10px;
               
            }
        }
          
    }

    .social{
        .contenido-social{
            padding: 30px;
        }
         .left-img, .right-img{
           background-size: 20px; 
        }
        .social-box{
        display: flex;
        flex-direction: column;
        padding-bottom: 80px;   
            .social-intro{
                width: 100%;
                align-content: center;
                padding: 0px;
                & h1{
                    font-weight: bold;
                }
            }
            .social-img {
                width: 100%;
            }
        }
    }        

    .indice-videos{
        display: flex; 
        flex-direction: column;
        padding-left: 0px;
        .contenedor-videos{
            padding-bottom: 10px;
            width: 100%;
        }
        .left-box{
            width:100%;
            padding-right: 0px;
        }
        .right-box{
            width:100%;
        }
    
    }    

    .actividades{

        & .contenido-actividades {
            padding: 20px;
            .box {
                flex-direction: column;

                .left-box, .right-box {
                    width: 100%;
                    align-content: center;
                }
            }
        }
    }

    .piezas{
        .box{
            display: flex;
            flex-direction: column-reverse;
            padding-bottom: 80px;
            .left-box{
                    width: 100%;
                }
            .right-box{
                width: 100%;
                position: relative;
                text-align: center;
                & img{
                    padding-top: 20px;
                    width: 100%;
                }
            }
        }
    }

    .piezas_detalle{
        .box{
            display: flex;
            flex-direction: column;
            padding-bottom: 80px;
            .left-box{
                    width: 100%;
            }
            .right-box{
                width: 100%;
            }
        }
    }

    .indice-piezas{       
        .box{       
            .item-box{
                width: 100%;
                padding-right: 0px;
                margin-bottom: 20px;
                .ovrly {
                    width: 100%
                }
            }
        }
    }

    footer {
        padding: 20px;
    }

    .indice-piezas, .indice-before{       
    .box{     
    display: flex;  
    flex-direction: column;
        .item-box{
            width: 100%;
            padding-left: 0px;
            padding-right: 0px;
 
          
           
        }
    }
}

    .padding-titulo{
    padding-top: 0px;
    }

    .directorio {   
        .left-img, .right-img {
            background-size: 20px;
        }  
        .contenido-directorio {
        padding: 20px;
        }  

    }

    .prepara{        
        .left-img, .right-img {
            background-size: 20px;
        }  
        .contendor-prepara {
            padding: 20px;
        } 
    }
    .visitas {
        .contenido-visitas {
            padding: 20px;
        }
    }

    .biblioteca{     
        .box{
            flex-direction: column;
            .left-box, .right-box{
                width: 100%;
            }
        }

        .left-img, .right-img {
            background-size: 20px;
        }  
        .contenido-biblioteca {
            padding: 20px;
        }
        
    }
}



@media (min-width: 200px) and (max-width: 1300px) {
    .directorio { 
        .card .card-block h3 {
            font-size: 18pt;
        }
        .card .card-block h4 {
            font-size: 14pt;
        }
        .card{
            margin-left: 20px;
        }
    }
    .churubusco{
        .left-img, .right-img{
            transform: translateY(90px);
        }
    }
    .info-visitor {
        & .box {
            & .left-box {
                .info-div {
                    padding: 50px 50px 50px 50px;
                } 
            }
            & .right-box { 
                .info-desc { 
                padding: 50px 50px 50px 50px;
                }
            }
        }
    }
   
        .asoc {
       
            .box { 
            padding: 50px 50px 50px 50px;
            display: flex;
            flex-direction: column;
            .left-box, .right-box{
                width: 100%;
                }
            }
        }

        .amigos .box {
            .right-box {
                width: 100%;
                padding-left: 0px;
            }
            .left-box {
                width: 100%;
                padding-left: 0px;
            }
        }
        .marge .desc{
            padding: 10px 50px 10px 50px;
        }
        .cuad{
                display: flex;
            flex-direction: column!important;
            .left-cuad, .right-cuad{
                width: 100%!important;
            }
        }
 }

@media (min-width: 1100px) and (max-width: 1400px) {
    .directorio { 
        .card .card-block h3 {
            font-size: 1.2vw;
        }
        .card .card-block h4 {
            font-size: 0.8vw;
        }
    }
    .churubusco{
        .left-img, .right-img{
            transform: translateY(40px);
        }
    }

    .info-visitor {
        & .box {
            & .left-box {
                .info-div {
                    padding: 50px 135px 50px 135px;
                }
            }
            & .right-box {
                .info-desc {
                padding: 50px 135px 50px 135px;
                }
            }
        }
    }

    .info-visitor {
        .left-img {
            background-size: 109px;
        }
        .right-img {
            background-size: 109px;
        }
    }
 }


@media (min-width: 1401px) and (max-width: 1600px) {
    .directorio { 
        .card .card-block h3 {
            font-size: 1.2vw;
        }
        .card .card-block h4 {
            font-size: 0.8vw;
        }
    }
    .churubusco{
        .left-img, .right-img{
            transform: translateY(50px);
        }
    }

    .info-visitor {
        .left-img {
            background-size: 129px;
        }
        .right-img {
            background-size: 129px;
        }
    }
 }

@media (min-width: 1601px) and (max-width: 1999px) {
 

    .info-visitor {
        .left-img {
            background-size: 124px;
        }
        .right-img {
            background-size: 124px;
        }
    }
 }