.titulo_principal{
    font-size: 40px;
    text-align: center;
}
.titulo_secundario{
    text-align: center;
    font-size: 35px;
    color: #000000;
}
body::-webkit-scrollbar{
    background:#8a8a8a;
    width: 8px;
    border-radius: 7px;
    opacity: 0.1;
    }
body::-webkit-scrollbar-thumb{
    background:#D8D8D8 ;
    width: 7px;
    border-radius: 7px;
    }
body{
    font-family: sans-serif;
    margin: 0px;
    overflow-x:hidden;
}




#bg-video {
    position: fixed;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    min-width: 100%;
    min-height: 100%;
    transform: translateX(-50%) translateY(-50%);
    z-index: -100;
    background-image: url(../img/tm-astro-bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
header{
    display: flex;
    min-height: 70px;
    justify-content: space-between;
    align-items: center ;
    padding: 10px;
    margin-right: 50px;

}
nav a{
    text-decoration: none;
    font-size: 21px;
    color: black;
    margin-left: 60px;


}
nav a:hover {
    color: rgb(176, 176, 176);
}
.logo{
    display: flex;
    margin-right: 30px;
    
}

.section_uno{
    float: left;
    width: 65%;
    height: 800px;
    color: #7209b7;
    border-radius: 5px;
    box-shadow: 1px 0 4px rgb(0, 0, 0, .2);
    margin-bottom: 15px;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.5)
}
.section_dos{
    float: right;
    width: 30%;
    height: 800px;
    color: #7209b7;
    border-radius: 5px;
    box-shadow: 1px 0 4px rgb(0, 0, 0, .2);
    margin-bottom: 15px;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.5)
}
.section_tres{
    float: left;
    width: 98.35%;
    color: #7209b7;
    border-radius: 5px;
    box-shadow: 1px 0 4px rgb(0, 0, 0, .2);
    margin-bottom: 15px;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.5)
}
.section_cuatro{
    float: left;
    width: 98.35%;
    color: #7209b7;
    border-radius: 5px;
    box-shadow: 1px 0 4px rgb(0, 0, 0, .2);
    margin-bottom: 15px;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.5)
}
.section_cinco{
     float: left;
    width: 98.35%;
    color: #7209b7;
    border-radius: 5px;
    box-shadow: 1px 0 4px rgb(0, 0, 0, .2);
    margin-bottom: 15px;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.5)
}
.marco_iframe{
    width: 100%;
    height: 710px;
    /*border: 1px solid rgb(0, 0, 0);*/
    border: none;
}
.texto_cuento{
    text-align: justify;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
}
.imagenes{
    width: 100%;
    border-style: none;
}

/*CLASES FICHA TECNICA*/
.articulo_ficha{
    width: 100%;
    float: right;
}
.titulo_ficha{
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
}
.aside_ficha{
    float: right;
    width: 30%;
    padding:5px;
    margin: 5px;
    font-style: italic;
    color: #000000;
    box-shadow: inset 5px 0px 5px -5px #000000;
}
.lista_ficha{
    list-style-type: none;
    float: left;
    overflow: hidden;
    margin: 0;
    padding: 0;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    padding: 10px;
}







/*Pantalla de carga*/


 #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; }
   #loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #3498db; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ z-index: 2001; }
   #loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent;
    border-top-color: #e74c3c; /* Chrome, Opera 15+, Safari 5+ */
   animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ }
   #loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent;
border-top-color: #f9c922; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ }
@keyframes spin {
    0%   {  /* Chrome, Opera 15+, Safari 3.1+ */  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {  /* Chrome, Opera 15+, Safari 3.1+ */  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}

#loader-wrapper .loader-section { position: fixed; top: 0; width: 51%; height: 100%; background: #222222; z-index: 2000;  /* Chrome, Opera 15+, Safari 3.1+ */  /* IE 9 */ transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */}

#loader-wrapper .loader-section.section-left { left: 0; }

#loader-wrapper .loader-section.section-right { right: 0; }

/* Loaded */
.loaded #loader-wrapper .loader-section.section-left {  /* Chrome, Opera 15+, Safari 3.1+ */  /* IE 9 */
    transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */  
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loader-wrapper .loader-section.section-right {  /* Chrome, Opera 15+, Safari 3.1+ */  /* IE 9 */
    transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */  
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loader {
    opacity: 0;  
    transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
    visibility: hidden;  /* Chrome, Opera 15+, Safari 3.1+ */  /* IE 9 */
    transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */  
    transition: all 0.3s 1s ease-out;
}
/* JavaScript Turned Off */
.no-js #loader-wrapper { display: none; }
/*============ Preloader ends ==================================*/