@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;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
	width: 100%;
	font-family: "Source Sans Pro", sans-serif;
	  font-size: 1rem;
	  font-weight: 400;
	  line-height: 1.5;
	  color: #212529;
	  text-align: left;
	  background-color: #fff;
}

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

a {
	text-decoration: none;
}

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

.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,
.botonRGPD__cancel{
/*	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,
.botonRGPD__cancel:hover{
	color: #30303090;
}

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

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

/*.hero {
	width: 100%;*/
/*	min-height: 500px;*/
/*	max-height: 70lvh;*/
/*	position: relative;*/
/*	display: grid;*/
/*	grid-template-rows: 100px 1fr;*/
/*	align-items: center;*/
/*}*/

/*.hero:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 60lvh;*/
/*	background-image: linear-gradient(180deg, #ffffffa1 0%, #ffffffa1 100%), url('../img/logochris1.png');*/
/*	background-size: 100% 100%;*/
/*	background-size: contain;*/
	/*background-position: center;
	background-repeat: no-repeat;
	object-fit: cover;
*//*	clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 77%, 0 80%);*/
	/*z-index: -1;
}*/


.navbar {
	position: relative;
	display: block;
	background-color: #00002b;
	color: white;
}

.nav {
  	display: flex;
  	padding: 0.7em 40px;
  	width: 100%;
  	height: 100%;
  	display: flex;
  	align-items: center;
  	position: relative;
  	justify-content: space-between;
  	color: white;
}

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

.navbar-toggler {
	display: none;
}

.off-header {
	display: none;
}

.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; */
}

.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;
}

.logo-cont2 {
	display: none;
}

.demoPage-main {
	margin: 0;
	padding: 10px 0;
	Justify-items: center;
}

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

.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);
}

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

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

.init__gallery {
	display: none;
}

.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;
	aspect-ratio: 16 / 9;
	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;
	backdrop-filter: blur(10px);
	bottom: 0;
	filter: drop-shadow(2px 2px #000111);
}

.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);*/
}

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

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

.carousel-control-prev i,
.carousel-control-next i{
	color: #ffffff8c;
}

.carousel-control-prev:hover i, 
.carousel-control-next:hover i{
	cursor: pointer;
	color: #000111;
	filter:drop-shadow(20px 20px 20px black);
}

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

.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;
/*	mix-blend-mode: luminosity;*/
/*	opacity: .6;*/
}

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

.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: 4px solid #000111;
	opacity: 0.3;
}

.not-a:hover, .not-b:hover,
.not-c:hover, .not-d:hover {
	border: 7px solid #202020;
	color: black;
	cursor: pointer;
	opacity: 1;
	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 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 h4 {
	color: #626262;
	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%; */
}

.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;
}

.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;
	grid-area: 2 / 1 / span 2;
}

.banner-demo article {
	display: block;
	position: relative;
	/*width: auto;
	height: auto;*/
	max-width: 270px;
	max-height: 300px;
}

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

.infoweb__container {
	display: flex;
	color: #000011;
	margin: .1em auto;
	width: auto;
	height: auto;
	justify-content:space-around;
/*	text-align: left;*/
}

/*.infoweb__container article {
	display: block;
}*/

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

.infoweb {
	display: block;
	position: relative;
	object-position: center;
	text-align: center;
}

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

.infoweb__articles {
	color: #525252;
/*	width: 400px;*/
	text-align: left;
}

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

.infoweb__articles a {
	display: flex;
	position: relative;
	text-decoration: none;
	color: #525252;
	cursor: pointer;
/*	text-align:left;*/
	justify-content: center;
/*	padding: 0 auto;*/
}

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

.content--x {
	width: 400px;
	height: 500px;
/*	overflow-x: auto;*/
}

.timel--x {
	display: flex;
	justify-content: center;
}

/*.timel--x .twitter-tweet {
	display: flex;
	justify-content: center;
	position: relative;
	margin: 0 auto;
	width: 100%;
}

.twitter-tweet iframe{
	width: 100%;
	margin: 0 auto;
}*/

.infoweb__articles {
	width: auto;
	height: auto;
}

/*.infoweb__lists {
	list-style: none;
	padding-left: 0;
	justify-content: center;
	color: #525252;
	width:100%;
}
*/
/*.infoweb__lists li {*/
/*	text-align:left;*/
/*	margin:0 5%;*/
/*	margin: .4em auto;*/
/*}*/
.soy,
.infoweb__lists {
	list-style: none;
	object-position: bottom;
/*	justify-items: flex-end;*/
/*	place-items:end;*/
/*	place-content: end;*/
	text-align: center;
	padding-left: 0;
	height: 70px;
}
/*SECTION LAPTOPS*/
.laptops {
	margin-top: 40px;
}

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

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

}

.gallery__item {
	display: flex;
	position: relative;
	flex: 1;
	height: 258px;
	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: #525252;
}

/*.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;
}

.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*/
.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; */
}

.influencers {
	width: auto;
	height: auto;
	margin: 20px;

}

.influencers h6 {
	font-size: clamp(25px, 5vw, 33px);
	font-weight: 700;
	color: #525252;
	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,#303030c8 0%,#ffffff48 100%);
	padding-inline: 10px;
/*	filter: drop-shadow(1px 1px 5px);*/
/*backdrop-filter: drop-shadow(3px 4px 10px);*/
	transform: translateY(-10px);
	
}

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

.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(180deg,#303030c8 0%,#ffffff88 100%);
	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;
}

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

.ff {
	display: flex;
	flex-direction: column;
}

.socialnav {
    display: flex;
    position: relative;
    align-items: center;
    margin: .4em auto;
    justify-content: center; 
}

.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 {
	display: flex;
	justify-content: center;
	/*background-image: url("../img/github_PNG40.png");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 20px;
	height: 20px;
	margin: 0 auto;*/
}

.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;
}

.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 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%;
}


.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;
}

.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 {
	margin: 10px auto auto auto;
	text-align: center;
	/* padding-left: 0; */
	/* justify-content: center; */
}

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

.poli {
	display: flex;
	flex-direction: row;
	position: relative;
	background-color: #222222;
	justify-content: center;
	gap: 10px;
	font-size: .5rem;
	color: #ffff;
	text-decoration: none;
/*	font-size: 0.5rem;*/
}

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


.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-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;
}

.ads {
	overflow-x: hidden;
}

.YouTube {
/*	display: flex;*/
	position: fixed;
/*	position: relative;*/
	right: 0;
	bottom: 0;
/*	width: 100%; */
/*	height: auto;*/
	z-index: 5000;
	transition: all 4s ease-in-out;
/*	border: 1px solid black;*/
/*	place-content: center;*/
/*	justify-content: space-evenly;*/
	align-items: center;

/*	opacity: 0;*/
	transition: all .6s ease-in-out;
	animation: move-der-izq 5s 1;
	width: 100%;
	height: 60%;
/*	border: 1px solid black;*/
	overflow: hidden;
	padding: 2% 0;
	background: linear-gradient(to bottom, #0000ffc8 0%, #ffffffc8 50%, #ff0000c8 100%);
/*	z-index: -1;*/
}
.YouTube h3{
	text-align: center;
	color: #FFFF;
	margin: 0;
	padding: 0;
}
.YouTube figure{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	position: relative;
	width: auto;
	height: 300px;
	padding:1em;
/*	margin:auto;*/
	/*	overflow: hidden;*/
}

.YouTube figure img{
	display: block;
	width: auto;
	margin: 0 .3rem;
	height: 100%;
}

/*.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);
	}
}

.closeqA {
	display: grid;
/*	flex-direction: row;*/
	position: absolute;
	place-content:center;
/*	color: #991111;*/
/*	bottom: 0.5rem;*/
/*	justify-content: center;*/
/*	align-items: center;*/
	font-weight: 400;
	right: 0;
	top: 0;
	width: 50px;
	height: 50px;
	font-size: 1.5em;
	z-index: 6000;
	color: #fff;
	border: 1px solid #fff;
	border-radius:50%;
	margin:.7rem;
/*	opacity: 0;*/
}

.closeqA:hover {
	cursor: pointer;
	color: #1b1b1b;
	border: 1px solid #1b1b1b;
	filter: drop-shadow(1px 5px 7px red);
	transition: all .3s ease-in;
}



.social-icons {
  list-style-type: none;
  padding-left: 0;
  display: flex;
	justify-content: space-between;
  max-width: 180px;
  color: #fff;  
  margin: 5em;
/*  border:1px solid black;*/
  z-index:2000;
/*  filter: drop-shadow(3px 5px #fff);*/
}

.social-icons .social-link {
  font-size: 18px;
}

.social-icons .social-link:hover {
  color: #F85C70;
  cursor: pointer;
}

.header {
  position: relative;
  height: 60lvh;
/*  min-height: 600px;*/
/*  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../img/logosChrisWeb/IMG-20230918-WA0001.png);*/
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/portada.webp');
  background-size: cover;
/*  object-fit: fill;*/
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #fff;
/*  z-index: -1;*/
}

.header .container {
  position: relative;
  height: 100%;
}

.header .header-content div {
  width: 100%;
  position: absolute;
  left: 0;
  top: 55%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #fff;
  display: grid;
  gap: .7em;
  text-align: left;
}

.header .header-content .header-subtitle {
  font-weight: 200;
  font-size: calc(20px + (45 - 20) * ((100vw - 200px) / (2600 - 300)));
}

.header .header-content .header-title {
  font-size: calc(40px + (120 - 40) * ((100vw - 200px) / (2600 - 300)));
  font-weight: bold;
  line-height: .7;
  margin-bottom: 25px;
  color: inherit;
}

.header .header-content .header-mono {
  letter-spacing: 5px;
  font-weight: 500;
  font-size: calc(12px + (19 - 12) * ((100vw - 200px) / (2600 - 300)));
  margin-bottom: 40px;
}

.bi-whatsapp {
/*	background-color: #fff;*/
/*    color: #25D366; Color verde de WhatsApp */
    font-size: 1rem;
/*    border-radius: 50%;*/

    color:#fff;
  background:
   linear-gradient(#25d366,#25d366) 14% 84%/16% 16% no-repeat,
   radial-gradient(#25d366 60%,transparent 0);
/*    padding: .1em;*/
}

/*PROYECTS*/
h1,h2,h3 {		
	font-size: clamp(25px, 5vw, 42px);
	margin-top: 40px;
}
#proyects {
	width: auto;
	height: auto;
	
}

#proyects div{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 90vw;
	height: auto;
	overflow: hidden;
	margin: 0 auto;
	article {
		width: 350px;
		height: auto;
		margin-bottom: 40px;
	}
}

.proyects-figure {
	display: flex; 
	position: relative; 
	width: 100%; 
	height: 400px;
	margin: 0 auto;
}

.proyect-imgs, .proyectB-imgs {
	display: block;
	position: absolute; 
	width:100%; 
	height: 100%;
	z-index: -1;
	object-fit: contain;
	object-position: top;
}

.proyects-figure figcaption{
	color: #121212; 
	position: absolute; 
	bottom: 0; 
	padding: 0.7em; 
	margin-block: 1lh; 
	backdrop-filter: blur(8px); 
	background-color: rgba(255, 255, 255, 0.5);
	height: fit-content;
	width: 80%;
	justify-self: anchor-center;
	/*margin: 0 auto;*/
}

.ads {
	display: grid;
	position: relative;
	width: 100%;
	overflow: scroll;
	/*place-content: center;*/
	scrollbar-width: none;
	margin: 0 auto;
}

/*LAYOUTS*/

.content-layout {
	width: 100%;
	height: auto;
	margin: 40px auto;
	/*border:1px solid;*/
}

.layouts {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	position: relative;
	overflow: hidden;
	width: auto;
	height: auto;
}

.layouts figure{
	/*scale: -1;*/
	width: 400px;
	height: auto;
	overflow: scroll;
	scrollbar-width: none;
	margin: 20px auto;
	object-position: center;
	cursor: pointer;
	transition: all 0.3s ease-in;

	&:hover {
		scale: 1.2;
	}

	img {
		display: flex;
		justify-self: center;
		/*width: auto;*/
		max-width: 400px;
		height: 200px;
		border-radius: 6px;
		/*z-index: -1;*/
		/*object-position: center;*/
		margin: 0 auto;
	}

	figcaption {
		padding: 10px 0;
		color: #1b1b1b;
		text-align: center;
		font-weight: 700;

	}
}

.modals {
	display: none;
	place-content: center;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	height:100vh;
	z-index: 4000;
	background-color: #fffe;
	/*border: 1px solid red;*/
}

.content-modal iframe {
	min-width: 1500px;
	height: 80vh;
	scrollbar-width: none;
	/*display: none;*/
	/*position: absolute;*/
}

.show-modal {
	display: grid;
}

.btn__modal--close {
	position: absolute;
	background: none;
	border: none;
	font-weight: 700;
	font-size: 2rem;
	right: 40px;
	top: 40px;
	cursor: pointer;
}

/*LAYOUTS*/

@media (max-width: 767.98px) {
  .header {
    height: 500px;
    min-height: 500px;
  }
  .header .social-icons {
    margin: 10px auto;
  }
  .header .header-content {
    padding: 20px;
  }
  .header .header-content .header-mono {
    letter-spacing: 2px;
  }

.header-title {
  font-size: 2.4rem;
  font-weight: bold;
  opacity: .8;
  color: #212529;
}

.header-mini {
  min-height: 24rem;
  height: 24rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  padding: 1rem;
  background: #fcbec6;
}


.hide {
	display: none;
}

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

	.layouts figure{
		width: 350px;
		 img{
			/*scale: -1;*/
			max-width: 350px;
		}

	}

	.modals img {
		width: 100%;
		height: 60vh;
	}

	.content-modal iframe {
		min-width: 90vw;
	}

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

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

	.navbar-toggler {
		display: block;
	}

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

	.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;
	}

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

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

	.carousel {
		width: 100%;
	}

	.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-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;
	}

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

	.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;
	}

	.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;
	}

	.canals ul {
		width: 90%;
	}

	.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;
	}

	.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%;
	}
*/
	.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;*/
	}

	.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;
	}

	.infoweb__container {
		display: block;
	}

	.content--x {
		width: 100%;
		height: 400px;
	}

	.social-icons {
		margin-top: 3rem;
	}

	.YouTube {
		height: 90%;
	}
}