/*PARA CORREGIR EL AUTO AJUSTE DE TEXTO EN ALGUNOS NAVEGADORES*/
html *{ max-height: 1000000px; }
*{ margin: 0; padding: 0; box-sizing: border-box;
	outline: none; word-wrap: break-word; overflow-wrap: break-word;
    word-break: break-word; -webkit-tap-highlight-color: transparent; border: none;
}
body{
	font-family: Roboto,arial,sans-serif; min-height: 100vh; margin: 0 auto;
	color: var(--TEXT); background: var(--BACK-COLOR);
	--PRIMARY: rgba(205,47,124,1);
	--PRIMARY-LIGHTEN: rgba(230,73,149,1);
	--SECONDARY: rgba(59,89,152,1);
	--SECONDARY-LIGHTEN: rgba(119,149,212,1);
	--ORANGE: rgba(255,128,0,1);
	--LIGHT-ORANGE: rgba(255,180,0,1);
	--WHITE: rgba(255,255,255,1);
	--RED: rgba(235,77,65,1);
	--LIGHT-RED: rgba(255,97,85,1);
	--BLUE: rgba(128,128,255,1);
	--GREEN: rgba(100,200,100,1);
	--GOLDEN: rgba(239,184,16,1);
	--SILVER: rgba(138,149,151,1);
	--HALF-GREY: rgba(128,128,128,0.5);
	--FOOTER: rgba(40,45,41,1);
	--WHATSAPP: rgb(37,211,102);
	--TWITTER: rgba(82,174,239);
	--INSTAGRAM: rgba(193,53,132);
	--FACEBOOK: rgba(59,89,152);
	min-height: 100vh; margin: 0 auto;
	position: relative; display: flex; flex-direction: column;
	transition: background .3s, color .3s;
	scrollbar-width: thin; overflow-y: scroll;
}
					body::-webkit-scrollbar {
						width: 12px; height: 12px; background: transparent;
					}
					body::-webkit-scrollbar-thumb{
						background: rgba(128,128,128,.5); -webkit-border-radius: 1ex;
					}

					.stories::-webkit-scrollbar {
			            width: 12px; height: 12px; background: transparent;
			        }
			        .stories::-webkit-scrollbar-thumb{
			            background: rgba(128,128,128,.5); -webkit-border-radius: 1ex;
			        }
	body.light-mode{
		--CHIP: #dbe2f9;
		--BACK-COLOR: rgba(253, 253, 253, 1);
		--BACK-LAYER-1: rgba(255, 255, 255, 1);
		--BACK-LAYER-2: rgba(245, 245, 245, 1);
		--BACK-LAYER-3: rgba(235, 235, 235, 1);

		--TEXT: rgba(0,0,0,0.8);
		--TEXT-WEAK: rgba(61,61,61,.8);

		--TEXT-WEAK-1: rgba(15,15,15,0.8);
		--TEXT-WEAK-2: rgba(30,30,30,0.8);
		--TEXT-WEAK-3: rgba(50,50,50,0.8);
		--TEXT-WEAK-4: rgba(75,75,75,0.8);
		--TEXT-WEAK-5: rgba(105,105,105,0.8);

		--NAV: rgba(255,255,255,.1);
		--NAV-SCROLLED: rgba(255,255,255,.8);

		--SPINNER-BACK: rgba(255,255,255,.75);
		--SPINNER-COLOR: rgb(59,89,152);
        --SOFT-GREY: rgba(230,230,230,1);
	}
	body.dark-mode{
		--CHIP: #3f4659;
		--BACK-COLOR: rgba(26,26,26,1);
		--BACK-LAYER-1: rgba(36, 36, 36, 1);
		--BACK-LAYER-2: rgba(46, 46, 46, 1);
		--BACK-LAYER-3: rgba(56, 56, 56, 1);

		--TEXT: rgba(255,255,255,0.9);
		--TEXT-WEAK: rgba(194,194,194,0.9);

		--TEXT-WEAK-1: rgba(245,245,245,1);
		--TEXT-WEAK-2: rgba(235,235,235,1);
		--TEXT-WEAK-3: rgba(215,215,215,1);
		--TEXT-WEAK-4: rgba(190,190,190,1);
		--TEXT-WEAK-5: rgba(160,160,160,1);

		--NAV: rgba(25,25,25,.1);
		--NAV-SCROLLED: rgba(25,25,25,.8);

		--SPINNER-BACK: rgba(26,26,26,.75);
		--SPINNER-COLOR: rgb(230,73,149);
        --SOFT-GREY: rgba(50,50,50,1);
	}
/*CONTENID DE LA PAGINA*/
.page-content{
	display: flex; flex-direction: column; margin: 0 auto 5em auto; 
	width: 100%; max-width: 1280px; min-height: 500px;
}
/*NORMALS*/
.link{
	text-decoration: none; display: inline-block; position: relative; 
	color: var(--TEXT); line-height: 1.5em; transition: color 0.3s ease;
	cursor: pointer; font-weight: 400;
}
	.link.active{color: var(--PRIMARY-LIGHTEN);}
	.link > i{padding: 0 0.15em;}
form{position: relative;}
.small, small {
    display: block; position: relative; width: 100%; font-size: .85em;
    font-weight: 400; color: var(--TEXT); transition: color 0.3s ease;
}
.text, p{
	display: block; position: relative; font-size: 1em; font-weight: 400;
	line-height: 1.5em; color: var(--TEXT);
	transition: 0.3s ease; margin-top: 0.25em; margin-bottom: 0.75em;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
	display: block; position: relative; color: var(--TEXT); 
	line-height: 1.1; font-weight: 400; transition: color 0.3s ease; margin-bottom: 0.5rem;
}
.h1, h1{font-size: 3em;}
.h2, h2{font-size: 2.5em;}
.h3, h3{font-size: 2em;}
.h4, h4{font-size: 1.5em;}
.h5, h5{font-size: 1.25em;}
.h6, h6{font-size: 1em;}
/*FORMS*/
select{
	display: block; position: relative; background: var(--BACK-COLOR);
	-moz-appearance: none; width: 100%; padding: .25em .5em; cursor: pointer;
	border-bottom: 1px solid var(--PRIMARY); color: var(--TEXT-WEAK-1); 
	transition: color 0.3s ease, background 0.3s ease;
}
input[type = "text"], input[type = "date"], input[type = "email"], input[type = "number"], input[type = "password"]{
	display: block; position: relative; padding: .5em .75em; font-size: 1em;
	background: var(--BACK-COLOR); border: 1px solid var(--HALF-GREY);
	color: var(--TEXT-WEAK-1); outline: none; width: 100%; 
	transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;
}
textarea{
	display: block; position: relative; padding: .5em .75em; font-size: 1em;
	background: var(--TRANSPARENT-0); border: .05em solid var(--TEXT-15);
	color: var(--TEXT-1); outline: none; width: 100%; font-family: inherit;
	height: 10em; resize: none; outline: none;
	transition: background .3s, border .3s, color .3s;
}
/*-------------------------------CONFIG PREV----------------------*/
/*BLOCK*/
.desktop-only{display: block !important;}
.desktop-only-ib{display: inline-block !important;}
.mobile-only{display: none !important;}
/*FLEX*/
.desktop-only-flex{display: flex !important;}
.mobile-only-flex{display: none !important;}
.only-below-950{display: none !important;}
/*NEW*/
.hide-on-desktop{display: none !important;}

.no-scroll{ position: fixed; overflow-y: scroll; }
/*COLORES*/
.color-white{color: var(--WHITE) !important;}
.color-green{color: var(--GREEN) !important;}
.color-red{color: var(--RED) !important;}
.color-blue{color: var(--BLUE) !important;}
.color-silver{color: var(--SILVER) !important;}
.color-purple{color: var(--PURPLE) !important;}
.color-ultra-purple{color: var(--ULTRA-LIGHT-PURPLE) !important;}
.color-light-purple{color: var(--LIGHT-PURPLE) !important;}
.color-golden{color: var(--GOLDEN) !important;}
.color-orange{color: var(--ORANGE) !important;}
.color-whatsapp{color: var(--WHATSAPP) !important;}
.color-text{color: var(--TEXT-1) !important;}
/*BACKGROUND*/
.back-white{background: var(--WHITE) !important;}
.back-green{background: var(--GREEN) !important;}
.back-red{background: var(--RED) !important;}
.back-blue{background: var(--BLUE) !important;}
.back-silver{background: var(--SILVER) !important;}
.back-purple{background: var(--PURPLE) !important;}
.back-ultra-purple{background: var(--ULTRA-LIGHT-PURPLE) !important;}
.back-light-purple{background: var(--LIGHT-PURPLE) !important;}
.back-golden{background: var(--GOLDEN) !important;}
.back-orange{background: var(--ORANGE) !important;}
.back-whatsapp{background: var(--WHATSAPP) !important;}
.back-nackground{background: var(--BACKGROUND-COLOR) !important;}
.back-clear{background: var(--BACK-CLEAR) !important;}
/*404*/
.page-404{
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	width: 100%; min-height: 60vh; max-height: 100px; max-width: 1700px; margin: 0 auto;
	text-align: center;
}
	.page-404 > h1{
		display: flex; align-items: center; font-size: 8em; color: var(--TEXT-12);
		transition: all .3s;
	}
		.page-404 > h1 > b{
			display: block; position: relative; font-weight: 400;
		}
			.page-404 > h1 > b:nth-child(1){
				transform: rotate(25deg); right: -.5rem;
			}
			.page-404 > h1 > b:nth-child(3){
				transform: rotate(-30deg); bottom: -.7rem; left: -1rem;
			}
		.page-404 > h1 > span{
			display: block; position: relative; width: 6rem; height: 6rem;
			border-radius: 50%; border: .5rem solid var(--TEXT-12); transition: all .3s;
		}
			.page-404 > h1 > span > i{
				display: block; position: absolute; font-size: 4rem; top: 50%;
				left: 50%; color: var(--TEXT-12); transform: translate(-50%, -50%);
				transition: all .3s;
			}
	.page-404 > h2{
		font-size: 2em; color: var(--TEXT-1); font-weight: 400; transition: all .3s;
	}
	.page-404 > h3{
		font-size: 1em; color: var(--TEXT-1); max-width: 300px; font-weight: 400;
		margin: 1em 0 0 0; transition: all .3s;
	}
.container{
	display: block; position: relative; width: 100%; max-width: 1000px; margin: 1em auto;
}
.container-small{
	display: block; position: relative; width: 100%; max-width: 800px; margin: 1em auto;
}
/*buttons*/
.button{
	display: inline-block; position: relative; text-transform: none; 
	padding: 0.75rem 1.25rem; border: none; border-radius: 4px; cursor: pointer; 
	color: var(--TEXT); text-decoration: none; font-size: 1em; text-align: center; 
	transition: color 0.3s ease; margin: 0 0.25em; background-color: transparent;
}
	/*BUTTON ICON*/
	.button > i.left{margin-right: 1rem;}
	.button > i.right{margin-left: 1rem;}
/*BUTTON WITH ICON ONLY*/
.button.button-icon{ padding: 0.75rem 0.5rem; }
/*BUTTON BLOCK LEVEL*/
.button.button-block{ display: block; width: 100%; }
/*BUTTON SIZES*/
/*BUTTON LARGE*/
.button.button-large{padding: 1rem 1.5rem; font-size: 1.1em;}
.button.button-large > i.left{margin-right: 1.5rem;}
.button.button-large > i.right{margin-left: 1.5rem;}
/*BUTTON SMALL*/
.button.button-small{padding: 0.5rem .75rem;}
.button.button-small > i.left{margin-right: 0.75rem;}
.button.button-small > i.right{margin-left: 0.75rem;}
/*BUTTON TINY*/
.button.button-tiny{padding: 0.35rem 0.6rem; font-size: 0.9em;}
.button.button-tiny > i.left{margin-right: 0.5rem;}
.button.button-tiny > i.right{margin-left: 0.5rem;}
/*BUTTONS VARIABLES*/
.button.button-primary{
	background: var(--PRIMARY); color: var(--WHITE); 
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}
.button.button-secondary{
	background: var(--SECONDARY); color: var(--WHITE);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}
.button.button-danger{
	background: var(--RED); color: var(--WHITE);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}
/*LIST BTN*/
.menu-btn{
	position: relative; display: block; padding: 1em; font-size: 0.95em; text-decoration: none; color: inherit;
}
			.menu-btn:hover{ background-color: rgba(128,128,128,0.1); }
	.menu-btn > i{ margin-right: 0.5em; color: var(--TEXT-WEAK); transition: color .3s; }
.nav-list-btn{
	display: block; position: relative; padding: .75em 1em; margin: .1em 0;
	text-decoration: none; color: var(--TEXT); font-size: 0.95em; font-weight: 400; 
	cursor: pointer; overflow: hidden; text-overflow: ellipsis;
	white-space: nowrap; transition: color .3s, background .3S;
}
.nav-list-btn:hover{ background-color: rgba(128,128,128,.1); }
			.active.nav-list-btn{ background: rgba(128,128,128,.25); }
			.active.nav-list-btn::before{ width: 100%; }
	.nav-list-btn > i{
		width: 1.5em; font-size: 1.15em; padding: .1em .2em .1em 0;
	}
/*SWITCH*/
.switch-box{ display: block; position: relative; margin: .35em 0; font-size: 0.95em; }	
.switch-box:hover{ background-color: rgba(128,128,128,.1); }
	.switch-box input[type="checkbox"]{display: none;}
	.switch-box label{
		display: flex; align-items: center; justify-content: flex-end; 
		position: relative; width: 100%; cursor: pointer;
	}
		/*TEXTO*/
		.switch-box label p{
			flex: 10; display: block; position: relative; padding: .5em .15em .5em 1em;
			margin: 0; width: 100%; font-size: 1.05em; font-weight: 400;
			color: var(--TEXT); transition: color .3s;
		}
		/*DIV INTERNO*/
		.switch-box-icon{
			font-size: 0.9em; display: block; position: relative;
			height: 1.4em; width: 2.55em; margin: 0 .25em; border-radius: .7em;
			background: rgba(117,117,117,1); transition: background .3s, box-shadow .3s;
		}
			/*ESFERA*/
			.switch-box-icon-ball{
				display: block; position: absolute; height: 1.3em; width: 1.3em;
				top: 50%; /*right: 100%;*/ transform: translate(0,-50%); border-radius: 50%;
				box-shadow: 0 0 0 .05em rgba(117,117,117,1); background: rgba(250,250,250,1);
				transition: transform .3s ease-in-out, box-shadow .3s, background .3s;
			}
	.switch-box input[type="checkbox"]:checked + label .switch-box-icon .switch-box-icon-ball{
		transform: translate(100%,-50%); /*right: 0;*/ box-shadow: 0 0 0 .05em rgba(75,75,75);
	}
	.switch-box input[type="checkbox"]:checked + label .switch-box-icon{
		box-shadow: none; background: rgba(75,75,75);
	}
/*CLOSE BUTTON*/
.button-close{
	display: flex; position: absolute; width: 1.5rem; height: 1.5rem;
	top: 0; right: 0; align-items: center; color: var(--TEXT-WEAK-3); justify-content: center;
}
	.button-close:before{
		content: '×'; display: block; position: relative; font-size: 2.5rem;
	    cursor: pointer; line-height: 0.5; font-weight: 100; transition: color 0.3s ease;
	}
/*ICONOS*/
.icon{
	font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; 
	font-weight: 300;
}
	.icon.icon-large{font-size: 1.5em;}
	.icon.icon-close:before{
		content: '×'; display: inline-block; position: relative; font-style: normal;
	}
/*//////////////////////////BOX STYLE////////////////////////*/
/*OVERFLOW HIDDEN*/
.overflow-ellipsis{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.break-grid-cols{ grid-column: 1/-1; }
/*SHADOW*/
.card-shadow{ box-shadow: 0 0 0.08em rgba(0,0,0,0.5); }
/*BORDER*/
.transition-3{transition: all .3s !important;}
.border-05{border-style: solid;border-width: .05em;}
.border-t-05{border-top-style: solid;border-top-width: .05em;}
.border-r-05{border-right-style: solid;border-right-width: .05em;}
.border-b-05{border-bottom-style: solid;border-bottom-width: .05em;}
.border-l-05{border-left-style: solid;border-left-width: .05em;}

.border-1{border-style: solid;border-width: .1em;}
.border-t-1{border-top-style: solid;border-top-width: .1em;}
.border-r-1{border-right-style: solid;border-right-width: .1em;}
.border-b-1{border-bottom-style: solid;border-bottom-width: .1em;}
.border-l-1{border-left-style: solid;border-left-width: .1em;}

.border-2{border-style: solid;border-width: .2em;}
.border-t-2{border-top-style: solid;border-top-width: .2em;}
.border-r-2{border-right-style: solid;border-right-width: .2em;}
.border-b-2{border-bottom-style: solid;border-bottom-width: .2em;}
.border-l-2{border-left-style: solid;border-left-width: .2em;}
    .border-white{border-color: var(--WHITE) !important;}
    .border-green{border-color: var(--GREEN) !important;}
    .border-red{border-color: var(--RED) !important;}
    .border-blue{border-color: var(--BLUE) !important;}
    .border-silver{border-color: var(--SILVER) !important;}
    .border-purple{border-color: var(--PURPLE) !important;}
    .border-ultra-purple{border-color: var(--ULTRA-LIGHT-PURPLE) !important;}
    .border-light-purple{border-color: var(--LIGHT-PURPLE) !important;}
    .border-golden{border-color: var(--GOLDEN) !important;}
    .border-orange{border-color: var(--ORANGE) !important;}
    .border-whatsapp{border-color: var(--WHATSAPP) !important;}
    .border-text{border-color: var(--MAIN-TEXT) !important;}
/* ALINEAMIENTO ALTERNO */
.align-center{align-items: center;}
.align-top{align-items: start;}
.align-bottom{align-items: end;}
.justify-center{justify-content: center;}
.justify-sp-ar{justify-content: space-around;}
.justify-sp-bt{justify-content: space-between;}
/* RELATIVE */
.relative{position: relative;}
/*    BLOCK     */
.block{display: block;}
/*    FLEX      */
.flex{display: flex;}
.flex-dir-col{flex-direction: column;}
.flex-dir-row{flex-direction: row;}
/*    GRIDS, COLS      */
.grid{display: grid;}
.gap-25{grid-gap: .25em;}
.gap-5{grid-gap: .5em;}
.gap-75{grid-gap: .75em;}
.gap-1{grid-gap: 1em;}
.gap-15{grid-gap: 1.5em;}
.gap-2{grid-gap: 2em;}
/*COLUMN*/
.gap-col-25{grid-column-gap: .25em;}
.gap-col-5{grid-column-gap: .5em;}
.gap-col-75{grid-column-gap: .75em;}
.gap-col-1{grid-column-gap: 1em;}
.gap-col-15{grid-column-gap: 1.5em;}
.gap-col-2{grid-column-gap: 2em;}
/*ROW*/
.gap-row-25{grid-row-gap: .25em;}
.gap-row-5{grid-row-gap: .5em;}
.gap-row-75{grid-row-gap: .75em;}
.gap-row-1{grid-row-gap: 1em;}
.gap-row-15{grid-row-gap: 1.5em;}
.gap-row-2{grid-row-gap: 2em;}
/* COLS */
.grid-cols-1{grid-template-columns: 1fr;}
.grid-cols-2{grid-template-columns: repeat(2, 1fr);}
.grid-cols-3{grid-template-columns: repeat(3, 1fr);}
.grid-cols-4{grid-template-columns: repeat(4, 1fr);}
.grid-cols-5{grid-template-columns: repeat(5, 1fr);}
.grid-cols-6{grid-template-columns: repeat(6, 1fr);}
.grid-cols-7{grid-template-columns: repeat(7, 1fr);}
.grid-cols-8{grid-template-columns: repeat(8, 1fr);}
.grid-cols-9{grid-template-columns: repeat(9, 1fr);}
.grid-cols-10{grid-template-columns: repeat(10, 1fr);}
.grid-cols-11{grid-template-columns: repeat(11, 1fr);}
.grid-cols-12{grid-template-columns: repeat(12, 1fr);}
/* ANCHO Y ALTO DE LOS ITEMS DE UN GRID */
    /*COLS SPAN*/
    .grid-col-1{grid-column: span 1;}
    .grid-col-2{grid-column: span 2;}
    .grid-col-3{grid-column: span 3;}
    .grid-col-4{grid-column: span 4;}
    .grid-col-5{grid-column: span 5;}
    .grid-col-6{grid-column: span 6;}
    .grid-col-7{grid-column: span 7;}
    .grid-col-8{grid-column: span 8;}
    .grid-col-9{grid-column: span 9;}
    .grid-col-10{grid-column: span 10;}
    .grid-col-11{grid-column: span 11;}
    .grid-col-12{grid-column: span 12;}
    /*FILAS*/
    .grid-row-1{grid-row: span 1;}
    .grid-row-2{grid-row: span 2;}
    .grid-row-3{grid-row: span 3;}
    .grid-row-4{grid-row: span 4;}
    .grid-row-5{grid-row: span 5;}
    .grid-row-6{grid-row: span 6;}
    .grid-row-7{grid-row: span 7;}
    .grid-row-8{grid-row: span 8;}
    .grid-row-9{grid-row: span 9;}
    .grid-row-10{grid-row: span 10;}
    .grid-row-11{grid-row: span 11;}
    .grid-row-12{grid-row: span 12;}
/*|1||1||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
@media screen and (max-width: 700px)
{
    .break-mobile-grid-cols{grid-column: 1/-1;}
    /*ALINEAMIENTO*/
    .mobile-text-center{text-align: center !important;}
    .mobile-text-right{text-align: right !important;}
    .mobile-text-left{text-align: left !important;}
    /*    GRIDS, COLS      */
    .grid-mobile-cols-1{grid-template-columns: 1fr !important;}
    .grid-mobile-cols-2{grid-template-columns: repeat(2, 1fr) !important;}
    .grid-mobile-cols-3{grid-template-columns: repeat(3, 1fr) !important;}
    .grid-mobile-cols-4{grid-template-columns: repeat(4, 1fr) !important;}
    .grid-mobile-cols-5{grid-template-columns: repeat(5, 1fr) !important;}
    .grid-mobile-cols-6{grid-template-columns: repeat(6, 1fr) !important;}
    .grid-mobile-cols-7{grid-template-columns: repeat(7, 1fr) !important;}
    .grid-mobile-cols-8{grid-template-columns: repeat(8, 1fr) !important;}
    .grid-mobile-cols-9{grid-template-columns: repeat(9, 1fr) !important;}
    .grid-mobile-cols-10{grid-template-columns: repeat(10, 1fr) !important;}
    .grid-mobile-cols-11{grid-template-columns: repeat(11, 1fr) !important;}
    .grid-mobile-cols-12{grid-template-columns: repeat(12, 1fr) !important;}
    /* ANCHO Y ALTO DE LOS ITEMS DE UN GRID */
    /*COLUMNAS*/
    .grid-mobile-col-1{grid-column: span 1;}
    .grid-mobile-col-2{grid-column: span 2;}
    .grid-mobile-col-3{grid-column: span 3;}
    .grid-mobile-col-4{grid-column: span 4;}
    .grid-mobile-col-5{grid-column: span 5;}
    .grid-mobile-col-6{grid-column: span 6;}
    .grid-mobile-col-7{grid-column: span 7;}
    .grid-mobile-col-8{grid-column: span 8;}
    .grid-mobile-col-9{grid-column: span 9;}
    .grid-mobile-col-10{grid-column: span 10;}
    .grid-mobile-col-11{grid-column: span 11;}
    .grid-mobile-col-12{grid-column: span 12;}
    /*FILAS*/
    .grid-mobile-row-1{grid-row: span 1;}
    .grid-mobile-row-2{grid-row: span 2;}
    .grid-mobile-row-3{grid-row: span 3;}
    .grid-mobile-row-4{grid-row: span 4;}
    .grid-mobile-row-5{grid-row: span 5;}
    .grid-mobile-row-6{grid-row: span 6;}
    .grid-mobile-row-7{grid-row: span 7;}
    .grid-mobile-row-8{grid-row: span 8;}
    .grid-mobile-row-9{grid-row: span 9;}
    .grid-mobile-row-10{grid-row: span 10;}
    .grid-mobile-row-11{grid-row: span 11;}
    .grid-mobile-row-12{grid-row: span 12;}
}
/*//////////////////////////BUTTONS////////////////////////*/
.disabled-element{ pointer-events: none; color: var(--SILVER) !important; border-color: var(--SILVER) !important;}
/*BOTON DE CERRAR UNA VENTANA O MENU*/
.btn-close{
    position: absolute; font-size: 1.75rem; padding: .1em; right: .5em; top: 50%;
    transform: translateY(-50%); color: var(--TEXT-1); cursor: pointer;
    transition: color .3s;
}
/*BOTON DE PELIGRO*/
.btn-danger{
	display: block; position: relative; text-decoration: none; text-align: center; 
	font-size: 1.1em; border: none; color: var(--WHITE); background: var(--RED);
	cursor: pointer; border: none; overflow: hidden;
	text-overflow: ellipsis; white-space: nowrap;
}
	.btn-danger > i{ padding: .15em .25em; }
.btn-primary{
	display: block; position: relative; text-decoration: none; text-align: center;
	font-size: 1.1em; border: none; color: var(--WHITE); font-weight: 500;
	background: var(--PURPLE); cursor: pointer; border: none; outline: none;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	transition: background .3s;
}
	.btn-primary:hover{ background: var(--LIGHT-PURPLE); }
	.btn-primary > i{ padding: .15em .25em; }
			.btn-primary.active{ background: var(--ULTRA-LIGHT-PURPLE); }
/* BOTON SIMPLE */
.btn{
	display: flex; align-items: center; justify-content: center; outline: none;
	text-decoration: none; position: relative; font-size: 1.1em;
	background: transparent; border: none; color: var(--TEXT-3); font-weight: 400;
	cursor: pointer; overflow: hidden; text-overflow: ellipsis;
	white-space: nowrap; transition: color .3s;
}
	.btn > i, .btn > p{ padding: .15em; }
	.btn > p{
		overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	}
	.btn > i{ color: var(--TEXT-4); transition: color .3s; }
	.btn:hover{ color: var(--LIGHT-PURPLE); }
	.btn:hover > i{ color: var(--LIGHT-PURPLE); }
	.btn.active{ color: var(--LIGHT-PURPLE); }
	.btn.active > i{ color: var(--LIGHT-PURPLE); }
/*BOTONES DE CONTACTO*/
.btn-contact{
	font-size: 0.9em; text-align: center; text-decoration: none; text-transform: uppercase;
	height: 2.85rem; width: 100%; margin: 0; font-weight: 500; border: none;
	position: relative; text-decoration: none; color: var(--WHITE); background: var(--PURPLE);
	cursor: pointer; line-height: 2.85rem; overflow: hidden; text-overflow: ellipsis;
	white-space: nowrap; transition: background .3s, filter .3s;
}
	/*BOTON DE CONTACTO ALTERNATIVO*/
	.btn-contact-alternative{
		font-size: 1rem; text-decoration: none; position: relative; text-align: center;
    	min-width: 3rem; color: var(--TEXT-WEAK-3); cursor: pointer;
		text-transform: uppercase; margin: 0 0.25rem; padding: 0 0.5rem; height: 2rem;
		overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
		transition: background-color .3s, border .3s, color .3s;
	}	
		.btn-contact-alternative > i{ font-size: 1.25em; line-height: 2rem; }
		.btn-contact-alternative > span{ font-size: 0.75em; }
/* BOTON DE UNA LISTA DE UBICACIONES */
.btn-location-item{
	display: grid; grid-template-columns: 3fr 1fr; grid-gap: .15em; padding: .25em .25em;
	position: relative; text-decoration: none; color: var(--TEXT-WEAK-1);
	font-size: 1.25em; padding: .35em .25em; overflow: hidden; text-overflow: ellipsis;
	white-space: nowrap; transition: color .3s, background .3s;
}
	.btn-location-item:hover > p{ padding: 0 0 0 1.25em; }
	.btn-location-item:hover > p > i{ display: block; }
		.btn-location-item > p{
			display: block; position: relative; overflow: hidden; text-overflow: ellipsis;
			white-space: nowrap; padding: 0 0 0 0; transition: all 0.3s ease;
		}
			.btn-location-item > p > i{
				animation: fade_in .75s; display: none; position: absolute; left: 0em;
				top: 50%; transform: translateY(-50%); color: var(--LIGHT-PURPLE);
				font-size: 1.1em; padding: .1em;
			}
		.btn-location-item > small{
			display: block; position: relative; font-style: oblique; font-size: .9em;
            color: var(--TEXT-7); text-align: right; transition: color .3s;
        }
/* ICONOS DE REDES SOCIALES */
.facebook-icon{
	color: rgba(59,89,159,1) !important;
	background-image: radial-gradient( circle, var(--WHITE) 40%, transparent 50%);
}
.twitter-icon{ color: rgba(85,172,238,1) !important; }
/*PAGINACION*/
.btn-pag-container{
	display: inline-block; white-space: nowrap; align-items: center; overflow: hidden;
	transition: background .3s;
}
			/*NUEVA PAGINACION*/
			.btn-pag-container nav{ display: flex; list-style: none; max-width: 100%; flex-wrap: wrap; justify-content: center;}
				.btn-pag-container nav ul{ display: flex; list-style: none; max-width: 100%; flex-wrap: wrap; justify-content: center;}
					.btn-pag-container nav ul .page-item{
						position: relative; white-space: nowrap; font-size: 1.25em;
						text-decoration: none; color: var(--TEXT-WEAK-3);
						cursor: pointer; margin: 0 0.25em;
					}
						.page-item a{
							display: block; position: relative; text-decoration: none;
							color: inherit; padding: .2em .5em .2em .5em;
						}
						.page-item span{padding: .2em .5em .2em .5em;  display: block;} 
						.page-item{ display: block; }
						.page-item:first-child,
						.page-item:last-child,
						.page-item.active,
						.page-item.disabled{ display: block; }
					.btn-pag-container nav ul .page-item.disabled{
						pointer-events: none; color: var(--SILVER);
					}
					.btn-pag-container nav ul .page-item.active{
						background: var(--PRIMARY); color: var(--WHITE); pointer-events: none;
					}
	.btn-pag-content{ display: flex; list-style: none; }
.btn-pag{
	position: relative; white-space: nowrap; font-size: 1.25em; padding: .25em .6em;
	text-decoration: none; color: var(--TEXT-3); cursor: pointer;
	transition: color .3s, background .3s;
}
	.btn-pag:hover{
		background: var(--LIGHT-PURPLE); color: var(--WHITE);
	}
	.btn-pag.current{
		background: var(--LIGHT-PURPLE); color: var(--WHITE); pointer-events: none;
	}
	.btn-pag.null{ pointer-events: none; }
/*ENLACES DE UBICACION*/
/* EL CONTENEDOR PADRE SIEMPRE DEBE SER DE TIPO GRID PARA QUE FUNCIONE CORRECTAMENTE*/
.location-links{
	display: flex; align-items: center; max-width: 100%; margin: 0 auto 0 0;
	overflow: hidden; position: relative;
}
	.location-links:before{
		content: ''; display: block; position: absolute; top: 50%; left: 1rem;
		transform: translateY(-50%); width: 70%;
		height: 0.1em; background: var(--TEXT-7); transition: background .3s;
	}
	.location-links a{
		display: flex; align-items: center; justify-content: center; position: relative;
		text-decoration: none; color: var(--TEXT-3); padding: .4em .5em; height: 2.2em;
		margin: 0 .7em 0 0; background: var(--BACKGROUND-COLOR); border: .5px solid var(--TEXT-7);
		border-radius: .35em; overflow: hidden;
		transition: color .3s, border .3s, background .3s;
	}
			.location-links a:hover{
				color: var(--MAIN-TEXT); border: .05em solid var(--MAIN-TEXT);
			}
	.location-links a p{
		display: block ; position: relative; padding: 0; overflow: hidden;
		text-overflow: ellipsis; white-space: nowrap;
	}
	.location-links a i{ display: block; position: relative; }
	.location-links a span{
		display: block; position: relative; padding-right: .15em;
	}
/*BOTON DE MAS FLOTANTE*/
.floating-more-icon{
	display: block; position: absolute; width: 2.5em; height: 2.5em;
	background: var(--PURPLE); border-radius: 50%; z-index: 100;
	box-shadow: 0 0 .25em rgba(50,50,50,1); cursor: pointer; overflow: hidden;
	transition: background .5s;
}
	.floating-more-icon > span{
		display: block; position: absolute; width: 60%; height: .25em;
		background: rgba(240,240,240,1); top: 1.125em; border-radius: .25em;
		left: 50%; transform: translateX(-50%); transition: transform .5s ;
	}
		.floating-more-icon > span:nth-child(1){}
		.floating-more-icon > span:nth-child(2){
			transform: translateX(-50%) rotate(90deg);
		}
	/*CUANDO ESTA ACTIVO*/
	.floating-more-icon.active{ background: var(--ULTRA-LIGHT-PURPLE); }
		.floating-more-icon.active > span:nth-child(1){
			transform: translateX(-50%) rotate(180deg);
		}
		.floating-more-icon.active > span:nth-child(2){
			transform: translateX(-50%) rotate(180deg);
		}

/*//////////////////////////ACCOUNT////////////////////////*/
.account-window{ display: block; position: relative; width: 100%; }
	/*CONTENEDOR*/
	.account-window-container{
		display: flex; position: relative; width: 80%; margin: 0 auto;
		padding: .5em 1em 1.5em 1em;
	}
		/*INFO DE LA CUENTA*/
		.account-card-container{ display: block; position: relative; width: 27%; }
			.account-card{
				display: block; position: sticky; top: 5.5em; padding: .5em; margin: 0 1em;
				background: var(--BACK-LAYER-1); box-shadow: 0 0 .2em rgba(0,0,0,.25);
				box-shadow: 0 0 .08em rgba(0,0,0,.5); overflow: hidden;
				transition: background .3s;
			}
				/*HEAD*/
				.account-card-head{
					display: grid; grid-gap: .5em; position: relative; width: 100%;
				}
						.account-card-head::before{
							content: ''; display: block; position: absolute; width: 100%;
							padding-top: calc(25% + .75em); top: 0; left: 0;
							background: rgba(128,128,128,.0); z-index: 0;
						}
					.account-card-head-icon{
						display: block; position: relative; margin: .75em auto 0 auto;
						width: 50%; padding-top: 50%; border-radius: 50%;
						transition: background .3s, box-shadow .3s;
					}	
							.account-card-head-icon a{
								display: block; position: absolute; top: 50%; left: 50%; 
								transform: translate(-50%, -50%); font-size: 6em;
								color: var(--TEXT-7); transition: color .3S;
							}
								.account-card-head-icon a:hover{ color: var(--LIGHT-PURPLE); }
					.account-card-head-text{
						padding: 0 .5em .5em .5em; top: -.5em; display: block;
						position: relative;	z-index: 1;
						box-shadow: 0 -2em 3em 1em var(--BACK-LAYER-1);
						background: var(--BACK-LAYER-1);
						transition: background .3s, box-shadow .3s;
					}
						.account-card-head-text > h3{
							display: block; position: relative; text-align: center;
							font-size: 1.35em; font-weight: 400; color: var(--TEXT-1);
							transition: color .3s;
						}
						.account-card-head-text > small{
							display: block; position: relative; text-align: center;
							color: var(--TEXT-10); transition: color .3s;
						}			
				/*DATA*/
				.account-card-data{ display: block; position: relative; padding: .5em 0; }
					.account-card-data > p{
						display: flex; align-items: center; position: relative; color: var(--TEXT-10);
						font-size: .8em; transition: color .3s;
					}
					.account-card-data > p > i{ padding: .15em .25em; }
		/*ESTADO DE LA CUENTA*/
		.account-status{
			display: block; grid-gap: 1em; position: relative; width: 73%; padding: 0 .5em;
		}
			/*CREDITOS*/
			.account-status-credits{
				display: block; position: relative; padding: 1em .5em;
				border-bottom: .1em solid rgba(128,128,128,.5);
				transition: background .3s;
			}
				.account-status-credits > h3{
					display: block; position: relative; text-align: center; font-size: 1.5em;
					font-weight: 400; color: var(--TEXT-1); ransition: color .3s;
				}
					.account-status-credits > h3 > a{
						font-size: .65em; font-style: oblique; padding: .1em;
					}
				.account-status-credits > h1{
					padding: .25em .1em; display: block; position: relative;
					text-align: center; font-size: 4.5em; font-weight: 300;
					color: var(--MAIN-TEXT); transition: color .3s;
				}
					.account-status-credits > h1 > i{
						font-size: .75em; padding: .15em 0 .15em .25em; color: var(--GOLDEN);
					}
					.account-status-credits > h1 > span{ font-size: .5em; color: var(--GOLDEN); }
				/*ACCIONES*/
				.account-status-credits-actions{
					display: grid; position: relative; align-items: center; text-align: center;
				}
			/*ESTADO DE LACUENTA*/
			.account-status-state{
				display: block; position: relative; padding: .5em; transition: border .3s;
			}
				.emoji-big{
					display: block; position: relative; text-align: center; padding: 1rem .1em;
					font-size: 5em; color: var(--EMOJI);
				}
				/*CONTENEDOR DE ANUNCIS ELIMINADOS DE LA CUENTA POR INFRINGIR LAS NORMAS*/
				.account-status-deleted-ads{
					display: grid; grid-gap: 2em; position: relative; padding: .5em;
				}
			/*MENU RESPONSIVE DE LA TARJETA DEL USUARIO*/
			.user-menu-button.active{
				box-shadow: 0 0 .5em rgba(0,0,0,.5); background: var(--BACK-LAYER-1);
			}
				.user-menu-button.active i{
					transform: translate(-50%, -50%) rotate(315deg);
				}
.user-menu-button{
	display: block; position: fixed; cursor: pointer; width: 3.5em; height: 3.5em;
	bottom: 2em; left: 2em; border-radius: 50%; box-shadow: 0 0 .25em rgba(0,0,0,.5);
	background: var(--BACK-COLOR); z-index: 500; transition: all .3s;
}
	.user-menu-button i{
		pointer-events: none; display: block; position: absolute; font-size: 2em;
		color: var(--TEXT); top: 50%; left: 50%; transform: translate(-50%, -50%);
		transition: all .3s;
	}
/*TITULO DE CUENTA*/
.account-title-container{ display: grid; margin-bottom: 1em; }
.account-title{
	display: flex; align-items: center; position: relative; border-radius: .5rem;
	background: var(--BACKGROUND-COLOR); overflow: hidden; transition: all .3s;
}
	.account-title h3{
		position: relative; display: block; align-items: center; font-size: 1.4em;
		font-weight: 400; color: var(--TEXT-1); overflow: hidden; text-overflow: ellipsis;
		white-space: nowrap; padding: 0 .5em; max-width: calc(100% - 3.5rem - 1rem );
		background: var(--BACKGROUND-COLOR); border-radius: .5rem;
		transition: all .3s;
	}
	.account-title span{
		display: block; position: relative; width: 2.5em; height: 2.5em; 
		border-radius: .5rem; background: var(--BACKGROUND-COLOR);
		transition: all .3s;
	}
		.account-title span i{
			display: block; position: absolute; top: 50%; left: 50%;
			transform: translate(-50%, -50%); color: var(--TEXT); font-size: 1.25em;
			color: var(--TEXT-1); transition: all .3s;
		}
/*//////////////////////////ACCOUNT ACTION////////////////////////*/
.account-window-action-container{
	display: grid; grid-gap: .5em; position: relative; width: 100%;
	padding: 1em; transition: background .3s;
}
	/*TITULO*/
	.account-action-title{
		display: block; position: relative; width: 100%; font-size: 1.5em;
		padding: .25em 0; text-align: center; font-weight: 300; color: var(--TEXT-1);
		transition: color .3s;
	}
		.account-action-title > i{padding: .1em .25em .1em .1em;}
/*BUY CREDITS CONTAINER*/
.offers-container{
	display: flex; flex-direction: column; position: relative; width: 100%;
}
	.offers-container-title{
		display: block; position: relative; width: 100%; overflow: hidden;
		text-overflow: ellipsis; white-space: nowrap; font-size: 1em; padding: .75em;
		text-transform: uppercase; font-weight: 600;
	}
		.offers-container-title > i{margin-right: .5em;}
	.offers-container-offers{
		display: grid; position: relative; width: 100%; overflow: hidden;
	}
		/*CHECKBOX DE SELECCIONA*/
		.credit-offer{
			display: flex; flex-direction: column; justify-content: space-between;
			position: relative; cursor: pointer; padding: .75em;
			box-shadow: 0 0 .08em rgba(0,0,0,.5); background: var(--TRANSPARENT-0);
			transition: all .3s;
		}
			.credit-offer input[type="radio"], .credit-offer input[type="checkbox"]{display: none;}
			.credit-offer-check{
				display: block; position: absolute; left: .5em; top: .5em; width: 1em;
				height: 1em; border-radius: 50%; background: var(--BACKGROUND-COLOR);
				box-shadow: 0 0 .08em rgba(0,0,0,.5); transition: all .3s;
			}
					.credit-offer input[type="radio"]:checked + .credit-offer-check,
					.credit-offer input[type="checkbox"]:checked + .credit-offer-check{
						background: var(--ULTRA-LIGHT-PURPLE);
					}
			.credit-offer > span{
				display: block; margin-bottom: 1em; color: var(--TEXT-1); font-weight: 700;
				font-size: 1.1em; padding-left: 1.5em; transition: all .3s;
			}
			.credit-offer i{
				display: block; text-align: right; color: var(--TEXT-7);
				text-decoration-line: line-through; font-size: .9em;
				transition: all .3s;
			}
			.credit-offer p{
				text-align: right; position: relative; color: var(--TEXT-1); font-weight: 300;
				font-size: 1.1em; transition: all .3s;
			}
				.credit-offer p > span{
					background: var(--GREEN); display: inline-flex; height: 1.5em;
					align-items: center; position: relative; margin-right: .75rem;
					color: var(--WHITE); font-size: .75em; padding: .15em .5em;
					text-transform: uppercase;
				}
					.credit-offer p > span:before{
						content: ""; display: block; position: absolute; right: -.75em;
						border-bottom: solid .75em transparent;
    					border-left: solid .75em var(--GREEN);
    					border-top: solid .75em transparent;
					}
/*BREADCRUM*/
.breadcrumb-box{
	display: flex; position: relative; height: 2.2em; align-items: center;
	max-width: 90vw;
}
	.breadcrumb{
		color: var(--TEXT-WEAK-1); text-decoration: none; background: transparent;
		font-weight: 400; padding: 0.5em; font-size: 1em; position: relative;
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
		transition: color 0.3s ease;
	}
	.breadcrumb:before {
	    content: '\f054'; font-family: 'Font Awesome 5 Free'; 
	    font-weight: 900;color: var(--HALF-GREY);
	}
	.breadcrumb:first-child:before{display: none;}

/*ripple*/
/*.ripple{cursor: pointer; overflow: hidden;}
.ripple .waves-ripple {
	position: absolute; border-radius: 50%; overflow: hidden; width: 1px;
	height: 1px; margin-top: -1px;margin-left: -1px; opacity: 0;
	background: rgba(255,255,255, 0.2); 
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out; 
	-o-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out; 
	transition: all 0.3s ease-out;
	-webkit-transition-property: -webkit-transform, opacity;
	-moz-transition-property: -moz-transform, opacity;
	-o-transition-property: -o-transform, opacity;
	transition-property: transform, opacity;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
	pointer-events: none;
}
body.dark-mode .ripple-dynamic.ripple .waves-ripple{background: rgba(255,255,255,0.1);}
body.light-mode .ripple-dynamic.ripple .waves-ripple{background: rgba(16,16,16,0.1);}
*/
.ripple{cursor: pointer; overflow: hidden;}
.ripple .waves-ripple {
	background-color: rgba(255, 255, 255, 0.2);
    position: absolute;
    top: calc(var(--y) * 1px);
    left: calc(var(--x) * 1px);
    border-radius: 50%;
    will-change: transform,opacity;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) .4s;
    -o-transition: all cubic-bezier(0.4, 0, 0.2, 1) .4s;
    transition: all cubic-bezier(0.4, 0, 0.2, 1) .4s;
    -webkit-animation: ripple .6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation: ripple .6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
body.dark-mode .ripple-dynamic.ripple .waves-ripple{background: rgba(255,255,255,0.1);}
body.light-mode .ripple-dynamic.ripple .waves-ripple{background: rgba(16,16,16,0.1);}
@keyframes ripple {
    0% {
        -webkit-transform: scale(0) translate(-50%, -50%);
        transform: scale(0) translate(-50%, -50%);
        -webkit-filter: opacity(0);
        filter: opacity(0)
    }
    20% {
        -webkit-filter: opacity(0.6);
        filter: opacity(0.6)
    }
    100% {
        top: 50%;
        left: 50%;
        -webkit-transform: scale(1) translate(-50%, -50%);
        transform: scale(1) translate(-50%, -50%)
    }
}
@-webkit-keyframes ripple {
    0% {
        -webkit-transform: scale(0) translate(-50%, -50%);
        transform: scale(0) translate(-50%, -50%);
        -webkit-filter: opacity(0);
        filter: opacity(0)
    }
    20% {
        -webkit-filter: opacity(0.6);
        filter: opacity(0.6)
    }
    100% {
        top: 50%;
        left: 50%;
        -webkit-transform: scale(1) translate(-50%, -50%);
        transform: scale(1) translate(-50%, -50%)
    }
}

/*MENU*/
.menu-trigger{cursor: pointer;}
.menu-trigger *{pointer-events: none;}
.menu{
	display: block; position: fixed; opacity: 0; transform: scale(0.75); 
	transition: opacity 0.3s, transform 0.2s, background 0.3s, box-shadow .3s;
	box-shadow: 0 0.25em 0.5em rgba(0,0,0,0.35); transform-origin: top center;
	pointer-events: none; background: var(--BACK-LAYER-1); border-radius: 6px; padding: 7px 0;
	z-index: 100;
}
body.dark-mode .menu{ box-shadow: 0 0.5em 1em rgba(0,0,0,0.6); }
.menu.show-menu{ opacity: 1; transform: scale(1); pointer-events: all; }


/*DISPLAY NORMAL*/
.block{display:block;}
.inline-block{display: inline-block;}
.flex{display:inline-flex;}
	.flex-dir-col{flex-direction: column;}
	.flex-dir-row{flex-direction: row;}
	.flex-shrink-0{flex-shrink: 0;}
/*POSITION*/
.relative{position: relative;}
.absolute{position: absolute;}
.fixed{position: fixed;}
/*ALIGNMENT*/
.center-align{text-align: center;}
.right-align{text-align: right;}
.left-align{text-align: left;}
.align-items-center{align-items: center;}
.align-items-start{align-items: start;}
.align-items-end{align-items: end;}
.justify-conten-center{justify-content: center;}
.justify-content-space-between{justify-content: space-between;}
.juscify-content-space-around{justify-content: space-around;}


/*TRANSITION*/
.transition-3{transition: all 0.3s ease;} .transition-3 *{transition: all 0.3s ease;}
.text-underline{text-decoration: underline;}

/*FONT SIZE:*/
.f-05{font-size: 0.5em !important;}
.f-06{font-size: 0.6em !important;}
.f-07{font-size: 0.7em !important;}
.f-08{font-size: 0.8em !important;}
.f-09{font-size: 0.9em !important;}
.f-1{font-size: 1em !important;}
.f-11{font-size: 1.1em !important;}
.f-12{font-size: 1.2em !important;}
.f-13{font-size: 1.3em !important;}
.f-14{font-size: 1.4em !important;}
.f-15{font-size: 1.5em !important;}
.f-2{font-size: 2em !important;}
.f-3{font-size: 3em !important;}
.f-4{font-size: 4em !important;}
.f-5{font-size: 5em !important;}

/*EXTRAS*/
/*WIDTH*/
.width-10{width: 10%;}
.width-20{width: 20%;}
.width-25{width: 25%;}
.width-30{width: 30%;}
.width-40{width: 40%;}
.width-50{width: 50%;}
.width-60{width: 60%;}
.width-70{width: 70%;}
.width-75{width: 75%;}
.width-80{width: 80%;}
.width-90{width: 90%;}
.width-100{width: 100%;}
/*TEXT ALIGN*/
.text-left{text-align: left;}
.text-center{text-align: center;}
.text-right{text-align: right;}
/*ROUND*/
.rounded-1{border-radius: 1em;}
.rounded-5{border-radius: .5em;}
.rounded-25{border-radius: .25em;}

.pad-05{padding: 0.5em;}
.pad-t-05{padding-top: 0.5em;}
.pad-r-05{padding-right: 0.5em;}
.pad-b-05{padding-bottom: 0.5em;}
.pad-l-05{padding-left: 0.5em;}
    .pad-tb-05{padding-top: 0.5em; padding-bottom: 0.5em;}
    .pad-lr-05{padding-left: 0.5em; padding-right: 0.5em;}
/*PADDING .25EM*/
.pad-25{padding: .25em;}
.pad-t-25{padding-top: .25em;}
.pad-r-25{padding-right: .25em;}
.pad-b-25{padding-bottom: .25em;}
.pad-l-25{padding-left: .25em;}
    .pad-tb-25{padding-top: .25em; padding-bottom: .25em;}
    .pad-lr-25{padding-left: .25em; padding-right: .25em;}
/*PADDING .5EM*/
.pad-5{padding: .5em;}
.pad-t-5{padding-top: .5em;}
.pad-r-5{padding-right: .5em;}
.pad-b-5{padding-bottom: .5em;}
.pad-l-5{padding-left: .5em;}
    .pad-tb-5{padding-top: .5em; padding-bottom: .5em;}
    .pad-lr-5{padding-left: .5em; padding-right: .5em;}
/*PADDING .75EM*/
.pad-75{padding: .75em;}
.pad-t-75{padding-top: .75em;}
.pad-r-75{padding-right: .75em;}
.pad-b-75{padding-bottom: .75em;}
.pad-l-75{padding-left: .75em;}
    .pad-tb-75{padding-top: .75em; padding-bottom: .75em;}
    .pad-lr-75{padding-left: .75em; padding-right: .75em;}
/*PADDING 1EM*/
.pad-1{padding: 1em;}
.pad-t-1{padding-top: 1em;}
.pad-r-1{padding-right: 1em;}
.pad-b-1{padding-bottom: 1em;}
.pad-l-1{padding-left: 1em;}
    .pad-tb-1{padding-top: 1em; padding-bottom: 1em;}
    .pad-lr-1{padding-left: 1em; padding-right: 1em;}
/*PADDING 1.5EM*/
.pad-15{padding: 1.5em;}
.pad-t-15{padding-top: 1.5em;}
.pad-r-15{padding-right: 1.5em;}
.pad-b-15{padding-bottom: 1.5em;}
.pad-l-15{padding-left: 1.5em;}
    .pad-tb-15{padding-top: 1.5em; padding-bottom: 1.5em;}
    .pad-lr-15{padding-left: 1.5em; padding-right: 1.5em;}
/*PADDING 2EM*/
.pad-2{padding: 2em;}
.pad-t-2{padding-top: 2em;}
.pad-r-2{padding-right: 2em;}
.pad-b-2{padding-bottom: 2em;}
.pad-l-2{padding-left: 2em;}
    .pad-tb-2{padding-top: 2em; padding-bottom: 2em;}
    .pad-lr-2{padding-left: 2em; padding-right: 2em;}
/*MARGIN 0EM*/
.mar-0{margin: 0em;}
.mar-t-0{margin-top: 0em;}
.mar-r-0{margin-right: 0em;}
.mar-b-0{margin-bottom: 0em;}
.mar-l-0{margin-left: 0em;}
    .mar-tb-0{margin-top: 0em; margin-bottom: 0em;}
    .mar-lr-0{margin-left: 0em; margin-right: 0em;}
/*MARGIN .5EM*/
.mar-5{margin: .5em;}
.mar-t-5{margin-top: .5em;}
.mar-r-5{margin-right: .5em;}
.mar-b-5{margin-bottom: .5em;}
.mar-l-5{margin-left: .5em;}
    .mar-tb-5{margin-top: .5em; margin-bottom: .5em;}
    .mar-lr-5{margin-left: .5em; margin-right: .5em;}
/*MARGIN .75EM*/
.mar-75{margin: .75em;}
.mar-t-75{margin-top: .75em;}
.mar-r-75{margin-right: .75em;}
.mar-b-75{margin-bottom: .75em;}
.mar-l-75{margin-left: .75em;}
    .mar-tb-75{margin-top: .75em; margin-bottom: .75em;}
    .mar-lr-75{margin-left: .75em; margin-right: .75em;}
/*MARGIN 1EM*/
.mar-1{margin: 1em;}
.mar-t-1{margin-top: 1em;}
.mar-r-1{margin-right: 1em;}
.mar-b-1{margin-bottom: 1em;}
.mar-l-1{margin-left: 1em;}
    .mar-tb-1{margin-top: 1em;  margin-bottom: 1em;}
    .mar-lr-1{margin-left: 1em;  margin-right: 1em;}
/*MARGIN 1.5EM*/
.mar-15{margin: 1.5em;}
.mar-t-15{margin-top: 1.5em;}
.mar-r-15{margin-right: 1.5em;}
.mar-b-15{margin-bottom: 1.5em;}
.mar-l-15{margin-left: 1.5em;}
    .mar-tb-15{margin-top: 1.5em; margin-bottom: 1.5em;}
    .mar-lr-15{margin-left: 1.5em; margin-right: 1.5em;}
/*MARGIN 2EM*/
.mar-2{margin: 2em;}
.mar-t-2{margin-top: 2em;}
.mar-r-2{margin-right: 2em;}
.mar-b-2{margin-bottom: 2em;}
.mar-l-2{margin-left: 2em;}
    .mar-tb-2{margin-top: 2em;  margin-bottom: 2em;}
    .mar-lr-2{margin-left: 2em;  margin-right: 2em;}
/*MARGIN 3EM*/
.mar-3{margin: 3em;}
.mar-t-3{margin-top: 3em;}
.mar-r-3{margin-right: 3em;}
.mar-b-3{margin-bottom: 3em;}
.mar-l-3{margin-left: 3em;}
    .mar-tb-3{margin-top: 3em;  margin-bottom: 3em;}
    .mar-lr-3{margin-left: 3em;  margin-right: 3em;}
/*MARGIN 4EM*/
.mar-4{margin: 4em;}
.mar-t-4{margin-top: 4em;}
.mar-r-4{margin-right: 4em;}
.mar-b-4{margin-bottom: 4em;}
.mar-l-4{margin-left: 4em;}
    .mar-tb-4{margin-top: 4em;  margin-bottom: 4em;}
    .mar-lr-4{margin-left: 4em;  margin-right: 4em;}
/*MARGIN AUTO*/
.mar-auto{margin: auto;}
.mar-t-auto{margin-top: auto;}
.mar-r-auto{margin-right: auto;}
.mar-b-auto{margin-bottom: auto;}
.mar-l-auto{margin-left: auto;}
    .mar-tb-auto{margin-top: auto; margin-bottom: auto;}
    .mar-lr-auto{margin-left: auto; margin-right: auto;}
.no-margin{margin: 0 !important;}

/*FORM VARIANTS*/
/*SELECT*/
.form-select{
	display: grid; grid-gap: .5em; align-items: center; position: relative;
}
	.form-select select{
		display: block; position: relative; width: 100%; padding: .25em .5em;
		font-size: .9em; cursor: pointer; background: var(--BACK-COLOR); 
		color: var(--TEXT-WEAK-1); -moz-appearance: none; 
		transition: color .3s, background .3s;
	}
	.form-select label{
		display: block; position: relative; color: var(--TEXT-WEAK-1); 
		transition: color .3s;
	}
/*CHECKBOX*/
.input-checkbox{
	display: inline-block; position: relative; font-size: 1em; padding: 0 0.5em;
	line-height: 1.5; color: var(--TEXT-WEAK); cursor: pointer; transition: color 0.3s ease;
}
	.input-checkbox input[type="checkbox"]{display: none;}
	.input-checkbox span{
		display: inline-block; position: relative; margin-right: 0.35em; top: 0.25em;
		border-radius: 2px; background: transparent; width: 1.25em; height: 1.25em;
		border: 0.15em solid var(--HALF-GREY); transition: background 0.3s ease, border 0.3s ease;
	}
		.input-checkbox span:before{
			content: ""; display: block; position: absolute; top: 40%;
		    left: 50%; width: 0.6em; height: 0.275em; border: solid 0.2em transparent;
		    border-right: none; border-top: none;
    		transform: translate(-50%, 100%) rotate(-45deg) scaleX(0.25);
			position: absolute; border-color: transparent;
			transition: transform 0.2s ease;
		}
	.input-checkbox input[type="checkbox"]:checked + span{
		border: 0.2em solid var(--PRIMARY-LIGHTEN);
		background: var(--PRIMARY-LIGHTEN);
	}
		.input-checkbox input[type="checkbox"]:checked + span:before{
			border-color: var(--WHITE);
			transform: translate(-50%, -50%) rotate(-45deg) scaleX(1);
		}
/*RADIO*/
.input-radio{
	display: inline-block; position: relative; font-size: 1em; padding: 0 0.5em;
	line-height: 1.5; color: var(--TEXT); cursor: pointer; transition: color 0.3s ease;
}
	.input-radio input[type="radio"]{display: none;}
	.input-radio span{
		display: inline-flex; position: relative; align-items: center; justify-content: center;
		margin-right: 0.35em; top: -0.15em; order-radius: 2px; background: transparent; 
		width: 1.3em; height: 1.3em; border-radius: 50%;
		border: 0.1em solid var(--HALF-GREY); transition: background 0.3s ease, border 0.3s ease;
	}
		.input-radio span:before{
			content: ""; display: block; position: relative; width: 0.6em;
		    height: 0.6em; background: var(--PRIMARY-LIGHTEN);
    		transform: scale(0); border-radius: 50%; transition: transform 0.2s ease;
		}
	.input-radio input[type="radio"]:checked + span{
		border: 0.1em solid var(--PRIMARY-LIGHTEN);
	}
		.input-radio input[type="radio"]:checked + span:before{ transform: scale(1); }
/*INPUT NORMAL*/
.form-input-normal{
	display: grid; grid-gap: .5em; position: relative;
}
	.form-input-normal input{
		display: block; position: relative; width: 100%; 
		box-shadow: 0 0 0px 1px rgba(128,128,128,0.25); border-radius: 3px; 
		background: transparent; font-size: 1em; padding: 1.1em 1em;
		outline: none; color: var(--TEXT-WEAK-1); border: none; transition: all .3s;
	}
		.form-input-normal input:focus{ box-shadow: 0 0 0px 2px var(--PRIMARY-LIGHTEN); }
			.form-input-normal.icon-prefix input{ padding: 1.1em 1em 1.1em 2.75em; }
				.form-input-normal.icon-prefix > i{
					display: block; position: absolute; font-size: 1.3em;
				    z-index: 2; left: 0.7em; top: 0.8em; color: var(--TEXT-WEAK);
				    transition: all 0.3s;
				}
	.form-input-normal textarea{
		resize: none; display: block; position: relative; width: 100%;
		box-shadow: 0 0 0px 1px rgba(128,128,128,0.25); background: transparent;
		font-size: 1em; font-family: inherit; padding: 1.1em 1em; height: 12em;
		outline: none; color: var(--TEXT-WEAK-1); transition: all .3s; 
		border-radius: 3px; border: none;
	}
		.form-input-normal textarea:focus{ box-shadow: 0 0 0px 2px var(--PRIMARY-LIGHTEN); }
	.form-input-normal label{
		display: block; max-width: calc(100% - 1em); overflow: hidden; 
		text-overflow: ellipsis; white-space: nowrap; align-items: center;
		position: absolute; background: var(--BACK-COLOR); color: var(--TEXT-WEAK); 
		font-weight: 400; top: calc(0% - .75em); height: 1.5em;
		font-size: 0.9em; left: 0.5rem; padding: 0 4px 0 2px; z-index: 1;
		position: absolute; font-size: 1em; top: 1.2em; left: 0.75em;
    	pointer-events: none; transition: all .3s;
	}
			.form-input-normal.icon-prefix label{ left: 2.75em; }
	.form-input-normal input:focus ~ label,
	.form-input-normal textarea:focus ~ label{
		color: var(--PRIMARY-LIGHTEN); top: -0.6em;
	    left: 0.7em; font-size: 0.9em; font-weight: 500;
	}
				.form-input-normal input:focus ~ i,
				.form-input-normal textarea:focus ~ i{ color: var(--PRIMARY-LIGHTEN); }
	.form-input-normal:focus-within label,
	.form-input-normal input:not(:placeholder-shown) ~ label,
	.form-input-normal:focus-within label,
	.form-input-normal textarea:not(:placeholder-shown) ~ label{
		top: -0.6em; left: 0.7em; font-size: 0.9em;
	}
/*INPUT FILLED*/
.form-input-filled{
	display: grid; grid-gap: .5em; position: relative;
}
	.form-input-filled input{
		display: block; position: relative; width: 100%; background: transparent; 
		border-top-right-radius: 4px; border-top-left-radius: 4px; font-size: 1em; 
		padding: 1.6em 0.75em 0.5em 0.75em; outline: none; color: var(--TEXT-WEAK-1);
		background: rgba(128, 128, 128, 0.1); border: none;
		border-bottom: 0.09em solid var(--TEXT-WEAK); transition: all .3s;
		font-family: inherit;
	}
	.form-input-filled .iti input{ padding: 1.1em 0.75em 1em 0.75em; }
			.form-input-filled.icon-prefix input{ padding: 1.6em 0.75em 0.75em 2.75em; }
				.form-input-filled.icon-prefix > i{
					display: block; position: absolute; font-size: 1.25em; z-index: 2;
				    left: 0.7em; top: 0.9em; color: var(--TEXT-WEAK); transition: all 0.3s;
				}
			.form-input-filled.icon-suffix input{ padding: 1.6em 3em 0.75em 0.75em; }
				.form-input-filled.icon-suffix > i{
					display: block; position: absolute; width: 2.25em; height: 2.25em;
				    border-radius: 50%; display: flex; align-items: center; 
				    justify-content: center; z-index: 2; right: 0.5em; top: 0.6em;
				    color: var(--TEXT-WEAK); transition: all 0.3s;
				}
	.form-input-filled textarea{
		resize: none; display: block; position: relative; width: 100%;
		background: transparent; border-top-right-radius: 4px; 
		border-top-left-radius: 4px; font-size: 1em; font-family: inherit;
		padding: 1.6em 0.75em 0.5em 0.75em; height: 12em; outline: none; 
		color: var(--TEXT-WEAK-1); background: rgba(128, 128, 128, 0.1); 
		border: none; border-bottom: 0.09em solid var(--TEXT-WEAK); transition: all .3s;
	}
		.form-input-filled textarea:focus{ border-bottom: 0.09em solid var(--PRIMARY-LIGHTEN); }
	.form-input-filled label{
		display: block; max-width: calc(100% - 1em); overflow: hidden; 
		text-overflow: ellipsis; white-space: nowrap; align-items: center;
		position: absolute; background: transparent; color: var(--TEXT-WEAK); 
		font-weight: 400; font-size: 0.85em; padding: 0; z-index: 1; position: absolute; 
		font-size: 1em; top: 1.25em; left: 0.75em; transform-origin: left center;
    	pointer-events: none; transition: all .3s;
	}
			.form-input-filled.icon-prefix label{left: 2.75em;}
			.form-input-filled input:focus ~ i:not(.toggle-password-trigger),
			.form-input-filled textarea:focus ~ i:not(.toggle-password-trigger){
				color: var(--PRIMARY-LIGHTEN);
			}
	.form-input-filled:focus-within label,
	.form-input-filled input:not(:placeholder-shown) ~ label,
	.form-input-filled:focus-within label,
	.form-input-filled textarea:not(:placeholder-shown) ~ label{
		color: var(--TEXT-WEAK); top: 0.5em; transform: scale(0.75); font-weight: 500;
	}
		.form-input-filled input:focus{ border-bottom: 0.09em solid var(--PRIMARY-LIGHTEN); }
	.form-input-filled input:focus ~ label,
	.form-input-filled textarea:focus ~ label{
		color: var(--PRIMARY-LIGHTEN); top: 0.5em; transform: scale(0.75); font-weight: 500;
	}
.form-input-filled.form-select{
	display: block; position: relative; width: 100%; background: transparent; 
	border-top-right-radius: 4px; border-top-left-radius: 4px; font-size: 1em; 
	padding: 1.6em 0.75em 0.5em 0.75em; background: rgba(128, 128, 128, 0.1); 
	border: none; height: 3.61em; transition: all .3s;
}
	.form-input-filled.form-select select{
		display: block; position: absolute; background: transparent; border: none; 
		background: transparent; top: 0; right: 0; bottom: 0; left: 0;
		padding: 1.6em 0.75em 0.5em 0.75em; -webkit-appearance: none; appearance: none;
		border-bottom: 0.09em solid var(--TEXT-WEAK); transition: all .3s;
	}
		.form-input-filled.form-select select option{ background: var(--BACK-LAYER-1); }
	.form-input-filled.form-select label{
		display: block; max-width: calc(100% - 1em); overflow: hidden; 
		text-overflow: ellipsis; white-space: nowrap; align-items: center;
		position: absolute; background: transparent; color: var(--TEXT-WEAK); 
		font-weight: 400; font-size: 0.85em; padding: 0; z-index: 1;
		position: absolute; font-size: 1em; top: 1.25em; left: 0.75em; 
		transform-origin: left center; pointer-events: none; transition: all .3s;
    	top: 0.5em;transform: scale(0.75); font-weight: 500;
	}
	.form-input-filled.form-select select:focus{ border-color: var(--PRIMARY-LIGHTEN); }
		.form-input-filled.form-select select:focus + label{ color: var(--PRIMARY-LIGHTEN); }
/*	INPUT TAGS FILLED*/
.input-tags{
	display: block; position: relative; width: 100%; margin: 1em 0; border: none;
	border-top-right-radius: 4px; border-top-left-radius: 4px;
	border-bottom: 0.09em solid var(--TEXT-WEAK); transition: all .3s;
	background: rgba(128, 128, 128, 0.05); font-size: 1em; padding: 1.6em 0.75em 0.75em 0.75em; 
	outline: none; color: var(--TEXT-WEAK); transition: all .3s;
}
	.input-tags label{
	    display: block; max-width: calc(100% - 1em); overflow: hidden; 
	    text-overflow: ellipsis; white-space: nowrap; align-items: center;
		position: absolute; background: transparent; color: var(--TEXT-WEAK); 
		font-weight: 400; font-size: 0.85em; padding: 0; z-index: 1;
		position: absolute; font-size: 1em; top: 1.25em; left: 0.75em; 
		transform-origin: left center; pointer-events: none; transition: all .3s;
    	top: 0.5em; transform: scale(0.75); font-weight: 500;
	}
	.tag{
		display: inline-block;padding: .5em .75em; position: relative; margin: .25em .25em;
		border-radius: 1rem; text-decoration: none; background: var(--BACK-LAYER-3);
		color: var(--TEXT-WEAK-3); transition: all .3s ease; line-height: 1;
	}
		.tag .close-tag::before{
			content: '×'; font-weight: bold; display: inline-block; transform: scale(1.5);
			margin: 0 0 0 .5em; color: var(--TEXT-WEAK-5); cursor: pointer; transition: color .3s;
		}
	.input-tags .main-input{	
		border: none; outline: none; padding: .75em .1em; font-size: 1em; background: transparent;
	}
/*INPUT RADIO NORMAL*/
.form-radio-normal{
	display: block; position: relative; width: 100%;
}
	.form-radio-normal  label{
		display: inline-flex; align-items: center; font-size: 1em; padding: .15em .25em ;
		color: var(--TEXT-WEAK-1); transition: color .3s; cursor: pointer;
	}
		.form-radio-normal  label  i{
			font-size: 1.25em; color: rgba(128,128,128,.25);
			padding: .1em .25em .1em .1em; transition: color .3s, transform .3s;
		}
	.form-radio-normal  input[type="radio"]{display: none;}
		.form-radio-normal input[type="radio"]:checked + label > i{color: var(--PRIMARY-LIGHTEN);}
		.form-radio-normal input[type="radio"] + label:active > i{transform: scale(.75);}
/*TEXT-VARIANTS*/
.bold, b{font-weight: 600;}
.o-hidden{ overflow: hidden;}
.o-ellipsis{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.two-lines{
	display: -webkit-box; -webkit-line-clamp: 2;
	-webkit-box-orient: vertical; overflow: hidden;
	text-overflow: ellipsis; padding: 0;
}
.three-lines{
	display: -webkit-box; -webkit-line-clamp: 3;
	-webkit-box-orient: vertical; overflow: hidden;
	text-overflow: ellipsis; padding: 0;
}
.text-ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.divider{height: 1px; width: 100%; overflow: hidden; background-color: var(--HALF-GREY);}
/*DISABLED*/
*:disabled{filter: grayscale(100%); cursor: default; pointer-events: none; opacity: 0.35;}
.disabled{cursor: default; pointer-events: none; opacity: 0.35;}
.shadow-1{box-shadow: 0 0 0.08em rgba(0,0,0,.5);}
/*LAZY LOAD*/
.lazy{opacity: 0;}
.lazy.loaded, .flickity-bg-lazyloaded{ animation: fade_in 0.5s ease; opacity: 1; }

/*NO RESULTS SEARCH*/
.search-no-results{
	display: flex; flex-direction: column; position: relative; width: 100%;
	align-items: center; justify-content: center; min-height: 350px; text-align: center;
}
	.search-no-results-image{
		display: block; filter: invert(0); max-width: 500px; transition: all 0.3s ease;
	}
				body.dark-mode .search-no-results-image{filter: invert(1);}
		.search-no-results-image img{
			display: block; position: relative; max-width: 100%;
		}
	.search-no-results h1, .search-no-results h2, .search-no-results h3, .search-no-results h4, .search-no-results h5, .search-no-results h6, .search-no-results p{
		max-width: 250px; color: var(--TEXT-WEAK);
	}
/*SPINNER*/
.spinner-container{
  	width: 100%; min-height: 10em; display: none; align-items: center; 
  	justify-content: center; flex-direction: column; z-index: 10; opacity: 0; 
  	pointer-events: none; transition: all .3s;
}
	.spinner-container.spinner-form{
		display: flex; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
		background: var(--SPINNER-BACK); min-height: unset;
	}
.spinner-container.display{opacity: 1; pointer-events: all; display: flex;}
	.spinner-progress{ margin-top: 1em; color: var(--SPINNER-COLOR); }
		.spinner-box{position: relative; width: 2.5em; height: 2.5em;}
		.ytp-spinner{
		  	position: absolute; left: 50%; top: 50%; width: 64px; margin-left: -32px; 
		  	z-index: 18; pointer-events: none;
		}
		.ytp-spinner-container{
		  	pointer-events: none; position: absolute; width: 100%; padding-bottom: 100%; 
		  	top: 50%; left: 50%; margin-top: -50%; margin-left: -50%;
		  	animation: ytp-spinner-linspin 1568.23529647ms linear infinite;
		}
		.ytp-spinner-rotator{
		  	position: absolute; width: 100%; height: 100%;
		  	animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both
		}
		.ytp-spinner-left{
		  	position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden;
		}
		.ytp-spinner-right{
		  	position: absolute; top: 0; right: 0; bottom: 0; overflow: hidden;
		}
		.ytp-spinner-left{right: 49%}
		.ytp-spinner-right{left: 49%}
		.ytp-spinner-circle {
		  	box-sizing: border-box; position: absolute; width: 200%;
		  	height: 100%; border-style: solid; border-color: var(--SPINNER-COLOR) var(--SPINNER-COLOR) transparent;
		  	border-radius: 50%; border-width: 3px; transition: all .3s;
		}
		.ytp-spinner-left .ytp-spinner-circle {
		  	left: 0; right: -100%; border-right-color: transparent;
		  	animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
		}
		.ytp-spinner-right .ytp-spinner-circle {
		  	left: -100%; right: 0; border-left-color: transparent;
		  	animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
		}
		@keyframes ytp-spinner-linspin {
		  	to{transform: rotate(360deg)}
		}
		@keyframes ytp-spinner-easespin {
		  	12.5%{transform: rotate(135deg)}
		  	25%{transform: rotate(270deg)}
		  	37.5%{transform: rotate(405deg)}
		  	50%{transform: rotate(540deg)}
		  	62.5%{transform: rotate(675deg)}
		  	75%{transform: rotate(810deg)}
		  	87.5%{transform: rotate(945deg)}
		  	to{transform: rotate(1080deg)}
		}
		@keyframes ytp-spinner-left-spin {
		  	0%{transform: rotate(130deg)}
		  	50%{transform: rotate(-5deg)}
		  	to{transform: rotate(130deg)}
		}
		@keyframes ytp-right-spin {
		  	0% {transform: rotate(-130deg)}
		  	50% {transform: rotate(5deg)}
		  	to {transform: rotate(-130deg)}
		}

/*COLORES*/
.primary{background-color: var(--PRIMARY) !important;}
.primary-lighten{background-color: var(--PRIMARY-LIGHTEN) !important;}
.secondary{background-color: var(--SECONDARY) !important}
.secondary-lighten{background-color: var(--SECONDARY-LIGHTEN) !important;}
.back-layer, .back-nackground{background-color: var(--BACK-COLOR) !important;}
.back-layer-1{background-color: var(--BACK-LAYER-1) !important;}
.back-layer-2{background-color: var(--BACK-LAYER-2) !important;}
.back-layer-3{background-color: var(--BACK-LAYER-3) !important;}
.red{background-color: var(--RED) !important;}
.whatsapp{background-color: var(--WHATSAPP) !important;}
.twitter{background-color: var(--TWITTER) !important;}
.instagram{background-color: var(--INSTAGRAM) !important;}
.facebook{background-color: var(--FACEBOOK) !important;}
.soft-grey{background-color: var(--SOFT-GREY) !important;}

/*TEXTO*/
.uppercase{text-transform: uppercase !important;}
.capitalize{text-transform: capitalize !important;}
.lowercase{text-transform: lowercase !important;}
.text-primary{color: var(--PRIMARY) !important;} .text-primary * {color: var(--PRIMARY) !important;}
.text-primary-lighten{color: var(--PRIMARY-LIGHTEN) !important;} .text-primary-lighten * {color: var(--PRIMARY-LIGHTEN) !important;}
.text-red{color: var(--RED) !important;} .text-red * {color: var(--RED) !important;}
.text-whatsapp{color: var(--WHATSAPP) !important;} .text-whatsapp *{color: var(--WHATSAPP) !important;}
.text-twitter{color: var(--TWITTER) !important;} .text-twitter *{color: var(--TWITTER) !important;}
.text-instagram{color: var(--INSTAGRAM) !important;} .text-instagram *{color: var(--INSTAGRAM) !important;}
.text-facebook{color: var(--FACEBOOK) !important;} .text-facebook *{color: var(--FACEBOOK) !important;}
.text-secondary{color: var(--SECONDARY) !important;} .text-secondary * {color: var(--SECONDARY) !important;}
.text-secondary-lighten{color: var(--SECONDARY-LIGHTEN) !important;} .text-secondary-lighten * {color: var(--SECONDARY-LIGHTEN) !important;}
.text-color{color: var(--TEXT) !important;} .text-color * {color: var(--TEXT) !important;}
.text-weak, .text-color-weak{color: var(--TEXT-WEAK) !important;} .text-color-weak * {color: var(--TEXT-WEAK) !important;}
.text-color-weak-1{color: var(--TEXT-WEAK-1) !important;} .text-color-weak-1 * {color: var(--TEXT-WEAK-1) !important;}
.text-color-weak-2{color: var(--TEXT-WEAK-2) !important;} .text-color-weak-2 * {color: var(--TEXT-WEAK-2) !important;}
.text-color-weak-3{color: var(--TEXT-WEAK-3) !important;} .text-color-weak-3 * {color: var(--TEXT-WEAK-3) !important;}
.text-color-weak-4{color: var(--TEXT-WEAK-4) !important;} .text-color-weak-4 * {color: var(--TEXT-WEAK-4) !important;}
.text-color-weak-5{color: var(--TEXT-WEAK-5) !important;} .text-color-weak-5 * {color: var(--TEXT-WEAK-5) !important;}
.text-white{color: var(--WHITE) !important;} .text-white * {color: var(--WHITE) !important;}
.text-grey{color: var(--HALF-GREY) !important;} .text-grey *{color: var(--HALF-GREY) !important;}
/*TRUNCATE*/
.truncate{
	display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.toggle-password-trigger{}
.toggle-password-trigger.active{color: var(--PRIMARY-LIGHTEN) !important;}
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
@keyframes fade_in{ 0%{opacity: 0;} 100%{opacity: 1;} }
@keyframes scale{ 0%{transform: scale(0.75);} 100%{transform: scale(1);} }
@keyframes scale_Card{ 0%{transform: scale(0.75); opacity: 0;} 100%{transform: scale(1); opacity: 1;}}
@keyframes slide_up_cookie{ 0%{bottom: -100px;} 100%{bottom: 0px;}}
@keyframes slide_up{ 0%{top: 100px;} 100%{top: 0px;} }
@keyframes rotating{ from{transform: rotate(0deg);} to{transform: rotate(360deg);}}
@keyframes slide_right{ 0%{right: -100px;} 100%{right: 0px;} }
@keyframes slide_left{ 0%{left: -100px;} 100%{left: 0px;} }
@keyframes slide_down{ 0%{bottom: 100px;} 00%{bottom: 0px;} }
/*ANIMACION DE EL SHOWCASE*/
@keyframes showcase_light_desktop{
	0%{opacity: 0;
		background-image: url("../pics/desktop/light_0.jpg");}
		5%{opacity: 1;
			background-image: url("../pics/desktop/light_0.jpg");}
		28%{opacity: 1;
			background-image: url("../pics/desktop/light_0.jpg");}
	33%{opacity: 0;}	
		38%{opacity: 1;
			background-image: url("../pics/desktop/light_1.jpg");}
		61%{opacity: 1;
			background-image: url("../pics/desktop/light_1.jpg");}
	66%{opacity: 0;}
		71%{opacity: 1;
			background-image: url("../pics/desktop/light_2.jpg");}
		90%{opacity: 1;
			background-image: url("../pics/desktop/light_2.jpg");}
	95%{opacity: 0;}
	100%{opacity: 0;}
}
@keyframes showcase_dark_desktop{
	0%{opacity: 0;
		background-image: url("../pics/desktop/dark_0.jpg");}
		5%{opacity: 1;
			background-image: url("../pics/desktop/dark_0.jpg");}
		28%{opacity: 1;
			background-image: url("../pics/desktop/dark_0.jpg");}
	33%{opacity: 0;}	
		38%{opacity: 1;
			background-image: url("../pics/desktop/dark_1.jpg");}
		61%{opacity: 1;
			background-image: url("../pics/desktop/dark_1.jpg");}
	66%{opacity: 0;}
		71%{opacity: 1;
			background-image: url("../pics/desktop/dark_2.jpg");}
		90%{opacity: 1;
			background-image: url("../pics/desktop/dark_2.jpg");}
	95%{opacity: 0;}
	100%{opacity: 0;}
}
@keyframes showcase_light_mobile{
	0%{opacity: 0;
		background-image: url("../pics/mobile/light_0.jpg");}
		5%{opacity: 1;
			background-image: url("../pics/mobile/light_0.jpg");}
		28%{opacity: 1;
			background-image: url("../pics/mobile/light_0.jpg");}
	33%{opacity: 0;}	
		38%{opacity: 1;
			background-image: url("../pics/mobile/light_1.jpg"); }
		61%{opacity: 1;
			background-image: url("../pics/mobile/light_1.jpg");}
	66%{opacity: 0;}
		71%{opacity: 1;
			background-image: url("../pics/mobile/light_2.jpg");}
		90%{opacity: 1;
			background-image: url("../pics/mobile/light_2.jpg");}
	95%{opacity: 0;}
	100%{opacity: 0;}
}
@keyframes showcase_dark_mobile{
	0%{opacity: 0;
		background-image: url("../pics/mobile/dark_0.jpg");}
		5%{opacity: 1;
			background-image: url("../pics/mobile/dark_0.jpg");}
		28%{opacity: 1;
			background-image: url("../pics/mobile/dark_0.jpg");}
	33%{opacity: 0;}	
		38%{opacity: 1;
			background-image: url("../pics/mobile/dark_1.jpg");}
		61%{opacity: 1;
			background-image: url("../pics/mobile/dark_1.jpg");}
	66%{opacity: 0;}
		71%{opacity: 1;
			background-image: url("../pics/mobile/dark_2.jpg");}
		90%{opacity: 1;
			background-image: url("../pics/mobile/dark_2.jpg");}
	95%{opacity: 0;}
	100%{opacity: 0;}
}
/*ANIMACION PARA ANUNCIO TOP*/
@keyframes top_main_card_shadow{
	0%{box-shadow: 0 0 0 .11em var(--PURPLE);}
	50%{box-shadow: 0 0 0 .11em var(--ULTRA-LIGHT-PURPLE);}
	100%{box-shadow: 0 0 0 .11em var(--PURPLE);}
}
@keyframes top_main_card_extra{
	0%{background: var(--PURPLE);}
	50%{background: var(--ULTRA-LIGHT-PURPLE);}
	100%{background: var(--PURPLE);}
}
	/*ANIMACION DE CORAZONES*/
	@keyframes hearts_card{
		0%{transform: translateY(0) rotate(0deg); opacity: 1;}
		90%{opacity: 1;}
		100%{transform: translateY(-300%) rotate(0deg); opacity: 0;}
	}
	/*CORAZONES EN VISTA DE ANUNCIO*/
	@keyframes ad_hearts{
		0%{transform: translateY(0) rotate(0deg); opacity: 0;}
		10%{opacity: 1;} 75%{opacity: 1;}
		100%{transform: translateY(-50vh) rotate(0deg); opacity: 0;}
	}
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
@media screen and (min-width: 1200px) and (max-width: 1500px){
}
	@media screen and (min-width: 950px) and (max-width: 1200px){
	}
	@media screen and (min-width: 700px) and (max-width: 950px){
	}
	@media screen and (max-width: 1200px){
		/*//////////////////////////ACCOUNT////////////////////////*/
		.account-window-container{ width: 100%; }
			/*INFO DE LA CUENTA*/
			.account-card-container{ width: 30%; }
			/*ESTADO DE LA CUENTA*/
			.account-status{ width: 70%; }
	}
	@media screen and (max-width: 950px){
		.only-below-950{display: initial !important;}
		/*//////////////////////////ACCOUNT////////////////////////*/
		/*INFO DE LA CUENTA*/
		.account-card-container{ width: 30%; }
		/*ESTADO DE LA CUENTA*/
		.account-status{ width: 70%; padding: 0; }
	}
/*DESKTOP*/
@media screen and (min-width: 701px){
	/*DISPLAYABLE*/
	.show-on-desktop-only{}
	.show-on-mobile-only{display: none;}
}
/*mobile*/
@media screen and (max-width: 700px){
	body.no-scroll-mobile{ overflow-y: hidden; }
	.desktop-only{display: none !important;}
	.desktop-only-ib{display: none !important;}
	.mobile-only{display: block !important;}
	.mobile-only-ib{display: inline-block !important;}
	/*HIDE ON MOBILE*/
	.hide-on-mobile{display: none;}
	.hide-on-desktop{display: initial !important;}
	/*DISPLAYABLE*/
	.show-on-desktop-only{display: none;}
	.show-on-mobile-only{}
	/*width*/
	.width-mobile-10{width: 10%;}
    .width-mobile-20{width: 20%;}
    .width-mobile-25{width: 25%;}
    .width-mobile-30{width: 30%;}
    .width-mobile-40{width: 40%;}
    .width-mobile-50{width: 50%;}
    .width-mobile-60{width: 60%;}
    .width-mobile-70{width: 70%;}
    .width-mobile-75{width: 75%;}
    .width-mobile-80{width: 80%;}
    .width-mobile-90{width: 90%;}
    .width-mobile-100{width: 100%;}
    /*SEARCH NO RESULT*/
    	.search-no-results-image img{}
    /*//////////////////////////ACCOUNT////////////////////////*/
    /*CONTENEDOR DE FORMULARIO*/
	.account-window-container{
		display: grid; grid-gap: 1.5em; position: relative; width: 70%;
	}
	/*INFO DE LA CUENTA*/
		.account-card-container{
			position: fixed; bottom: 2em; opacity: 0; pointer-events: none;
			z-index: 500; left: 2em; min-width: 40vw; max-width: calc(100vw - 4em);
			max-height: calc(100vh - 5.5em - 7em); border-radius: 1em;
			box-shadow: 0 0 .5em rgba(0,0,0,.5); overflow-y: scroll; 
			z-index: 500; transition: all .3s; scrollbar-width: none;
		}
					.account-card-container.active{
						opacity: 1; pointer-events: all; bottom: 7em;
					}
					.account-card-container::-webkit-scrollbar { display: none; }
			
			.account-card{
				position: relative; top: 0; margin: 0;
			}
				.account-card-head{
					grid-template-columns: 2fr 5fr; align-items: center; margin-top: 1em;
				}
					.account-card-head-icon{
						margin: 0 auto 0 auto; width: 100%; padding-top: 100%;
					}
						.account-card-head-icon > a{ font-size: 4em; }
								.account-card-head::before{ display: none; }

					.account-card-head-text{
						padding: 0; box-shadow: none; top: auto;
					}
						.account-card-head-text > h3,
						.account-card-head-text > small{ text-align: left; }
		/*ESTADO DE LA CUENTA*/
		.account-status{ width: 100%; padding: 0; }
}
	@media screen and (max-width: 450px){
		/*//////////////////////////ACCOUNT////////////////////////*/
		.account-window-container{ width: 100%; }
			.account-card-container{ min-width: 75vw; }
	}