.cuadrado{
    height: 100px;
    width: 70%;
    background-color: black;
}




/**/

body {
    background-color: #0a141d;
}

/* 
#0a141d   header
#1d215f   contenedor
#0a141d   footer
*/

@font-face {
    src: url(Fuentes/StartingPoint.otf);
    font-family: 'StartingPoint';
}
.StartingPoint {font-family: 'StartingPoint'}

@font-face {
    src: url(Fuentes/comic.ttf);
    font-family: 'comic';
}
.comic {font-family: 'comic'}

@font-face {
    src: url(Fuentes/comicbd.ttf);
    font-family: 'comicbd';
}
.comicbd {font-family: 'comicbd'}

@font-face {
    src: url(Fuentes/arial.ttf);
    font-family: 'arial';
}
.arial {font-family: 'arial'}

@font-face {
    src: url(Fuentes/ARLRDBD.TTF);
    font-family: 'arialredonda';
}
.arialredonda {font-family: 'arialredonda'}

@font-face {
    src: url(Fuentes/georgia.ttf);
    font-family: 'georgia';
}
.georgia {font-family: 'georgia'}

@font-face {
    src: url(Fuentes/georgiabd.ttf);
    font-family: 'georgiabd';
}
.georgiabd {font-family: 'georgiabd'}

@font-face {
    src: url(Fuentes/verdana.ttf);
    font-family: 'verdana';
}
.verdana {font-family: 'verdana'}

@font-face {
    src: url(Fuentes/verdanabd.ttf);
    font-family: 'verdanabd';
}
.verdanabd {font-family: 'verdanabd'}

@font-face {
    src: url(Fuentes/ARLRDBD.TTF);
    font-family: 'ARLRDBD';
}
.ARLRDBD {font-family: 'ARLRDBD'}





*{
    margin: 0px;
}


a{
    text-decoration:none;
}



/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   HEADER  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.menu_bar {
	display:none;
}

header {
	width: 100%;
}

header nav {
	background:#0a141d;
	z-index:1000;
    width: 100%;
    /* width:95%; */
	/* max-width: 1000px; */
	/* margin:20px auto; */
}

header nav ul {
	list-style:none;
    padding:0px;
}

header nav ul li {
	display:inline-block;
	position: relative;
}

header nav ul li:hover {
	background:#0d385e;
}

header nav ul li a {
	color:#fff;
	display:block;
	text-decoration:none;
    height: 20px;
	padding: 20px;
}

header nav ul li a span {
	margin-right:10px;
}

header nav ul li:hover .children {
	display:block;
}

header nav ul li .children {
	display: none;
	background:#182129;
	position: absolute;
	width: 150%;
	z-index:1000;
}

header nav ul li .children li {
	display:block;
	overflow: hidden;
	border-bottom: 1px solid rgba(255,255,255,.5);
}

header nav ul li .children li a {
	display: block;
}

header nav ul li .children li a span {
	float: right;
	position: relative;
	top:3px;
	margin-right:0;
	margin-left:10px;
}

header nav ul li .caret {
	position: relative;
	top:3px;
	margin-left:10px;
	margin-right:0px;
}

header ul .logo-inicial-pc{
    background-image: url("Imágenes/Logos/Logo-General-Header-PC3.png");
    height: 50px;
    width: 200px;
    float: left;
    margin-right: 40px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 50px;
}


@media screen and (max-width: 800px) {
	body {
		padding-top:80px;
	}

	.menu_bar {
		display:block;
		width:100%;
		position: fixed;
		top:0;
		background:#0a141d;
	}

	.menu_bar .bt-menu {
        height: 90px;
		display: block;
		/* padding: 20px; */
		color: rgb(255, 255, 255);
		overflow: hidden;
		font-size: 25px;
		font-weight: bold;
		text-decoration: none;
        display: grid;
        grid-template-columns: 1fr auto;
	}

    .menu_bar .bt-menu .logo-inicial-celular{
        background-image: url("Imágenes/Logos/Logo-General-Header-Celular.png");
        width: 254px;
        margin-left: 30px;
        margin-right: 60px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

	.menu_bar span {
		/* float: right; */
		font-size: 40px;
        align-self: center;
        padding-right: 20px;
	}

	header nav {
		width: 55%;
		height: calc(100% - 90px);
        bottom: 0px;
		position: fixed;
		right:100%;
		margin: 0;
		
        background-color: #0d273b;
	}

	header nav ul li {
		display: block;
		border-bottom:1px solid rgba(255,255,255,.5);
	}

	header nav ul li a {
		display: block;
	}

	header nav ul li:hover .children {
		display: none;
	}

	header nav ul li .children {
		width: 100%;
		position: relative;
	}

	header nav ul li .children li a {
		margin-left:20px;
	}

    header ul .logo-inicial-pc{
        display: none;
    }

    header nav ul li .caret{
        display: none;
    }
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   HEADER  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
















/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   CONTENEDORES   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

/* .CONTENEDOR-GRANDE{
    height: 100%;
    width: 100%;
    background-color: #ff0b9a;
} */


div#contenedor{
    background-color: #1d215f; 
    /*#1d215f*/ /*rgb(224, 224, 224)*/
    width: 100%;
    margin:0px;
    min-width: 360px;
    min-height: calc(100vh - 245px);  
}
div#contenedorinterno{
    max-width: 100%;
    max-width: 1200px;
    
    margin: 0px auto;
    /* background-color:blueviolet; */

    /* display: flex;
    justify-content: center; */

    display: grid;
    grid-template-columns: auto;
}
/* div#contenedor .box-imagen{
    border: rgb(203, 218, 0) solid 10px;
    width:min-content;  
}
div#contenedor .box-imagen img{
    width: 600px;
} */

/* .box-separadora-comienzo{
    width: 100%;
    height: 64px;
    background-color: rgb(32, 255, 2);
} */
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   CONTENEDORES   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/


/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   CUERPO   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/


/*!!!!!!!!!!!!!!!!  GRILLA  !!!!!!!!!!!!!!!!!!!!*/

.Grilla{
    width: 100%;
    display: grid;
    grid-template-columns: 50% 50%;  
    gap: 20px;  
    /* margin-top: 30px; */
    margin-bottom: 30px;
    margin-left: 1.5%;
    padding-top: 64px;
    margin-right: 0px;
}

.Grilla figure .CUADROS{
    
    height: 200px;
    width: 90%;
    border-radius: 25px;
    /* background-color: black; */
    border: white solid 3px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin:0px;
    /* margin-top: 50px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;  */
}

.Grilla .Box{
    height: auto;
    /* width: 65%; */
    width: auto;
    padding: 5px;
    
    border-radius: 20px;
    background-color: rgba(86, 29, 139, 0.63);
    /* text-align: center; */
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
}
.Grilla .Box H1{
    color: black;
    font-family: georgiabd;
    font-size: 25px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 5px;
    margin-right: 5px;
    
}
.Grilla .Box p{
    color: black;
    font-family: georgia;
    margin-top: 15px;
    margin-left: 5px;
    font-size: 15px;
    display: none;     /*         por esto no se ven los textos de la grilla          */
}

/* ////////   RESPONSIVE    /////////// */
@media screen and (max-width: 800px){
    .Grilla {
        width: auto;
        grid-template-columns: 1fr;
        margin-left: 8%;
    }
    
}






/*          EJEMPLO DE IMAGEN RESPONSIVE             */
/* .Grilla .box1{
    grid-column: 1 / span 3;

    background-image: url(Imágenes/Cerro.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 95%;
    height: 192px;
}
@media screen and (max-width: 1920px){
    .Grilla .box1{
        
        background-size: cover;
        background-repeat: no-repeat;
        width: 95%;
        height: 192px;
    }
} */




/*!!!!!!!!!!!!!!!!  GRILLA  !!!!!!!!!!!!!!!!!!!!*/

/*!!!!!!!!!!!!!!!!  FORMULARIO  !!!!!!!!!!!!!!!!!!!!*/



.Titulo-Form h2{
    color: white;
    font-family: verdanabd;
    font-size: 20px; 
    margin-left: 10px; 
    margin-bottom: 30px;
    margin-top: 30px;
}
form{
    width:max-content;
    margin-left: 10px;
    margin-bottom: 20px;
    font-size: 17px;
    color: white;
    font-family: verdana; 
    background: #242a88;
    /*background: linear-gradient(to right, rgb(22, 90, 146) 0%, rgb(55, 142, 214) 35%, rgb(73, 161, 233) 80%);*/
}
form .Datos{
    background-color: #7eaed4;
}
form .Boton-Enviar{
    background-color: rgb(72, 202, 72); 
    font-size: 18px;
}
form .Boton-Borrar{
    background-color: rgb(233, 106, 106); 
    font-size: 18px;
}


/*!!!!!!!!!!!!!!!!  FORMULARIO  !!!!!!!!!!!!!!!!!!!!*/


/*!!!!!!!!!!!!!!!!  SOBRE NOSOTROS  !!!!!!!!!!!!!!!!!!!!*/


.Box-Sobre-Nosotros{
    min-height: 200px;
    width: 70%;
    /* background-color: rgba(206, 54, 54, 0.637); */
    margin-top: 10px;
    margin-bottom: 60px;
}
.Titulos-Sobre_Nosotros h2{
    font-family: 'Times New Roman', Times, serif;
    font-size: 40px;
    color: rgb(241, 188, 188);
}
.Linea-Separadora-Sobre-Nosotros{
    width: 100%;
    height: 2px;
    background-color: rgb(99, 99, 99);
    margin-top: 10px;
    margin-bottom: 30px;
}
.Box-Sobre-Nosotros .Cuerpos-Sobre-Nosotros p{
    font-family: arialredonda;
    font-size: 20px;
    color: rgb(172, 171, 171);
    /* margin-bottom: 70px; */
}
.Box-Sobre-Nosotros .Cuerpos-Sobre-Nosotros p b{
    font-family: arialredonda;
    font-style:italic;
    font-size: 20px;
    color: rgb(172, 171, 171);
    /* margin-bottom: 70px; */
}
.Box-Sobre-Nosotros .Cuerpos-Sobre-Nosotros h4{
    font-family: 'Times New Roman', Times, serif;
    font-size: 30px;
    color: rgb(241, 188, 188);
}
.Box-Sobre-Nosotros .Cuerpos-Sobre-Nosotros a{
    text-decoration: none;
    color: rgb(180, 123, 123);
}
.Box-Sobre-Nosotros .Cuerpos-Sobre-Nosotros input{
    background-color: cyan;
    width: 200px;
}





/*!!!!!!!!!!!!!!!!  SOBRE NOSOTROS  !!!!!!!!!!!!!!!!!!!!*/




/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   CUERPO   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/


/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!      FOOTER     !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

footer{
    background-color: #0a0a1d;
    width: 100%;
    /*clear:both;
    margin-bottom: 0px;
    display: flex;
    justify-content: center, space-around; */
}

.footer .grupo-1{
    width: 100%;
    max-width: 1200px;
    
    
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 50px;
    padding-top: 45px;
    padding-bottom: 20px;
    
}

.footer .grupo-1 .box figure{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.footer .grupo-1 .box figure img{
    width: 250px;
}

.footer .grupo-1 .box h2{
    color: white;
    margin-bottom: 20px;
    font-size: 20px;
}



.footer .grupo-1 .sobre-nosotros a{
    display: inline-block;
    text-decoration: none;
    
    line-height: 25px;
    color: rgb(216, 216, 216);
    
    margin-bottom: 5px;
    
   
    transition: all 300ms ease;
    display: flex;
    flex-direction: column;

}


.footer .grupo-1 .red-social a{
    display: inline-block;
    text-decoration: none;
    width: 45px;
    height: 45px;
    line-height: 45px;
    color: white;
    margin-right: 10px;
    background-color: #0d2033;
    text-align: center;
    transition: all 300ms ease;
}

.footer .grupo-1 .red-social a:hover{
    background-color: #16385a;
    color: #3a8eaf;
}


/* !!  GRUPO 2 (COPY) !! */

.footer .grupo-2{
    /* background-color: #0a1a2a; */
    padding: 15px 10px;
    text-align: center;
    color: white;
}

.footer .grupo-2 small{
    font-size: 15px;
}

@media screen and (max-width:800px) {
    .footer .grupo-1{
        width: 90%;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 30px;
        padding-top: 35px;
    }
}






/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!      FOOTER     !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
 



/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   BARRA DE SCROLL   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/


body::-webkit-scrollbar{
    width: 15px;
}
body::-webkit-scrollbar-thumb{
    background: linear-gradient(to right, rgb(18, 10, 39) 0%, rgb(68, 37, 139) 75%);
    border-radius: 10px;
}
body::-webkit-scrollbar-thumb:hover{
    box-shadow: 0px 0px 3px 2px rgba(255, 255, 255, 0.74)
    inset;
}
body::-webkit-scrollbar-thumb:active{
    box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.418)
    inset;
}
body::-webkit-scrollbar-track{
    background-color: rgb(16, 4, 24); 
}



/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   BARRA DE SCROLL   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/