@import url('https://fonts.cdnfonts.com/css/super-commando');
@import url('https://fonts.cdnfonts.com/css/fff-tusj');
@import url('https://fonts.cdnfonts.com/css/violina');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Changa:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nova+Square&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

* {
	padding: 0;
	margin: 0;
}

/*-----------------------------------TIPOS DE FUENTES--------------------------------------------*/

.textoLato {
	font-family: 'Lato', sans-serif;
}

.textoNova {
	font-family: 'Nova Square', sans-serif;
}

.textoPixel {
	font-family: 'Pixelify Sans', sans-serif;
}

.textoLilita {
	font-family: 'Lilita One', sans-serif;
}

.textoDibujado {
	font-family: 'FFF Tusj', sans-serif;
}

.textoComando {
	font-family: 'Super Commando', sans-serif;
}

.textoSerio {
	font-family: 'Bebas Neue', sans-serif;
}

.textoFino {
	font-family: 'Violina', sans-serif;
}

.textoChanga {
	font-family: 'Changa', sans-serif;
}

.textoOsvaldo {
	font-family: 'Oswald', sans-serif;
}

.textoPt {
	font-family: 'PT Serif', serif;
}


/*---------TAMAÑO DE FUENTE------*/

.tamanioMed {
    font-size: 2vw;
}

.tamaniopeq {
    font-size: 1.2vw;
}

.tamanioMin {
    font-size: 1vw;
}

.tamanioGran {
    font-size: 3.5vw;
}

/*---SOMBRAS-----*/

.cajaSombraNegra {
	box-shadow: black 10px 10px 10px;
}

.dropShadowNegro {
	filter: drop-shadow(0 0 0.75rem rgba(61, 61, 61, 0.753));
}

.cajaSombraBlanca {
	box-shadow: white 10px 10px 10px;
}

.dropSombraNegra {
	filter: drop-shadow(0 0 0.75rem black);
}

.dropSombraNegraHover:hover {
	filter: drop-shadow(0 0 0.75rem black);
	transition:  all 1.5s ease;
}

.dropSombraBlanca {
	filter: drop-shadow(0 0 0.75rem white);
}

.dropSombraBlancaHover:hover {
	filter: drop-shadow(0 0 0.75rem white);
	transition:  all 1.5s ease;
}

.sombraBlanca {
	text-shadow: white 2px 2px 2px;
}

.sombraBlancaHover:hover {
	text-shadow: white 2px 2px 2px;
	transition:  all 1.5s ease;
}

.sombraRosa {
	text-shadow: 1px 1px 5px rgb(243, 148, 172);
}

.sombraRosaHover:hover {
	text-shadow: 1px 1px 5px rgb(243, 148, 172);
}

.sombraGris {
	text-shadow:  #d4d4d4 2px 2px 2px;
}

.sombraNegra {
	text-shadow: black 1px 1px 1px;
}

.sombraNegraHover:hover {
	text-shadow: #333 1px 1px 1px;
}

.sombraCeleste {
	text-shadow: rgba(122, 228, 255, 0.781) 1px 1px 1px;
}

/*--------------------------GAP----------------------------------------------------------*/

.gap {
	gap: 20px;
}


/*------------------------------------COLORES--------------------------------------------*/

.fondoConImagen {
	background-image: url('../images/redes.jpeg');
	background-size: cover;
	background-repeat: no-repeat;
}

.fondoConImagenHover:hover {
	background-image: url('../images/redes.jpeg');
	background-size: cover;
	background-repeat: no-repeat;
}

.fondoConImagen3 {
	background-image: url('../images/chica.jpeg');
	background-size: cover;
	background-repeat: no-repeat;
}

.fondoConImagen4 {
	background-image: url('../images/ia2.jpeg');
	background-size: cover;
	background-repeat: no-repeat;
}

.fondoConImagen5 {
	background-image: url('../images/codegirl.jpeg');
	background-size: cover;
	background-repeat: no-repeat;
}

.fondoConImagenTarjeta {
	background-image: url('../images/tarjeta.jpeg');
	background-size: cover;
	background-repeat: no-repeat;
}

.fondoImagenCiudad3 {
	background-image: url('../images/city3.jpeg');
	background-size: cover;
	background-repeat: no-repeat;
}

.fondoImagenCiudad3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
	border-radius: 30px 30px 0px 0px;
}

.fondoHacker {
	background-image: url('../images/hacker.jpg');
	background-size: cover;
	background-repeat: no-repeat;
}

.fondoHacker1 {
	background-image: url('../images/fondo_hacker1.jpeg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.fondoIntro {
	background-image: url('../images/intro.gif');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.fondoHacker2 {
	background-image: url('../images/hacking2.jpeg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.fondoHacker3 {
	background-image: url('../images/hacking3.jpeg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.fondoHacker4 {
	background-image: url('../images/hacking4.jpeg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.fondoHacker5 {
	background-image: url('../images/hacking5.jpeg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.fondoHacker6 {
	background-image: url('../images/hacking6.jpeg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.fondoHacker7 {
	background-image: url('../images/hacking7.jpeg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.fondoAnimado1 {
	background-image: url('../images/fondoAnimado.gif');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.fondoAnimado2 {
	background-image: url('../images/fondoAnimado2.gif');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.fondoAnimado3 {
	background-image: url('../images/fondoAnimado3.gif');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.fondoAnimado4 {
	background-image: url('../images/fondoAnimado4.gif');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.fondoAnimado5 {
	background-image: url('../images/fondoAnimado5.gif');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.fondoAnimado6 {
	background-image: url('../images/fondoAnimado6.gif');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.fondoAnimado7 {
	background-image: url('../images/fondoAnimado7.gif');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.fondoAnimado8 {
	background-image: url('../images/fondoAnimado8.gif');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.fondoAnimado9 {
	background-image: url('../images/fondoAnimado9.gif');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.fondoAnimado10 {
	background-image: url('../images/fondoAnimado10.gif');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.fondoAnimado11 {
	background-image: url('../images/fondoAnimado11.gif');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.fondoFuture1 {
	background-image: url('../images/future1.jpeg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.fondoFuture2 {
	background-image: url('../images/future2.jpeg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.fondoFuture3 {
	background-image: url('../images/future3.jpeg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.fondoFuture4 {
	background-image: url('../images/future4.jpeg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.fondoFuture5 {
	background-image: url('../images/future5.jpeg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.fondoBajar {
	background-image: url('../images/bajar.gif');
	background-size: cover;
	background-repeat: no-repeat;
}

.fondoSubir {
	background-image: url('../images/subir.gif');
	background-size: cover;
	background-repeat: no-repeat;
}

.fondoTienda {
	background-image: url('../images/tienda.gif');
	background-size: cover;
	background-repeat: no-repeat;
}

.fondoImagenCiudad2 {
	background-image: url('../images/city2.jpeg');
	background-size: cover;
	background-repeat: no-repeat;
}

.fondoImagenCiudad2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.fondoImagenCiudad {
	background-image: url('../images/city.jpeg');
	background-size: cover;
	background-repeat: no-repeat;
}

.fondoImagenCiudad::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.fondoImagenPerro {
	background-image: url('../images/fondoPerro.jpg');
	background-size: contain;
	background-repeat: repeat;
}

.fondoImagenMadera {
	background-image: url('../images/madera.jpg');
	background-size: contain;
	background-repeat: repeat;
}

.bordeVidrio {
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.068);
	box-shadow: 0 8px 32px 0 rgba(141, 141, 141, 0.37);
}


.fondoVidrio {
	background: linear-gradient(rgba(255, 255, 255, 0.678), rgba(255, 255, 255, 0.171));
	border: 1px solid rgba(53, 53, 53, 0.18);
	box-shadow: 0 8px 32px 0 rgba(48, 48, 48, 0.37);
}

.fondoVidrioHover:hover {
	background: linear-gradient(rgba(255, 255, 255, 0.678), rgba(255, 255, 255, 0.171));
	border: 1px solid rgba(53, 53, 53, 0.18);
	box-shadow: 0 8px 32px 0 rgba(48, 48, 48, 0.37);
	transition:  all 1.5s ease;
}

.fondoNegroTransparente {
	background-color: rgba(0, 0, 0, .7);
}

.fondoBlancoTransparente {
	background-color: rgba(255, 255, 255,.5);
}

.fondoNegroSuave {
	background-color: #4f4f4f;
}

.fondoNegro {
	background-color:  #1d1d1d;
}

.fondoNegroHover:hover {
	background-color:  #292929;
}

.fondoNegroOscuro {
	background-color:  #131313;
}

.fondoBlanco {
	background-color: rgb(255, 255, 255);
}

.fondoBlancoHover:hover {
	background-color: rgba(255, 255, 255);
	transition:  all 1.5s ease;
}

.fondoCeleste {
	background-color: #6edae9;
}

.fondoAmarillo {
	background-color: #fff075;
}

.fondoVerde {
	background-color: #b2e070;
}

.fondoAzul {
	background-color: rgb(9, 118, 168);
}

.fondoAzulHover:hover {
	background-color: #3498db;
	transition:  all 1.5s ease;
}

.fondoAzulEspecialHover:hover {
	background-color: #3498db;
	transition:  all 1.5s ease;
}

.fondoTiburon {
	background-color: #6d8dbf;
}

.fondoTiburonHover:hover {
	background-color: #6d8dbf;
}

.fondoVioleta {
	 background-color: #d69ff1;
}

.fondoRosa {
	background-color: #ff38a1;
}

.fondoNaranjeta {
	background-color: #ffc176;
}

.fondoNaranja {
	background-color: #FECEAB;

}

.fondoRojo {
	background-color:  #8B0000;
}

.fondoRojoSangre {
	background-color: #4A0000;
}

.fondoRojoGranate {
	background-color: #800000;
}

.fondoRojoImperial {
	background-color: #9B111E ;
}

.letraVioleta {
	color:  #e5b0ff;
}

.letraRoja {
	color:  #ff6553;
}

.letraRosa {
	color: #ff87c7;
}

.letraAmarilla {
	color: #FECEAB;
}

.letraEpica {
	color:  #ffd58c;
}

.letraTiburon {
	color: #6d8dbf;
}

.letraTiburonHover:hover {
	color: #6d8dbf;
}

.letraAzul {
	color: #3498db;
	text-shadow: black 1px 1px 1px;
}

.letraNaranjetaHover:hover {
	color: #ff847c;
	text-shadow: black 1px 1px 1px;
}

.letraAmarillaHover:hover {
	color: #fff075;
	text-shadow: black 1px 1px 1px;
}

.letraRojaHover:hover {
	color:  #ff6553 !important;
	text-shadow: black 1px 1px 1px;
}

.letraAzulHover:hover {
	color: #3498db;
	text-shadow: black 1px 1px 1px;
}

.letraEpicaHover:hover {
	color:  #ffd58c;
}

.letraRosaHover:hover {
	color: #ff4ac3;
}

.letraVioletaHover:hover {
	color:  #e7b6ff;
}

.letraTiburonHover:hover {
	color: #6d8dbf;
}

.letraVerde {
	color:  #b2e070;
}

.letraVerdeHover:hover {
	color:  #b2e070;
}

.letraVerdeClaro {
	color:    #b4f5b7 ;
}

.letraCeleste {
	color: #b6edff;
}

.letraCelesteHover:hover {
	color: #b6edff;
}

.letraNegra {
	color: #424242;
}

.letraNegraHover:hover {
	color: #424242;
}

.letraBlanca {
	color: white;
}

.letraNaranja {
	color: orange;
}

.letraNaranjeta {
	color: #ffc176;
}
/*--------------------------------------- BORDE COLOR ---------------------------------------------------*/

.sinBorde {
	border: none;
}

.bordeNaranja {
	border: solid orange 1px;
}

.bordeNaranjeta {
	border: solid #ffc176 1px;
}

.bordeVerde {
	border:  solid #b2e070 1px;
}

.bordeCeleste {
	border: skyblue solid 5px;
}

.bordeCelesteFino {
	border: skyblue solid 1px;
}

.bordeAzul {
	border: #3498db solid 5px;
}

.bordeAzulFinoFocus:focus {
	border: #3498db solid 2px;
	outline: none;
}

.bordeAzulFino {
	border: #3498db solid 1px;
}

.bordeTiburon {
	border: #6d8dbf solid 5px;
}

.bordeTiburonFino {
	border: #6d8dbf solid 1px;
}

.bordeRosa {
	border: #ff38a1 solid 5px;
}

.bordeRosaFino {
	border: #ff38a1 solid 1px;
}

.bordeRojoFino {
	border:  #ff6553 solid 1px ;
}

.bordeRojo {
	border:  #ff6553 solid 5px ;
}

.bordeRojoIzq {
	border-left: #ff6553 solid 3px;
}

.bordeRojoIzqHover:hover {
	border-left: #ff6553 solid 3px;
}

.bordeNegro {
	border: #4f4f4f solid 5px;
}

.bordeNegroGrueso {
	border: black solid 50px;
}

.bordeNegroFino {
	border: #4f4f4f solid 1px;
}

.bordeNegroTransparente {
	border: rgba(0, 0, 0, .5) solid 5px;
}

.bordeNegroFinoTransparente {
	border: rgba(0, 0, 0, .5) solid 1px;
}

.bordeBlanco {
	border: white solid 4px;
}

.bordeBlancoFino {
	border: white solid 1px;
}

.borderVioleta {
	 border: #d69ff1 solid 5px;
}

.bordeAzulIzqHover:hover {
	border-left: #60bfffa8 solid 0.1px;
}

.bordeAzulAbajoHover:hover {
	border-bottom: #a2daff6b solid 0.1px;
}

.bordeGrisArriba {
	border-top: #ffffff solid 1px;
	padding-top: 4vh;
}

/*---------------------------------------EFECTOS-------------------------------*/

.flash {
	animation: iniciarColor 3s ease-in-out;
}

.flash2 {
	animation: iniciarColor2 3s ease-in-out;
}

.radius {
	border-radius: 30px 30px 30px 30px;
}

.inferiorRadius {
	border-radius: 0px 0px 30px 30px;
}

.superiorRadius {
	border-radius: 30px 30px 0px 0px;
}

.radiusDer {
	border-radius: 0px 0px 30px 30px;
}

.radiusDerHover:hover {
	border-radius: 0px 30px 0px 30px;
}

.subrayado {
	text-decoration: underline;
}

.girar {
	animation: rotar 2s linear infinite;

}

.bold {
	font-weight: bold;
}

.linea {
	border: 0;
	height: 1px;
	background-color: #ddd;
	margin: 20px 0;
}

.lineaNaranja {
	background-color: rgb(255, 150, 89);
	height: 3px;
	max-width: 100%;
	padding: 0;
  }

.girarHover:hover {
	animation: rotar 2s linear infinite;

}

.girarInverso {
	animation: rotarInverso 2s linear infinite;
}

.girarInversoHover:hover {
	animation: rotarInverso 2s linear infinite;
}

.centrarItem {
	align-self: center;
}

.centrarDosItems {
	display: block ruby;
}

.centrarImagen {
	text-align: center;
}

.centrarItem2 {
	justify-self: center;
}

.flotar {
	position: absolute;
}

.flotarHover:hover {
	position: absolute;
}

.noFlotar {
	position: relative;
}

.noFlotarHover:hover {
	position: relative;
}

.bajar10 {
	top: 10vh;
}

.subirArriba10 {
	bottom: 10vh;
}

.subirArriba20 {
	bottom: 20vh;
}

.subirArriba50 {
	bottom: 50vh;
}

.atrasDe {
	position: relative;
	z-index: 1;
}

.adelanteDe {
	position: relative;
	z-index: 2;
}

.blur {
	backdrop-filter: blur(10px);
}

.ocultarSobra {
	overflow: hidden;
}

.grow {
    transform: scale(1);
    transition: transform 0.3s ease;
}

.grow1 {
    transform: scale(1.5);
    transition: transform 0.3s ease;
}

.growHover:hover {
    transform: scale(1.1);
    transition: transform 0.3s ease;
	transition:  all .5s ease;
}

.growMaxHover:hover {
    transform: scale(1.5);
    transition: transform 0.3s ease;
	transition:  all 1.5s ease;
}

.agrandarImagen {
    width: 20%;
    height: auto;
    animation: animarPokemon 2s steps(3) infinite;
}

.agrandarImagen {
	height: 20%;
    width: auto;
    
}

.avanzarLargo {
	animation: moverDerLargo 30s linear infinite;
}

.avanzarLargoDRapido {
	animation: moverDerLargo 3s linear infinite;
}

.avanzarLargoRapido {
	animation: moverIzqLargo2 3s linear infinite;
}

.avanzarLargoI {
	animation: moverIzqLargo 30s linear infinite;
}

.avanzarGirandoLargo {
	animation: avanzarGirandoLargo 30s linear infinite;
}

.subirCorto {
	animation: saltar 5s linear infinite;
}

.subirCortoHover:hover {
	animation: saltar 5s linear infinite;
}

.fondoColores1 {
	animation: coloresA 5s linear infinite;
}

.fondoColores1Hover:hover {
	animation: coloresA 5s linear infinite;
}


/*---------------------------------------margenes-------------------------------*/

.autoTextoCentrado {
	align-self: center;
}

.textoCentrado {
	text-align: center;
}

.margen5 {
	margin: 5vw;
}

.margen2 {
	margin: 2vw;
}

.margen1 {
	margin: 1vw;
}

.margen0 {
	margin: .2vw;
}

.margenNulo {
	margin: 0px;
}

.margenDer1 {
	margin-right: 1vw;
}

.margenDer2 {
	margin-right: 2vw;
}

.margenIzq {
	margin-left: 2vw;
}

.margenIzq2 {
	margin-left: 45%;
}

.paddingNulo {
	padding: 0px;
}

.padding1 {
	padding: 1.1vw;
}

.padding2 {
	padding: 2vw;
}

.padding1 {
	padding: .3vw;
}

.paddingTop30 {
	padding-top: 30vh;
}

.paddingTop20 {
	padding-top: 20vh;
}

.paddingTop10 {
	padding-top: 10vh;
}

.paddingTop5 {
	padding-top: 5vh;
}

.paddingBottom30 {
	padding-bottom: 30vh;
}

.paddingBottom10 {
	padding-bottom: 10vh;
}

.paddingBottom5 {
	padding-bottom: 5vh;
}

.paddingBottom20 {
	padding-bottom: 20vh;
}

.paddingDer10 {
	padding-right: 10vw;
}

.paddingDer15 {
	padding-right: 15vw;
}

.paddingDer30 {
	padding-right: 30vw;
}

.childCajaDerInf {
	position: absolute;
	bottom: 0;
    right: 0;
    padding: 10px;
}

.childCajaIzqInf {
	position: absolute;
	bottom: 0;
    left: 0;
    padding: 10px;
}

.widMax5 {
	max-width: 5%;
}

.widMax10 {
	max-width: 10%;
}

.widMax20 {
	max-width: 20%;
}

.widMax80 { 
	max-width: 80%;
}

.widMax90 { 
	max-width: 90%;
}

.widMax100 { 
	max-width: 100%;
}

.widFitContent {
	width: fit-content;
}

.wid10 { 
	width: 10%;
}

.wid20 { 
	width: 20%;
}

.wid30 { 
	width: 30%;
}

.wid50 { 
	width: 50%;
}

.wid90 {
	width: 90%;
}

.wid100 {
	width: 100%;
}
.wid300 {
	width: 300%;
}


.heighMax {
	height: 100%;
}

.height50 {
	height: 50%;
}

.heightNulo {
	height: 0px;
}

.overflowAuto {
	overflow: auto;
}

.encuadrar {
	width: 40%;
	height: auto;
	overflow: hidden;
}

.encuadrarAlto {
	width: 30%;
	height: 50%;
}

.encuadrarMedio {
	width: 50%;
	height: 50%;
}

.encuadrarGran {
	width: 60%;
	height: 50%;
}

.encuadrarGranAlto {
	width: 50%;
	height: 70%;
}

.encuadrarPeq {
	width: 30%;
	height: 30%;
}

.encuadrarPeqHover:hover {
	width: 45%;
	height: 45%;
	cursor: pointer;
	transition:  all 1.5s ease;
}

.interlineado15 {
	line-height: 1.5;
}

.interlineado2 {
	line-height: 2em;
}

.manito {
	cursor: pointer;
}

.pausarHover:hover {
	animation-play-state: paused;
	cursor: pointer;
}

.sinSeleccion {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.conSeleccion {
  -moz-user-select: all;
  -webkit-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

.espaciadoEntreEllos {
	justify-content: space-between;
}


/*---------------------------------------altura-------------------------------*/

.altura50 {
	height: 50vh;
}

.altura40 {
	height: 40vh;
}

.altura30 {
	height: 30vh;
}

.altura20 {
	height: 20vh;
}

.altura3 {
	height: 3vh;
}

.alturaMinMax {
	min-height: 59vh;
}

.alturaMinMaxPro {
	min-height: 100vh;
}

/*-------------------------------COLORES DE BOTON-----------------------------*/

.botonBlanco {
	color: rgb(35, 160, 218);
	background-color: white;
}

.botonAmarillo {
	background-color: #ffea4a;
	color: black;
	border: black solid .5px;
}

.botonAmarilloHover:hover {
	background-color: #fff075;
	color: black;
	border: black solid .5px;
	transition:  all 1.5s ease;
}

.botonRojoHover:hover {
	background-color:  #ff6553;
	color: black;
	border: black solid .5px;
	transition:  all 1.5s ease;
}

.botonRojo {
	background-color:  black;
	color: #ff6553;
	border: #ff6553 solid .5px;
	transition:  all 1.5s ease;
}


.botonNaranjetaHover:hover {
	background-color: #ffc176;
	color: black;
	border: black solid .5px;
	transition:  all 1.5s ease;
}



.botonRosa:hover {
    background-color: pink;
	transition:  all 1.5s ease;
}

.botonCeleste:hover {
	background-color: #2980b9;
	color: white;
	transition:  all 1.5s ease;
}

.botonAzul {
	background-color: rgb(35, 160, 218);
	color: rgb(54, 54, 54);
}

.botonAzulHover:hover {
	background-color: rgb(35, 160, 218);
	color: rgb(255, 255, 255);
}

.botonVioleta:hover {
	background-color: #ebc4ff;
	color: rgb(78, 78, 78);
	border: rgb(82, 82, 82) solid .2px;
	transition:  all 1.5s ease;
}

.botonVioleta {
	background-color: #d69ff1;
	color: white;
	border: white solid .5px;
}

.botonTiburonHover:hover {
	background-color: #6d8dbf;
	color: white;
	border: white solid .5px;
	transition:  all 1.5s ease;
}


/*-------------------------------ARMADO DE CAJAS-----------------------------*/

.twitter, .instagram, .linkedin, .github, .youtube, .tiktok{
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 3%;
	height: auto;
}

.tiktok {
	background-image: url(../images/tiktok.png);
}

.github {
	background-image: url(../images/github.png);
}

.youtube {
	background-image: url(../images/youtube.png);
}

.twitter {
	background-image: url(../images/twitter.png);
}

.instagram {
	background-image: url(../images/instagram.png);
}

.linkedin {
	background-image: url(../images/linkedin.png);
}

.tiktokHover:hover {
	background-image: url(../images/tiktok_color.png);
}

.githubHover:hover {
	background-image: url(../images/githubColor.png);
}

.youtubeHover:hover {
	background-image: url(../images/youtubeColor.png);
}

.twitterHover:hover {
	background-image: url(../images/twitter.png);
}

.instagramHover:hover {
	background-image: url(../images/instagramColor.png);
}

.linkedinHover:hover {
	background-image: url(../images/linkedinColor.png);
}

.horizontal {
	display: flex;
	flex-direction: wrap;
	justify-content: space-between;
}

.centrarCaja {
	align-items: center;
}

.resizeNone {
	resize: none;
}

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

.adaptarALaCaja {
	width: fit-content;
}

.mostrar {
	display: block;
}

/*-------------------------------BOTONES--------------------------------------*/

.redes {
	margin-top: 2%;
}

button {
	margin-top: 2%;
	padding: 1%;
    font-size: medium;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.button {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

/*CAJA CON BOTONES DE REDES SOCIALES*/
#redes-sociales a {
    display: inline-block;
    margin: 1vw;
    padding: 1.1vw;
	width: 2vw;
}

/*----------------------------------------------------------------------------*/

header {
    justify-content: center;
    text-align: center;
	padding: 2vh;
}

.icon {
	position: absolute;
	margin: 0.5vw;
	background-color: rgba(255, 255, 255, 0.356);
	border: solid 4px rgba(0, 0, 0, 0.507) ;
	border-radius: 30px 30px 30px 30px;
}

.smallIcons {
	max-width: 15%;
	max-height: 15%;
}

.midIcons {
	max-width: 30%;
	max-height: 30%;
}

.iconoAzul {
	background-image: url('../icons/menu.png');
	background-repeat: no-repeat;
	background-size: contain;
}

.nav1 {
	text-align: center;
	align-self: center;
	display: flex;
	align-content: wrap;
	justify-content: space-evenly;
	padding: 1.5vw;
}

.nav1:hover {
	text-shadow: black 1px 1px 1px;
	transition: background-color .3s, color 0.5s;
	cursor: pointer;
	color: #ffffff;
	transition:  all 600ms ease;
}

ul.grilla {
	padding-top: 2vh;
}

li.grilla{
	list-style: none;
	font-size: 2vh;
	margin: .3vw;
	padding: 1vw;
}

.navDesplegable {
	display: flex;
	justify-content: space-around;
}

.navDesplegable .menu {
	list-style: none;
	align-items: center;
}

.navDesplegable .menu > li {
    display: inline-block;
    position: relative;
}

.navDesplegable h1 {
    display: block;
    padding: 10px 20px;
    margin: 0;
    text-decoration: none;
    cursor: pointer;
}

.navDesplegable .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    margin: 0;
    padding: 0;
	color: white;
	text-shadow: 2px 2px 2px #3b3b3b;
	border-radius: 30px 30px 30px 30px;
}


.navDesplegable .menu > li:hover .submenu {
    display: flex;
	flex-direction: row;
}

.navDesplegable .submenu li {
	margin-right: 1vw;
}

.navDesplegable .submenu li:hover {
	cursor: pointer;
}

main {
	background-color: #3b3b3b;
	display: flex;
	flex-direction: column;
	text-align: center;
    align-items: center;
}

.main2 {
	background-color: #3b3b3b;
	display: flex;
	flex-direction: row wrap;
	flex-wrap: wrap;
	text-align: center;
	min-height: 100vh;
    align-items: center;
	
}

.mainTarjeta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
}

p.contenedorTransparente {
  	padding: 20px;
}

.espacioEntreEllos {
	justify-content: space-evenly;
}

.flex {
	display: flex;
	flex-wrap: wrap;
	scrollbar-width: thin;
    scrollbar-color: transparent transparent;

    &::-webkit-scrollbar {
        width: 12px;
    }

    &::-webkit-scrollbar-track {
        background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background-color: transparent;
    }
}

.link {
	margin: 4vh;
}

h3.link:hover {
	cursor: pointer;
	color:  #6c8eff;
}

a {
	text-decoration: none;
}

#subir, #bajar {
	left: 90%;
	z-index: 1;
	position: fixed;
}

#subir:hover {
	border-radius: 90px 90px 0px 0px;   
}

#bajar:hover {
	border-radius: 0px 0px 90px 90px;
}

#subir {
	bottom: 2%;
}

#bajar {
	bottom: 9%;
}

footer {
	text-align: center;
	border-top: solid orange;
	padding-bottom: 4vh;
	position: relative;
	z-index: 2;
}

.fina {
	font-weight: 450;
}

.gruesa {
	font-weight: bold;
}


/*----------------------vista de página------------------------*/

img {
	view-timeline-name: --image;
	view-timeline-axis: block;
	animation-timeline: --image;
	animation-name: show;
	animation-range: entry 25% cover 50%;
	animation-fill-mode: both;
}

.repararTexto {
	text-wrap: balance;
}

.noticia {
	border: 1px solid #444;
	border-radius: 10px;
	padding: 15px;
	margin: 10px 0;
	background: #1e1e1e;
}

.noticia img {
max-width: 60%;
height: auto;
border-radius: 8px;
margin: 10px 0;
}

/*cards*/

.card_muestra {
    cursor: pointer;
    border-radius: 10px;
    padding: 1rem;
    max-width: 300px;
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    margin: 1rem auto;
}

.card_muestra:hover {
    transform: scale(1.03);
}

.card_muestra .imgBx {
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
}

.card_muestra .imgBx img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.card_muestra .content {
    padding: 1rem 0;
    text-align: center;
}

.card_muestra .content .wrapper {
    background-color: #eaeaea;
    padding: 0.5rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.card_muestra .content .wrapper text {
    font-size: 1rem;
    font-weight: bold;
    fill: #333;
}

.card_muestra h4, .card_muestra h5 {
    margin: 0.3rem 0;
    font-family: 'Lato', sans-serif;
}

.video {
	width: 900px;
	height: 500px;
}

/*-------------------------------------------------------------*/

@keyframes iniciarColor {
    from {
        color: #3b3b3b;
    }
    to {
        color: #b6edff;
    }
}

@keyframes iniciarColor2 {
    from {
        color: #3b3b3b;
    }
    to {
        color: #ff9300;
    }
}

/* animation: animate 4s linear infinite */

@keyframes rotar {
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}

@keyframes rotarInverso {
	0%{
		transform: rotate(360deg);
	}
	100%{
		transform: rotate(0deg);
	}
}

@keyframes moverDerLargo {
	from 
	{
		transform: translateX(-50%);
	}
	to {
		transform: translateX(60%);
	}
}

@keyframes moverIzqLargo {
	from 
	{
		transform: translateX(60%);
	}
	to {
		transform: translateX(-50%);
	}
}

@keyframes moverIzqLargo2 {
	0% 
	{
		transform: translateX(150%);
	}
	to {
		transform: translateX(-300%);

	}
}

@keyframes saltar {
	from 
	{
		transform: translateY(-15%);
	}
	to {
		transform: translateY(15%);
	}
}

@keyframes coloresA {
	 from 
	 {
	 	background-color: rgba(243, 198, 113, 0.932);
	 }
	 50%
	 {
	 	background-color: rgb(255, 183, 90)
	 }
	 to 
	 {
		background-color: rgba(243, 198, 113, 0.897);
	 }
}


.letraColores1 {
	animation: letraColoresA 5s linear infinite;
}

@keyframes letraColoresA {
	 from 
	 {
	 	color: rgb(58, 152, 206);
		 text-shadow: 3px 2px 2px rgba(231, 231, 231, 0.308);
	 }
	 25%
	 {
		color: rgb(108, 120, 230);
		text-shadow: 3px 2px 2px rgba(109, 109, 109, 0.671);
	 }
	 50% 
	 {
	 	color: rgb(120, 51, 199);
		text-shadow: 3px 2px 2px rgba(0, 0, 0, 0.836);
		filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.692));
		backdrop-filter: blur(10px);
		border-radius: 50px 50px 50px 50px;
	 }
	 75%
	 {
		color: rgb(108, 120, 230);
		text-shadow: 3px 2px 2px rgba(109, 109, 109, 0.671);
	 }
	 100% 
	 {
		color: rgb(58, 152, 206);
		text-shadow: 3px 2px 2px rgba(231, 231, 231, 0.308);
	 }
}

.letraColores2 {
	animation: letraColores2 5s linear infinite;
}

.letraColores2Hover:hover {
	animation: letraColores2 5s linear infinite;
}

@keyframes letraColores2 {
	from 
	{
		color: rgb(255, 255, 255);
		text-shadow: 3px 2px 2px rgba(255, 235, 192, 0.308);
	}
	25%
	{
	   	color: rgb(255, 241, 111);
	   	text-shadow: 3px 2px 2px rgba(109, 109, 109, 0.822);
	}
	50% 
	{
		color: rgb(255, 198, 42);
	   	text-shadow: 3px 2px 2px rgba(0, 0, 0, 0.836);
	   	filter: drop-shadow(0 0 0.75rem rgba(255, 255, 255, 0.322));
	   	backdrop-filter: blur(10px);
	   	border-radius: 50px 50px 50px 50px;
	}
	75%
	{
		color: rgb(255, 241, 111);
	   	text-shadow: 3px 2px 2px rgba(109, 109, 109, 0.671);
	}
	100% 
	{
		color: rgb(255, 247, 228);
	   	text-shadow: 3px 2px 2px rgba(231, 231, 231, 0.308);
	}
}

.letraColores3 {
	animation: letraColores3 5s linear infinite;
}

@keyframes letraColores3 {
	from 
	{
		color: rgb(124, 191, 202);
	}
	25%
	{
	   	color: rgb(67, 171, 202);
	}
	50% 
	{
		color: rgb(255, 255, 255);
	   	filter: drop-shadow(0 0 0.75rem rgb(36, 131, 219));
	   	backdrop-filter: blur(10px);
	   	border-radius: 50px 0px 50px 0px;
		background-color: rgba(49, 49, 49, 0.856);
		background-image: url(../images/dog.gif);
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
	}
	75%
	{
		color: rgb(67, 171, 202);
	}
	100% 
	{
		color: rgb(124, 191, 202);
	}
}

@keyframes show {
	from {
		opacity: 0;
		scale: 25%;
	}
	to {
		opacity: 1;
		scale: 100%;
	}
}



/*---------------------------------------------------- EFECTOS / ANIMACIONES ---------------------------------------------------------------------*/

@-webkit-keyframes rotate-diagonal-1{0%{-webkit-transform:rotate3d(1,1,0,0deg);transform:rotate3d(1,1,0,0deg)}50%{-webkit-transform:rotate3d(1,1,0,-180deg);transform:rotate3d(1,1,0,-180deg)}100%{-webkit-transform:rotate3d(1,1,0,-360deg);transform:rotate3d(1,1,0,-360deg)}}@keyframes rotate-diagonal-1{0%{-webkit-transform:rotate3d(1,1,0,0deg);transform:rotate3d(1,1,0,0deg)}50%{-webkit-transform:rotate3d(1,1,0,-180deg);transform:rotate3d(1,1,0,-180deg)}100%{-webkit-transform:rotate3d(1,1,0,-360deg);transform:rotate3d(1,1,0,-360deg)}}
@-webkit-keyframes slide-fwd-center{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}100%{-webkit-transform:translateZ(160px);transform:translateZ(160px)}}@keyframes slide-fwd-center{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}100%{-webkit-transform:translateZ(160px);transform:translateZ(160px)}}
@-webkit-keyframes shadow-inset-center{0%{-webkit-box-shadow:inset 0 0 0 0 transparent;box-shadow:inset 0 0 0 0 transparent}100%{-webkit-box-shadow:inset 0 0 14px 0 rgba(0,0,0,.5);box-shadow:inset 0 0 14px 0 rgba(0,0,0,.5)}}@keyframes shadow-inset-center{0%{-webkit-box-shadow:inset 0 0 0 0 transparent;box-shadow:inset 0 0 0 0 transparent}100%{-webkit-box-shadow:inset 0 0 14px 0 rgba(0,0,0,.5);box-shadow:inset 0 0 14px 0 rgba(0,0,0,.5)}}
@-webkit-keyframes kenburns-right{0%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0);-webkit-transform-origin:84% 50%;transform-origin:84% 50%}100%{-webkit-transform:scale(1.25) translateX(20px);transform:scale(1.25) translateX(20px);-webkit-transform-origin:right;transform-origin:right}}@keyframes kenburns-right{0%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0);-webkit-transform-origin:84% 50%;transform-origin:84% 50%}100%{-webkit-transform:scale(1.25) translateX(20px);transform:scale(1.25) translateX(20px);-webkit-transform-origin:right;transform-origin:right}}
@-webkit-keyframes jello-horizontal{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes jello-horizontal{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}

.rotate-diagonal {-webkit-animation:rotate-diagonal-1 .4s linear both;animation:rotate-diagonal-1 .4s linear both}
.rotate-diagonalHover:hover {-webkit-animation:rotate-diagonal-1 .4s linear both;animation:rotate-diagonal-1 .4s linear both}
.slide-fwd-centerHover:hover {-webkit-animation:slide-fwd-center .45s cubic-bezier(.25,.46,.45,.94) both;animation:slide-fwd-center .45s cubic-bezier(.25,.46,.45,.94) both}
.shadow-inset-center {-webkit-animation:shadow-inset-center .4s cubic-bezier(.25,.46,.45,.94) both;animation:shadow-inset-center .4s cubic-bezier(.25,.46,.45,.94) both}
.shadow-inset-center-hover:hover {-webkit-animation:shadow-inset-center .4s cubic-bezier(.25,.46,.45,.94) both;animation:shadow-inset-center .4s cubic-bezier(.25,.46,.45,.94) both}
.rebote{-webkit-animation:jello-horizontal .9s both;animation:jello-horizontal .9s both}
.reboteHover:hover{-webkit-animation:jello-horizontal .9s both;animation:jello-horizontal .9s both}
.acercamientoHover:hover{-webkit-animation:kenburns-right 5s ease-out both;animation:kenburns-right 5s ease-out both}

/*------------------------------------------------------- AFTER | BEFORE PARA TEXTOS ------------------------------------------------------------*/

.texto1, .texto2, .texto3, .texto4 {
	position: relative;
}

.texto1::after, .texto2::after, .texto3::after, .texto4::after {
	content: "";
	position: absolute;
	left: 0;
	top: 90%;
	opacity: 0;
	transform: translateY(20px);
	color: skyblue;
	font-size: 0.7em;
	font-weight: 450;
	margin: 0.1em;
	transition: opacity 1.5s ease, transform 1.5s ease, margin 1.5s ease;
}


.texto1:hover::after {
	content: " es un almacenamiento de código explicado y simplificado";
	opacity: 1;
	transform: translateY(0);
}

.texto2:hover::after {
	content: " Es una fuente de código directo con una explicación resumida pensada para profesionales que ya conocen del tema y sólo precisan recordar fragmentos específicos de código";
	opacity: 1;
	transform: translateY(0);
}


.texto3:hover::after {
	content: " La página busca maximizar recursos y eficiencia por lo que la mejor opción es Ctrl + F (no, acá no hay buscador interno, ¿para qué?)";
	opacity: 1;
	transform: translateY(0);
}

.texto4:hover::after {
	content: " Recorré toda la página hasta encontrar algo que te sirva o interese";
	opacity: 1;
	transform: translateY(0);
}

.texto4:hover::after {
	content: " ";
	opacity: 1;
	transform: translateY(0);
}

/*---------------------------------------------------------------------- ICONOS -------------------------------------------------------------------*/

.icono1{
	background-image: url(../images/calavera.gif);
	background-size: cover;
	background-position: center;
	width: 2vw;
	height: 2vw;
	background-repeat: no-repeat;
}

.icono2{
	background-image: url(../images/anonimous.gif);
	background-size: cover;
	background-position: center;
	width: 2vw;
	height: 2vw;
	background-repeat: no-repeat;
}

.icono3{
	background-image: url(../images/404.gif);
	background-size: cover;
	background-position: center;
	width: 2vw;
	height: 2vw;
	background-repeat: no-repeat;
}

.icono4{
	background-image: url(../images/load.gif);
	background-size: cover;
	background-position: center;
	width: 2vw;
	height: 2vw;
	background-repeat: no-repeat;
}

.icono5{
	background-image: url(../images/error.gif);
	background-size: cover;
	background-position: center;
	width: 2vw;
	height: 2vw;
	background-repeat: no-repeat;
}

.icono6 {
	background-image: url(../images/error2.gif);
	background-size: cover;
	background-position: center;
	width: 2vw;
	height: 2vw;
	background-repeat: no-repeat;
}

.icono7 {
	background-image: url(../images/pirate.gif);
	background-size: cover;
	background-position: center;
	width: 2vw;
	height: 2vw;
	background-repeat: no-repeat;
}


/*CELULARES*/

@media (max-width: 768px) {

	html, body, main {
		padding: 0px;
		margin: 0px;
	}

	main {
		height: 100%;
	}

	.tamanioMed {
		font-size: 10px;
	}
	
	.tamaniopeq {
		font-size: 8px;
	}
	
	.tamanioMin {
		font-size: 5.5px;
	}
	
	.tamanioGran {
		font-size: 20px;
	}
	
	.menu {
		flex-direction: column;
	}

	.centrarItem {
		align-self: center;
	}

	/*CAJA CON BOTONES DE REDES SOCIALES*/
	#redes-sociales a {
		display: inline-block;
		margin-top: 15px;
		padding: 8px;
		width: 2vw;
	}

	/* Adaptar los botones (subir/bajar) */
    #subir, #bajar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        position: fixed;
        bottom: 10px;
        right: 10px;
    }

	/* Oculta los botones en pantallas pequeñas */
	#subir, #bajar {
        display: none;  
    }
	
	.video {
		width: 100%;
		max-width: 450px;
		height: auto;
	}
	
	
}