html {
	width: 100%;
	height: 100%;
}

body {
	font-family: "Open Sans", sans-serif;
	background-image: url("../img/bg.jpg");
	background-repeat: no-repeat;
	background-position: center;
/*	background-size: ;*/
/*	backdrop-filter: saturate(180%) blur(20px);*/

}

*, *:before, *:after {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

@media screen and (max-width: 454px) {
	.fuera {
		padding: 64px 16px 16px 16px;
	}
	.item-grid {
        grid-template-columns: 1fr;
    }
    .content-b {
    	width: 100%;
    }
}

a {
	text-decoration: none;
}

.main-container {
/*	background-color: red;*/
	padding-top: 30px;
	display: flex; /* Usamos flexbox en el contenedor */
  	justify-content: center; /* Centra horizontalmente el contenido */
  	align-items: center; /* Centra verticalmente el contenido */
  	flex-direction: column;
}

.inner-c {
/*	background-color: limegreen;*/
	max-width: 576px;


/*BODER RADIUS*/
    border-radius: 10px 10px 0px 0px;
    -webkit-border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    -ms-border-radius: 10px 10px 0px 0px;
    -o-border-radius: 10px 10px 0px 0px;

/*SHADOW*/
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}

.main-h{
	padding: 30px;
/*	background-color: red;*/
	display: flex; /* Usamos flexbox en el contenedor */
 	justify-content: center; /* Centra horizontalmente el contenido */
	align-items: center; /* Centra verticalmente el contenido */
	flex-direction: column;

	background-color: rgba(0, 0, 0, 0.5) !important;
    -webkit-background-color: rgba(0, 0, 0, 0.5) !important;
    -o-background-color: rgba(0, 0, 0, 0.5) !important;
    -ms-background-color: rgba(0, 0, 0, 0.5) !important;
    -moz-background-color: rgba(0, 0, 0, 0.5) !important;

    backdrop-filter: saturate(180%) blur(15px);
    -o-backdrop-filter: saturate(180%) blur(15px);
    -webkit-backdrop-filter: saturate(180%) blur(15px);
    -ms-backdrop-filter: saturate(180%) blur(15px);
    -moz-backdrop-filter: saturate(180%) blur(15px);

    border-radius: 10px 10px 0px 0px;
    -webkit-border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    -ms-border-radius: 10px 10px 0px 0px;
    -o-border-radius: 10px 10px 0px 0px;

}

.profile-pic {
	width: 96px;
	-webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%; 
}

.user-h {
	font-weight: 600; 
	color: #fff; 
	padding-top: 15px;
	padding-bottom: 15px;
}

.description {
	font-weight: 500;
	line-height: 1.5;
	color: #fff;
	text-align: center;
}






/*COSO BLANCO DEL AREA DE BOTONES*/
.content-b {
	background-color: #fff !important;
	width: 100%;
	max-width: 100%;
	padding: 10px;
	margin: 0 auto;
	border-radius: 0px 0px 10px 10px;
	-webkit-border-radius: 0px 0px 10px 10px;
	-moz-border-radius: 0px 0px 10px 10px;
	-ms-border-radius: 0px 0px 10px 10px;
	-o-border-radius: 0px 0px 10px 10px;
	box-sizing: border-box;
}

.item-grid {
	display: flex; /* Utiliza flexbox para flexibilidad */
    width: 90%; /* Ocupa el 80% del ancho de content-b */
    height: 66px;
    margin: 20px auto; /* Centra item-grid horizontalmente */
    border: 1px solid #ccc; /* Borde para visualizar el elemento */
  	padding: 10px; /* Ajusta el espaciado interior según necesites */
    transition: 0.3s;
    box-sizing: border-box;
    border-radius: 50px;
}

.item-grid:hover {
	display: flex; /* Utiliza flexbox para flexibilidad */
    width: 90%; /* Ocupa el 80% del ancho de content-b */
    height: 66px;
    margin: 20px auto; /* Centra item-grid horizontalmente */
    border: 1px solid #ccc; /* Borde para visualizar el elemento */
  	padding: 10px; /* Ajusta el espaciado interior según necesites */
    transition: 0.3s;
    box-sizing: border-box;
    border-radius: 50px;
    background-color: rgb(0, 0, 0, 0.05);
}

.item-pic {
	width: 15%; /* Ocupa el 20% del ancho de item-grid */
    box-sizing: border-box; /* Asegura que el padding no aumente el tamaño total */
    text-align: center; /* Centra el texto horizontalmente */
    display: flex; /* Utiliza flexbox para alinear verticalmente */
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
/*    background-color: blue;*/
}

.item-pic img {
	object-fit: cover;
	width: 46px;
	height: 46px;
	-webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.it1-desc {
	width:calc(100%);
    box-sizing: border-box; /* Asegura que el padding no aumente el tamaño total */
	color: #000000 !important;
/*	background-color: red;*/
	font-weight: 600;
	text-align: center; /* Centra el texto horizontalmente */
    display: flex; /* Utiliza flexbox para alinear verticalmente */
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
}








.extra-links-c {
	display: flex; /* Utiliza flexbox en el contenedor */
  	justify-content: center; /* Centra los elementos horizontalmente */
  	align-items: center; /* Centra los elementos verticalmente */
	width: 100%;
	margin-top: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
/*	background-color: blue;*/
}

.extra-links-c i {
	text-align: center;
	color: #fff !important;
	font-size: 24px;

}

.extra-links-c i:hover {
	text-align: center;
	color: transparent !important;
	font-size: 24px;

}

.a33a {
	place-items: center;
	text-align: center;
	padding: 10px; /* Espaciado interior */
	margin: 5px; /* Margen entre los elementos (opcional) */
	transition: background-color 0.3s, color 0.3s; /* Transición suave para hover */
}

.a33a i:hover {
	text-align: center;
	color: transparent;
	background-image: linear-gradient(45deg, rgba(85,210,245,1) 0%, rgba(82,9,121,1) 42%, rgba(255,0,155,1) 100%);
	font-size: 24px;
	background-clip: text;
	text-fill-color: transparent;
	transition: background-color 0.3s, color 0.3s; /* Transición suave para hover */
}