@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

:root {
	--padding-container: 100px 0;
	--color-title: #001A49;
/*	--show: block;*/
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box; 
}
body {
	width: 100%;
	min-height: 100lvh;
	overflow-x: hidden;
	font-family: "Poppins", sans-serif;
}

h1,h2,h3,h4,h5,h6 {
	margin: 0;
	padding: 10px;
	text-align: center;
}

a {
	text-decoration: none;
}

a:hover {
	color: rgba(30, 30, 30, 0.8);
}

.container {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	overflow: hidden;
	/* scrollbar-width: none; */
	/* padding: var(--padding-container); */
}

.cajacookies {
	display: none;
	background-color:#000;
	color:#fff;
	position:fixed;
	bottom:50px;
	bottom:0px;
	width:100%;
	padding:10px 20px;
	font-size:18px;
	opacity:0.9;
	z-index: 6000;
}

.botonRGPD {
	display: none;
	position: relative;
	cursor: pointer;
}

.cajacookies a{color:#fff;}
.cajacookies a:hover{color:#ccc;}
.cajacookies p, 
.cajacookies div{display:inline-block; font-size: 0.6rem;}
.cajacookies p{width:85%;}
.cajacookies div{color: #303030;width:auto;padding:10px;border:1px solid #000;background-color:#ccc;text-align:center;position:absolute;top:10px;}
.cajacookies div:hover{background-color:#c2c2c2;cursor:pointer;}

.botonRGPD:hover {
	color: #30303090;
}

.cook {
	width: 90%;
	text-align: center;
	margin: 0 auto;
	justify-content: center;
	object-position: center;
}

/*BODY-MAIN*/
.navbar {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	background-color: #1b1b1b;
	color: white;
}

.navbar-brand {
	color: #fff;
	text-decoration: none;
}

.navbar-toggler {
	display: none;
}

.nav {
  	display: flex;
  	/*  	--padding-container: 0;*/
  	padding: 0.7em 0;
  	width: 90%;
  	height: 100%;
  	display: flex;
  	align-items: center;
  	position: relative;
  	justify-content: space-between;
  	color: white;
}




.navbar-nav {
	display: grid;
	margin-left: auto;
	padding: 0;
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	gap: 2em;
	color: white;
	/* align-items: center; */
}

.off-header {
	display: none;
}

/*.logo-cont2, .gitlogo, .logo2 {
	display: none;
}*/

.nav-item {
	/* align-items: end; */
	list-style: none;
	/* margin-bottom: 1.5em; */
}

.nav-link {
	color: #eee;
	text-decoration: none;
	border-bottom: solid 0 #ffffff00;
}

.nav-link:hover:not(.active) {
	border-bottom: solid 1px #ffffff80;
	transition: all 3s;
}

.nav-link.active {
	box-shadow: 2px 2px 4px #ffffff60;
	padding: .1em .4em;
}

.demoPage-main {/*	background: radial-gradient(ellipse at bottom, #05021e, transparent),
/*            radial-gradient(ellipse at top, #ffffff, transparent);*/margin: 0;padding: 10px 0;/* align-items: center; */justify-items: center;}

.main-1 {
	display: grid;
	margin-top: 15px;
	width: 100%;
	grid-template-columns: 1fr auto;
	gap: 0.3em;
	justify-content: space-around;
	/*	 border: 1px solid brown; */
}

.main-2 h1, .hdownload {
	color: #1b1b1b;
	margin-bottom: 5px;
	font-size: 1.3rem;
	font-weight: 900;
	/*	filter: drop-shadow(1px 1px 2px #cccc);*/
}

.main-2 {
	display: block;
	width: 100%;
	margin: auto;
	/*	border: 1px solid black;*/
}

.carousel {
	position: relative;
	width: 100%;
	margin: auto;
	align-items: center;
/*	border: 1px solid yellow;*/
}

.carousel-inner {
	position: relative;
	margin: 0 auto;
	/*	padding: 10px;*/
	width: 90%;
	height: 400px;
	/* border-radius: 1em; */
	/*	border: 1px solid black;*/
}

.carousel-item {
	position: absolute;
	width: 100%;height: 100%;
	text-align: center;
} 

.carousel-item img {
	display: block;
	position: absolute;
	background-size: 100% 100%;
	object-position: center;
	object-fit: fill;
	margin: 0;
	/*	align-items: center;	*/
	width: 100%;
	height: 100%;
	border-radius: 10px;
	padding: 10px 20px;
	filter: drop-shadow(10px 18px 3px #0000336c);
	/*	border: 1px solid black;*/
}

.carousel-caption {
	position: absolute;
	font-size: 1.2rem;
	color: #000111;
	background-color: #ffffff0c;
	width: 100%;
	height: fit-content;
/*	border: 1px solid brown;*/
	backdrop-filter: blur(10px);
	bottom: 0;
	filter: drop-shadow(2px 2px #000111);
	/*margin: 0 auto;
	justify-self: center;
	text-align: center;*/
}

.carousel-caption h2 {
	color: #fff;
}

.carousel-caption p {
	font-size: 1.1rem;
	padding: 0 .8em;
	font-weight: 800;
	width: 80%;
	text-align: center;
	margin: 0 auto;
	color: #ffffff;
/*	filter: drop-shadow(2px 2px #000111);*/
}

.carousel-indicators {
	display: flex;
	position: absolute;
	width: 100%;
	
	/* border: 1px solid black; */
	justify-content: center;
	gap: .4em;
/*	z-index: 3000;*/
/*	bottom: 0;*/
}
.carousel-indicators button {
/*	color: yellow;*/
	cursor: pointer;
	border: 2px solid #303030;
	min-width: 70px;
	z-index: 4000;
	filter: drop-shadow(2px 2px 4px #0000ff8c);
}

.others {
	display: flex;
	position: relative;
	flex-direction: column;
	justify-content: space-evenly;
	/*	place-content: rigth;*/
	max-width: 350px;
	height: auto;
	grid-area: 1 / 2 / span 2;
	gap: 1em;
	margin: 0 auto;
/*	border: 1px solid darkred; */
}

.notice {
	display: block;
	position: relative;
	/*	background-color: rgba(250, 250, 250, 0.4);*/
	width: 100%;
	height: auto;
	overflow: auto;
	text-align: justify;
	padding: 1em;
}

/*.notice h3 {
	font-size: clamp(25px, 5vw, 33px);
	font-weight: 700;
}*/

.botones {
	display: flex;
	position: relative;
	width: 100%;
	justify-content: space-between;
}

.not-a, .not-b,
.not-c, .not-d {
	display: flex;
	position: sticky;
	width: 100%;
	height: auto;
	border-bottom: 2px solid #000111;
	opacity: 0.3;
	transition: all .5s ease-in-out;
}

.not-1 {
	color: #000111;
	font-size: .9rem;
	width: auto;
	height: auto;
	/* border: 1px solid black; */
	/* justify-content: space-between; */
	padding: 0 .4em;
	/*width: 100%;
	height: 100%;
*/
}

.not-1 a {
	text-decoration: none;
	color: #1b1b1b;
}

/*.not-1 span {
	width: 100%;
	height: 100%;
}
*/
.not-1 img {
/*	display: block;*/
	position: relative;
	flex:1;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	object-fit: cover;
}

.not-1 p {
	display: block;
	position: relative;
	width: auto;
	height: auto;
	bottom: 0;
	text-align: center;
	padding: .3em;
	backdrop-filter: blur(10px);
	/* place-content: end; */
}
/*.not-1 article {
	justify-content: center;
 	border: 1px solid darkred;
}*/

.not-1 h4 {
	font-size: clamp(10px, 5vw, 30px);
	font-weight: 900;
}

.cap {
	font-size: 1.1rem;
	font-weight: 900;
}

.not-img img {
	display: block;
	position: relative;
	cursor: pointer;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	border-radius: .4em;
	/* border-radius: 2%; */
}

.logo-cont {
	display: flex;
	position: relative;
	flex-direction: row;
	width: auto;
	height: auto;
	justify-content: flex-end;
}

.logo {
	background-image: url("../img/logochris1.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	object-fit: fill;
	width: 200px;
	height: 100px;
	border-radius: .3em;
	opacity: .6;
}

.otros-1 {
	background-color: rgba(250, 250, 250, .2);
	border-radius: 1%;
	padding: 1em;
	cursor: default;
}

.otros-1 ul {
	padding-left: 0;
	list-style: none;
	gap: 1em;
}

.otros-1 ul li {
	margin: .7em;
}

.otros-1 p {
	text-align: center;
	font-size: .8rem;
	margin: 2px;
	width: 90%;
	margin: 1em;
	gap: 2em;
	margin: 0 auto;
}

.otros-1 p:hover {
	padding: 5px;
	color: white;
	background-color: rgba(0, 0, 0, 0.2);
	transition: .3s;
}

/*footer*/

.contact {
    display: flex;
    position: relative;
    flex-direction: column;
    text-align: right;
    background: #bbbb;
    width: 100%;
    height: auto;
    justify-content: space-between;
    margin: 0;
    box-sizing: border-box;
    padding: 5px;
}

.contact1 {
	display: flex;
	position: relative;
	flex-direction: column;
	width: auto;
	height: auto;
}

.contact1 ul {
	display: flex;
	position: relative;
	flex-direction: column;
	list-style: none;
	list-style-type: none;
	color: #ffff;
	margin-bottom: 0;
	font-size: 0.7rem;
	font-weight: 400;
	width: auto;
	height: 100%;
	gap: .6em;
	padding-left: 0;
}

.contact1 a {
    list-style: none;
    text-decoration-line: none;
    text-decoration: none;
    text-decoration-style: none;
    color: #ffff;
}

.contact1 a:hover {
	color: #bbbb;
	transition: .5s;
}


/*.bi-instagram {
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  	-webkit-background-clip: text;
 	background-clip: text;
  	-webkit-text-fill-color: transparent;
}
*/
/*.bi-facebook{
	color: #3b5998;
}*/

/*.bi-twitter{
	color: #1DA1F2;
}*/

.socialnav {
    display: block;
    position: relative;
    align-items: center;
    flex-direction: column;
    /* flex-wrap: wrap; */
    padding: 10px 1em 10px 1em;
    width: auto;
    height: auto;
    margin: 0 auto;
    padding: 1em;
    /* justify-content: space-around; */
}

.socialnav ul {
	display: flex;
	position: relative;
	flex-direction: row;
	justify-content: center;
	align-content: center;

	align-items: flex-end;
	gap: 1em;
	padding-left: 0;
	width: auto;

	/*object-position: center;
	place-content: center;
	place-items: center;*/
	/* top: 0; */
	/* right: 0; */
}

/*.socialnav li:first-child {
	margin-left: -20px;
}*/

.socialnav ul li {
	list-style: none;
	margin: 0 auto;
	object-position: center;
	place-content: center;
	place-items: center;
	place-self: center;
}

/*.socialnav ul li:hover {
	background-color: #ffffff8c;
	list-style: none;
}
*/
/*.socialnav ul li a {*/
	/* display: flex; */
	/* position: relative; */
	/* list-style: none; */
	/* text-decoration-line: none; */
	/* justify-content: center; */
	/* color: white; */
	/* text-align: center; */
	/* margin: 0 auto; */
	/* text-decoration: none; */
	/*	text-decoration-style: none;*/
/*}*/

/*.socialnav i {
 	display: flex;
 	position: relative;
}*/

.contact2 {
	position: relative;
	display: flex;
	flex-direction: column;
	text-align: right;
	background: #388E3C;
	align-content: space-between;
	justify-content: space-between;
	justify-items: space-between;
	margin: 0 auto;
	padding: 5px;
	width: 100%;
	bottom: 0;
	width: 100%;
}

/*contact page*/

#contacto-body {
	display: flex;
	position: relative;
	margin: 20px auto;
	justify-content: center;
}

.card {
	background-color: rgba(0, 0, 0, 0.3);
	width: 100%;
	height: auto;
}

.card-body {
	width: 100%;
	height: auto;
}

.form-control {
	display: flex;
	position: relative;
	justify-content: center;
}

.p-5 {
	background-color: rgba(0, 0, 0, 0.7);
	width: 100%;
	height: 400px;
	background-position: bottom;
	background-size: cover;
	align-content: center;
	align-items: center;
	justify-content: center;
	justify-items: center;
	margin: 2px auto;
	padding: 5px;
}

.cuerpo {
	display: grid;
	grid-template-columns: auto auto auto;
	column-count: 12;
	height: fit-content;
	margin: 0;

}

.cuerpo .row {
	width: 100%;
	height: fit-content;
	margin: 0;
}

.base a {
	color: white;
	text-decoration: none;
	font-weight: 700;
}

.form-control::placeholder {
	display: flex;
	position: absolute;
	color: rgba(0, 0, 0, 0.2);
	right: 5%;
	bottom: 2%;
	object-position: center;
	text-align: right;
}

.banner-demo {
	display: flex;
	position: relative;
	flex-direction: row;
	justify-content: space-evenly;
	width: 100%;
	height: fit-content;
	gap: 0.3em;
	padding: 1em;
	margin-top: 40px;
}

.banner-demo article {
	display: block;
	position: relative;
	width: auto;
	height: auto;
	max-width: 500px;
	height: 400px;
}

.banner-demo img {
	display: block;
	margin: 0 auto;
	width: 100%;
	height: 100%;
}

.contact {
	flex-direction: row;
	position: relative;
	background-color: #1b1b1b;
	width: 100%;
	height: 100%;
	justify-content: center;
}

.contact section {
	display: block;
	position: relative;
	justify-content: space-around;
	align-items: self-end;
	width: auto;
	height: 100%;
}

.contact1 ul li {
	color: white;
}

.contact1 ul li:hover{
	padding: 0.3em;
	color: #1b1b1b;
	box-shadow: 2px 2px 4px #ffffff1c;
	transition: box-shadow .5s;
	font-weight:600;
	border-radius: 2%;
}

/*DESCARGAS*/

.descargas {
	display: flex;
	position: relative;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0;
	justify-content: space-evenly;
	align-content: space-between;
	width: 100%;
	height: auto;
}

.descarga {
	display: block;
	position: relative;
	margin: 10px;
	text-align: center;
	text-decoration: none; 
 	position: relative;
}

.descarga p {
	font-size: .7rem;
}

.descarga img {
	margin: 10px auto;
	width: 90px;
	height: 90px;
}

.pokemon {
	display: flex;
/*	flex-direction: column;*/
/*	position: relative;*/
	justify-content: center;
/*	margin: 0 auto;*/
/*	border: 1px solid black;*/
}

.pokemon img {
	width: 90px;
	height: 180px;
}

.megalogo {
	display: flex;
	flex-direction: column;
	height: auto;
	/*object-position: center;
	align-content: center;
	place-content: center;
	padding: 0 auto;*/
/*	justify-content: center;*/
/*	border: 1px solid black;*/
}

.megalogo a {
	margin: 0 auto;
}

.descarga button {
	font-size: 0.6rem;
	font-weight: 700;
	padding: 1px;
	border: outset #000a998c;
}

.contenedor {
	display: grid;
	position: relative;
	margin: 0 auto;
}

button:hover {
/*	background-color: #000a998c;*/
/*	border: none;*/
/*	background-color: white;*/
	scale: 1.1;
	transition: 0.3s;
	cursor: pointer;
	padding: 0.1em;
	filter: drop-shadow(2px 2px 4px #0000ff8c);
/*border: black;*/
}

#previous {
	position: absolute;
/*	content: "";*/
	width: auto;
	height: fit-content;
	background-color: rgba(250, 250, 250, .7);
	top: 50%;
	border-radius: 5%;
	padding: 0 10px;
	margin: 10px;
	border: none;
	
}

#next {
	position: absolute;
/*	content: "";*/
	width: auto;
	height: fit-content;
	background-color: rgba(250, 250, 250, .7);
	top: 50%;
	right: 0;
	border-radius: 5%;
	padding: 0 10px;
	margin: 10px;
	border: none;
}

.visually-hidden i {
/*	border-width: 2em;*/
	color: #000111;
/*	font-size: 1.5em;*/
}

.canals {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 2% 15%;
	color: #1b1b1b;
}

.canals h6 {
	font-size: clamp(20px, 5vw, 33px);
	font-weight: 700;
/*	text-transform: uppercase;*/
	margin-bottom: 20px;
	border-bottom: 2px solid #303030;
	background-color: #ffffff20;
	backdrop-filter: blur(5px);
	border-radius: .2em;
}

.canals ul {
	text-align: justify;
	margin: 0 auto;
	text-decoration: none;
	list-style: none;
	padding-left: 0;
	width: 50%;
	/* color: black; */
}

.canals ul li {
	margin-bottom: 5%;
}

.canals ul li:hover {
	box-shadow:1px 1px 10px #30303040;
	padding: 2%;
	border-radius: 2%;
	transition: .5s;
}

.canals ul li > a {
	color: #1b1b1b;
	text-decoration: none;
	/* CONTAIN-INTRINSIC-BLOCK-SIZE: AUTO 100PX; */
} 

.gitlogo {
	display: none;
}

.container-pro {
	background-color: #1c1d2d;
	width: 100%;
	height: auto;
	margin: 0 auto;
}

.pro-row {
	display: flex;
	position: relative;
	flex-direction: row;
	justify-content: space-evenly;
}

.pro {
	display: flex;
	position: relative;
	flex-direction: column;
	color: #ffff;
	/* justify-content: space-between; */
	padding: 20px;
	/* text-align: center; */
}

.pro h6 {
	font-weight: 700;
}

.pro-link {
	color: #ffffff60;
	text-decoration: none;
	padding-left: 0;
}

.pro-list {
	color: #ffffff60;
	margin-top: 10px;
	font-size: 0.7rem;
	list-style: none;
	cursor: default;
	padding-left: 0;
	/* text-align: left; */
}

.pro-item:hover, 
.pro-link:hover {
	color: #ffffff20;
}

.pro-item {
	margin: 10px auto auto auto;
	text-align: center;
	/* padding-left: 0; */
	/* justify-content: center; */
}

.main-h1 {
	color: #303030;
	text-align: center;
	width: 100%;
	margin: 5px;
}

.primary {
	display: flex;
	position: relative;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: auto;
	height: auto;
	margin: 0 auto;
}

.primary-img {
	display: flex;
	position: relative;
	flex-direction: row;
	max-width: 60%;
	height: 400px;
	margin: 0;
	justify-content: center;
	opacity: 0.9;
	animation: move-izq-der 5s 1;
	animation-fill-mode: forwards;
	filter: drop-shadow(2px 2px 7px #303030);
}

@keyframes move-izq-der {
	from {
		transform: translateX(-400px);
	}
	to {
		transform: translateX(10px);
	}
}

.primary-img {
	align-items: center;
}

.primary-img img {
	background-size: auto;
	object-fit: cover;
	width: 150px;
	height: 200px;
	border-radius: 5%;
	opacity: 0.7;
}

.prim-caption {
	display: block;
	position: relative;
	max-width: 400px;
	padding: 3%;
}

.primary-h2 {
	color: #303030;
	text-align: center;
	width: 100%;
	font-size: 0.9rem;
	border-bottom: 2px solid #303030;
	margin-bottom: 15px;
}

.primary-p {
	font-size: 0.7rem;
	text-align: justify;
}

.social2 {
	flex-direction: row;
	margin-top: 40px;
	width: 100%;
	height: auto;
	justify-content: stretch;
}

.social-items2 {
	display: flex;
	position: relative;
	flex-direction: row;
	justify-content: space-evenly;
	padding-left: 0;
}

.social-item2 {
	display: flex;
	flex-direction: row;
	list-style: none;
	width: auto;
	height: auto;
}

.social-link {
	color: #303030;
	text-decoration: none;
	padding-left: 0;
}

.bi {
	color: #FFF;
	/* border: none; */
	/* border-block-width: thin; */
}

/*.bi-facebook {
	color: #3b5998;
}
*/
.bi-twitter-x:hover {
	color: #2b2b2b;
	background-color: #ffffff8c;
	padding: .2em;
	border-radius: .3em;
	transition: all .4s ease-in-out;
}

.bi-youtube {
	color: #c4302b;
}

.bi-instagram {
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.bi-instagram:hover { 
 	padding: .3em;
 	transition: all .4s ease-in-out;
}

.navbar-brand h1 {
	font-size: 1.1rem;
	font-weight: 900;
}

.descarga > img {
	width: 90;
	height: 90;
}

/*section INFLUENCERS PANAMEÑOS*/
.influencers {
	width: auto;
	height: auto;
	margin: 20px;

}

.influencers h6 {
	font-size: clamp(25px, 5vw, 33px);
	font-weight: 700;
	color: #1b1b1b;
	padding: 20px 40px 30px;
/*	filter: drop-shadow(1px 1px 2px #fff);*/
	background-color: #ffffff20;
	backdrop-filter: blur(5px);
	border-radius: .2em;
}

.influencers span {
	display: flex;
	position: relative;
	flex-flow: wrap row;
	width: 100%;
	height: auto;
	margin: 0 auto;
	justify-content: space-around;
	gap: .5em;
}

.influP__content {
	display: flex;
	width: auto;
	height: auto;
}

.gallery-wrapper {
	display: flex;
	cursor: pointer;
	max-width: 300px;
	height: 400px;
	filter: drop-shadow(1px 1px 15px #000011);
}

.gallery-item {
	position: relative;
	isolation: isolate;
	display: flex;
	flex: 1;
	max-width: 300px;
	height: 400px;
	opacity: 1;
/*	transition: none;*/
	overflow: hidden;
/*	transition: flex 0.5, opacity 0.25s;*/
	/* margin-bottom: 20px; */
	align-items: center;
}

.gallery-item:hover {
	opacity: 1;
	flex: 3;
	transition: flex 0.6s, opacity 0.3s;
}

.gallery-item:not(:hover) {
	opacity: 0.95;
	transition: flex 0.4s, opacity 0.30s;
}


.item-image {
	position: absolute;
	right: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
	/* filter: drop-shadow(1px 1px 15px #000011); */
}

.item-description {
	align-self: flex-end;
	color: #fff;
/*	border-radius:1em;*/
}

.item-description:not(:hover) {
	opacity: 0.95;
	transition: flex 0.4s, opacity 0.30s;
}

.item-description:hover {
	display: block;
}

.name {
	font-size: 27px;
	background: linear-gradient(90deg,#303030,#0003);
	padding-inline: 10px;
	transform: translateY(-10px);
}

.name p {
	font-size: 1.0rem;
	padding: .4em;
}

.name a, .role a {
	text-decoration: none;
	color: white;
}

.name a:not(:hover), .role a:not(:hover) {
	background-color: #f8f8ff20;
	padding: 3px;
}

.role {
	display: block;
	font-size: 0.7rem;
	background: linear-gradient(90deg,#303030,#0003);
	padding: 5px;
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
	transform: translateY(10px);
}

.name,
.role {
	opacity: 0;
	transition: opacity 0.25s, transform 0.3s;
	transition-delay: .35s;
}

.gallery-item:hover .name,
.gallery-item:hover .role {
	opacity: 1;
	transform: translateY(0);
}

.gallery-item:not(:hover) .name,
.gallery-item:not(:hover) .role {
	transition-delay: .2s;
}
/*section INFLUENCERS PANAMEÑOS*/

/*ADS*/
.ads {
	overflow-x: hidden;
}

#frameP {
	border: 1px solid black;
	width: 100%;
	/* scrollbar-width: none; */
}

.poldepriv {	
	font-size: 0.6rem;
	color: #303030;
	text-decoration: none;
}

/*.YouTube {
	display: none;
	position: fixed;
	right: 0;
	bottom: 0;
	width: auto; 
	height: auto;
	z-index: 5000;
	transition: all 4s ease-in-out;
}

.yy {
	display: flex;
	opacity: 0;
	transition: all .6s ease-in-out;
	animation: move-der-izq 5s 1;
}


@keyframes move-der-izq {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(0);
	}
}

.closeq {
	position: fixed;
	color: #ffffff00;
	bottom: 8.5em;
	justify-content: flex-end;
	right: 0;
	width: 50px;
	height: 50px;
	font-size: 2em;
	z-index: 6000;
	opacity: 0;
}

.closeq:hover {
	cursor: pointer;
	filter: drop-shadow(1px 1px 10px white);
}*/







.infoweb__container {
	color: #000011;
	margin: .1em auto;
}

.infoweb {
	display: block;
	position: relative;
	object-position: center;
	margin: 0 auto;
	place-content: center;
	/*	justify-content: center;*/
	gap: 1em;
	/*	border: 1px solid yellow;*/
	text-align: center;
}

.infoweb__section {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	justify-content: center;
}

.infoweb__container h4 {
	font-size: clamp(25px, 5vw, 42px);
	color: #1b1b1b;
	font-weight: 600;
	padding: 0 .5em;
/*	border: 1px solid black;*/
	/*	gap: 2em;*/
}

/*.infoweb__container p {
	margin-top:.4em;
	padding: 0 1em;
	font-size: clamp(10px, 5vw, 20px);
}*/

.infoweb__articles {
	color: #1b1b1b;
	width: 400px;
}

.infoweb__articles h5{
	width: 300px;
	color: #111;
	font-size: clamp(12px, 5vw, 25px);
	font-weight: 600;
/*	border: 1px solid yellow;*/
	margin: 0 auto;
}

.infoweb__articles a {
	text-decoration: none;
	color: #303030;
	cursor: pointer;
}

.infoweb__articles a:hover {
	filter: drop-shadow(1px 1px 10px #1c1c2b);
}

.infoweb__lists {
	text-align: center;
	list-style: none;
	padding-left: 0;
	color: #111;
	/*	gap: 2em;*/
	/*	text-align: center;*/
}

.infoweb__lists li {
	margin: .4em;
}
/*
.ok {
	text-align: center;
	width: 100%;
	padding: 12px;
	background-color: #1e6;
	color: #fff;
}

.bad {
	text-align: center;
	width: 100%;
	padding: 12px;
	background-color: #a22;
	color: #fff;
}*/

/*.comm_container {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	background-color: #202020;
	color: #FFF;
	justify-content: center;
	margin: 0 auto;
}

.commentarios {
	display: flex;
	position: relative;
	flex-wrap: wrap;
	text-align: justify;
	margin: 0.6em;
	font-size: 0.7rem;
	filter: drop-shadow(1px 1px 10px #FFFFFF9c);
}*/

#foto-soporte {
	object-fit: contain;
}

/*#instA {
	display: block;
	position: relative;
	background-image: url('../img/logosChrisWeb/inst.svg');
	width: 50px;
	height: 50px;
	margin:0 auto 12px;
}*/


/*BUILD PAGE*/
.items--buildpage {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	margin: 0 auto;
	gap: 2em;
	/*	border:1px solid black;*/
	justify-content: center;
	/*	place-content: center;*/
	/*	flex-wrap: wrap;*/
	margin: 4em auto;
}

.contenido__buildpage {
	position: relative;
	border-bottom: 1px solid #2b2b2b;
	width: 400px;
	min-height: 500px;
/*	border:1px solid black;*/
	padding: .5em;
}

.gallery-wrapper--buildpage {
	display: flex;
/*	position: absolute;*/
	flex-direction: row;
	width: auto;
	height: auto;
	margin: 0 auto;
/*	border: 1px solid black;*/
}

.gal-built {
	display: flex;
	position: absolute;
	flex-direction: column;
	justify-content: space-between;
	gap: 1em;
	place-items: center;
/*	border: 1px solid green;*/
}

.gal-built img {
	width: 200px;
	height: 200px;
	background-size: contain;
	object-fit: contain;
	border-radius: 10px;
}

.carousel-control-prev {
	display: block;
	position: absolute;
	top: 50%;
}

.carousel-control-next {
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
}

.title__buildpage {
	position: absolute;
	margin: 0 auto;
	bottom: 0;
/*	border: 1px solid green;*/
	width: 100%;
}
.anuncio--buildpage {
	display: grid; 
/*	flex-direction: column; */
/*	position: relative; */
	margin: 1em auto; 
	width: 100%; 
/*	border: 1px solid black; */
	justify-content: center;
}

.anuncio--buildpage article{
	margin: 0 auto;
}
/*BUILD PAGE*/
.socialnav {
    display: flex;
    position: relative;
    align-items: center;
/*    flex-direction: column;*/
    /* flex-wrap: wrap; */
/*    padding: 10px 1em;*/
    width: auto;
    height: auto;
/*    margin: 0 auto;*/
    padding-left: 0.5em;
/*    border: 1px solid white;*/
    text-align: left;
    /* justify-content: space-around; */
}

.socialnav ul {
    display: flex;
    position: relative;
    flex-direction: row;
/*    justify-content: center;*/
/*    align-content: flex-start;*/
    align-items: center;
    gap: 1em;
    padding-left: 0;
    width: auto;
    height: auto;
    text-align: left;
	color: #fff;
	font-size: .7rem;
/*	border: 1px solid white;*/
	 list-style: none;
    /* top: 0; */
    /* right: 0; */
}

/*.socialnav ul li {
    list-style: none;
    margin: 0 auto;*/

    /*object-position: center;
    place-content: center;
    place-items: center;
    place-self: center;*/
/*}*/

.logo-cont3 {
	width: auto;
	height: auto;

}


.logo-cont3 p {
	color: #fff;
	font-size: .4rem;
	text-align: left;
/*	border: 1px solid white;*/
	width: 100%;
}

.logo-cont3:hover {
	background-color: #ffffff40;
}

.logo--github {
	background-image: url("../img/github_PNG40.png");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 20px;
	height: 20px;
	margin: 0 auto;
}

/*.logo-cont3 {*/
	/* display: flex; */
	/* position: relative; */
	/* justify-content: center; */
	/* align-items: end; */
	/* align-content: center; */
	/* text-align: center; */
	/*display: flex;
	position: relative;
	justify-content: center;
	object-position: center;
	text-align: center;
	align-content: center;*/
	/* width: auto; */
	/* height: auto; */
/*	margin: 0 auto;*/
	/*	border: 1px solid white;*/
/*}*/

/*.logo-cont3 img {*/
	/*display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	align-content: center;*/
	/*display: flex;
	position: absolute;*/
	/* margin: 0 auto; */
	/*width: 100%;
	height: 100%;*/
	/* place-items: center; */
	/*place-content: center;
	object-fit: cover;
*/	/* margin: 0 auto; */
	/* background-position: center; */
	/* left: 50%; */
	/*	background-color: #fff;*/
	/*	background-position: cover;*/
	/* text-align: end; */
	/* justify-content: center; */
	/* object-position: center; */
	/* align-content: center; */
	/* z-index: -1; */
/*}*/

.logo-cont3 p {
	color: #fff;
	font-size: .7rem;
	text-align: center;
}


/*.gitlogo3 {
		display: flex;
		position: relative;
		padding: 5px;
}

.gitlogo3 {
	display: flex;
	position: relative;
	flex-direction: column;
	text-decoration: none;
	color: white;
	margin: 0 auto;
	height: fit-content;
	text-align: center;
	font-size: .7rem;
	color: #909090;
}

.gitlogo3:hover {
	color: black;
	background-color: rgba(250, 250, 250, 0.8);
	width: fit-content;
	height: fit-content;
	padding: .7em;
	transition: .2s;
	border-radius: .6em;
	filter: drop-shadow(5px 9px 7px #ffffff6c);
}

.gitlogo3 img {
	margin: 0 auto;
	object-position: center;
	width: 100%;
	height: 100%;
}*/


/*.logo-cont3 {
	display: flex;
	position: relative;
	flex-direction: column-reverse;
}*/

.poli {
	display: flex;
	flex-direction: row;
	position: relative;
	background-color: #222222;
	justify-content: center;
	gap: 10px;
	font-size: .6rem;
}

.poli span {
	color: #ffff;
	text-decoration: none;
	font-size: 0.5rem;
}

/*SECTION LAPTOPS*/
.title__laptop {
	font-size: clamp(22px, 5vw, 33px);
	color: #111111;
	font-weight: 700;
	background: linear-gradient(190deg,#aaffff80,#fff3);
	border-radius: 1%;
}

.laptops {
	margin-top: 40px;
}

.gallery__wrapper {
	display: flex;
	gap: 0.1em;

}

.gallery__item {
	display: flex;
	position: relative;
	flex: 1;
	height: 358px;
	overflow: hidden;
	/* scrollbar-width: none; */
}

.img__item img {
	position: absolute;
	display: flex;
	object-position: center;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.item__description {
	display: flex;
	flex-direction: column;
	position: relative;
	color: #303030;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	overflow: auto;
	place-content: flex-end;
	justify-content: space-between;
	bottom: 0;
	scrollbar-width: none;
}

.item__description a {
	text-decoration: none;
}

.item__name {
	font-size: 30px;
	background: linear-gradient(360deg,#aaffff80,#fff3);
	padding-inline: 10px;
	transform: translateY(-10px);
	cursor: pointer;
	color: #111111;
}

/*.item__cont {*/
	/*display: flex;
	position: relative;
	justify-content: flex-end;
	align-items: flex-end;
	align-content: flex-end;*/
/*	overflow: auto;*/
/*}*/

.item__role {
	display: block;
	position: relative;
	bottom: 0;
	font-size: 0.8rem;
	background: linear-gradient(180deg,#aaffff80,#0003);
	padding: 10px;
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
	transform: translateY(10px);
	list-style: none;
	height: auto;
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

/*.item__role li h6 {*/
/*	text-align: left;*/
/*}*/

.amazon {
	/*width: auto;
	height: auto;
	margin: 0 auto;*/
	padding: 0 .3em;
	text-align: center;
}

.amazon a {
	text-decoration: none;
	color: #111111;
	font-weight: 900;
	font-size: 1.1rem;
/*	margin: 0 .3em;*/
}

.amazon a:hover {
	/*width: auto;
	height: auto;
*/	border-bottom: solid 1px #3030308c;
}
/*SECTION LAPTOPS*/

.contact1 {
	display: flex;
	position: relative;
	flex-direction: row;
	width: 100%;
	height: auto;
	padding: 1em;
	gap: 2em;
	align-items: center;
	justify-content: center;
	text-align: center;
}


 /*media*/
@media screen and (max-width: 768px) {

	.cuerpo {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		position: relative;
		width: 100%;
		height: auto;
		margin: 0;
	}

	.nav-item {
		margin-bottom: 1.5em; 
	}

	.uno {
		grid-area: 1 / 4;
	}

	.dos {
		grid-area: 2 / 4;
	}

	.tres {
		grid-area: 3 / 4;
	}

	.cuerpo .sidebar1 {
		display: flex;
		position: relative;
		width: auto;
		height: auto;
		margin: 0 auto;
		box-sizing: border-box;
		overflow-x: hidden;
	}

	.cuerpo .sidebar2 {
		display: flex;
		position: relative;
		width: auto;
		height: auto;
		margin: 0 auto;
		box-sizing: border-box;
		overflow-x: hidden;
	}

	.main-1 {
		display: flex;
		position: relative;
		flex-direction: column;
		margin: 0 auto;
		width: 100%;
		height: auto;
		justify-content: stretch;
	}

	.carousel-caption {
		display: block;
		position: absolute;
		font-size: .7rem;
		/* color: black; */
		width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 5px;
		background-color: #ffffff0c;
		backdrop-filter: blur(10px);
	}

	.carousel-caption h2{
		font-size: 0.9rem;
	}

	.carousel-caption p {
		font-size: .6rem;
	}

	.carousel {
		width: 100%;
	}

	.carousel-item img {
/*		width: 100%;*/
		object-fit: fill;
	}

	.others {
		display: flex;
		position: relative;
		justify-content: center;
		max-width: 100%;
		height: auto;
		margin-top: 10px;
		text-align: center;
	}

	.otros p:hover {
		display: flex;
		position: relative;
		justify-content: center;
		text-align: center;
		width: 100%;
		font-size: .9rem;
		font-weight: 400;
	}

	.logo {
		width: 200px;
		height: 100px;
		border-radius: 1%;
		margin: 3px;
	}

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

	.banner-demo {
		 display: flex;
		 position: relative;
		 flex-direction: column;
		 /* justify-content: center; */
		 margin: 0 auto;
		 object-position: center;
		 width: 100%;
		 gap: 1em;
	}

	.banner-demo article {
		display: flex;
		position: relative;
		justify-content: center;
		align-items: center;
		width:100%;
		height: 400px;
		margin: 0 auto;
	}

	.banner-demo img {
		width:100%;
		height: 100%;
		margin: 0 auto;
	}

/*	.gitlogo {*/
		/* display: flex; */
		/* position: relative; */
/*	}*/

	.gitlogo a {
		display: flex;
		position: relative;
		flex-direction: column;
		text-decoration: none;
		color: white;
		margin: 0 auto;
		height: fit-content;
	}

	.gitlogo a:hover {
		color: #111111;
		background-color: rgba(250, 250, 250, 0.8);
		padding: 5px;
		transition: .2s;
	}

	.gitlogo img {
		margin: 0 auto;
		object-position: center;
		width: 60px;
		height: 60px;
	}

	.logo-cont2 {
		display: block;
		position: relative;
		justify-content: space-between;
		/* width: 100%; */
		height: auto;
	}

	.logo-cont2 article {
		display: flex;
		position: relative;
		flex-direction: column-reverse;
	}

	.canals {
		padding: 10px;
	}

	.logo2 {
		display: flex;
		position: relative;
		background-image: url("../img/logochris1.png");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		object-fit: fill;
		width: 150px;
		height: 100px;
		border-radius: 1%;
		z-index: 3000;
		opacity: 0.5;
		margin: 0 auto;
	}

	.gitlogo3 img {
		margin: 0;
		object-position: center;
		width: auto;
		height: auto;
	}

	.canals ul {
		width: 90%;
	}


	.pro-row {
		display: flex;
		flex-wrap: wrap;
	}

	.name,
	.role {
		opacity: 1;
		transform: translateY(0);
	}


	.carousel-inner {
		padding: 0;
	}

	.carousel-item img {
		width: 100%;
		margin: 0;
		padding: 0;
		/* border-radius: 0; */
	}

	.main-2 { 
		width: 100%;
	}


	/*.offcanvas {
		display: none;
	}*/

	.navbar-toggler {
		display: block;
	}

	/*.toggler-icon {
		background-image: url("../img/list.svg");
		width: 16px;
		height: 16px;
		color: black;
	}*/

	.bi-list {
		font-size: 1rem;
		border: none;
		padding: .2em;
	}

/*	.bi-list::before {*/
/*		content: "\F62A";*/
/*	}*/

	.off {
		display: flex;
		flex-direction: column;
		position: fixed;
		height: 100vh;
		width: 80%;
		z-index: 6000;
		padding: .8em;
		right: 0;
		top: 0;
		background-color: #2b2b2b;
	}

	.off-header button{
		float: right;
		border: none;
/*		position: absolute;*/
/*		right: 0;*/
	}

	.navbar-nav {
		display: block;
		flex-direction: column;
		width: 100%;
		height: auto;
		padding: .8em;
	}

	.nav button {
		padding: 0.3em .8em;
		background-color: #0004;
		border: none;
		border-radius: .3em;
	}

	.bi-x-circle {
		border:none;
	}

	.off-body {
		display: flex;
		flex-direction: column;
		margin: .8em;
		height: 100%;
		justify-content: space-between;
	}

	.off-header {
		display: block;
	}

	.hidden-nav {
		display: none;
	}

	/*.notice {
		width: 100%;
		height: 300px;
	}*/
}