Oxygenados Com

                    :nth-last-child(1 of .mg-container) {
    background: red;
}
                  

                    .line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}
                  

                    /****
Video Uddo Cracka 
https://www.youtube.com/watch?v=PmYvcEpahuk
***/

/**Aplicar a todos menos al último*/
.clase:not(:last-child){
    background: yellow;
}

/*Aplicar a dos pseudoelementos de dos clases distintas al mimso tiempo
usando WHERE
*/
:where(.clase, .clase-2):before{
    content:"hello";
    background: red;
    color: white;
    padding: 1rem 3rem;
}


/***Preferible hacer los media querys con 
@media (min-width: ***px)
Se evita tener el código normal y luego hacer un 
@media (max-width: ***), con el @media (min-width: ***px) ya sirve de una tacada
**/
/*****EJEMPLO CON @max-width ***/
:where(.clase, .clase-2):before{
    content:"hello";
    background: red;
    color: white;
    padding: 1rem 3rem;
}

@media (max-width: 1200px){
 :where(.clase, .clase-2):before{
   display: none;
   /**** Resto código**/
    }
}
/*****EJEMPLO CON @min-width ***/
@media (min-width: 1200px){
    :where(.clase, .clase-2):before{
        content:"hello";
        background: red;
        color: white;
        padding: 1rem 3rem;
    }
}
/**Ya no hay que poner mas código ***/
/****  FIN EJEMPLO MEDIA QUERYS   *****/


/*** Ajustar tamaño de imagenes con aspect-ratio ****/

.clase-imagen{
    width: 400px;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1;
}

/* Poner el ancho o el alto en auto y el aspect-ratio en un valor hará que las
medidas de la imagen se ajustaran en proporcionalmente al ratio 
al variar el ancho de la pantalla.
*/
                  

                    :root{
	--pre-delay:  2.2s;
}



.pageloader.dimissloader.qita-zIndex{
	z-index: -1;
}
.pageloader.dimissloader .spinner {
	/*visibility:visible;*/
    opacity: 0; 
    transition: .4s opacity  var(--pre-delay)/* 1.7s;*/
}

.pageloader.dimissloader .spinner svg{
    width: 100%;
    display: block;
}

.pageloader.dimissloader:before {
	transition: 1s transform var(--pre-delay);
    transform: translateY(-100%);
	z-index: -1;
}

 .pageloader.dimissloader:after {
	transition: 1s transform var(--pre-delay);
   transform: translateY(100%);
	 z-index: -1;
}

svg [class^="svg-elem-"] {
    fill: transparent;
    -webkit-transition: fill .7s cubic-bezier(.47, 0, .745, .715) ;
    transition: fill .7s cubic-bezier(.47, 0, .745, .715) ;
}

.dimissloader svg [class^="svg-elem-"] {
      fill: rgb(255,255,255); 
}


body.salida .pageloader{
	z-index: 1500;
}
body.salida .pageloader:before {
	transform: translateY(0);
	transition: transform 0.4s;
    transition-delay: 0s;
	z-index: 1500;
} 
body.salida .pageloader:after {
	transform: translateY(0);
	transition: transform 0.4s;
    transition-delay: 0s;
	z-index: 1500;
}

html.ng-scope .pageloader{
   display:none;
}

                  

                    window.addEventListener('DOMContentLoaded', ()=>{ 
	if(window.angular) return
    const body = document.querySelector('body')
	const loader = document.querySelector('.pageloader')
	const sVgs = loader.querySelectorAll('svg [class^="svg-elem-"]')
	
	function quitaZindex(e){
		if(e.propertyName !== 'transform') return 
		this.classList.add('qita-zIndex')
	}
	
	setTimeout(()=>{loader.classList.add('dimissloader')},50)	
	loader.addEventListener('transitionend',quitaZindex)
		
	let retraso = 0
	sVgs.forEach((sv)=>{
	  sv.style.transitionDelay = retraso + 'ms'
	  retraso += 50
	})

	window.addEventListener('beforeunload', function(){
		loader.classList.remove('qita-zIndex')
		body.classList.add('salida')
	}, false)
})