/*
Theme Name: NIU lumia 2025
Theme URI: https://lumia.com.ar/
Author: Lumia
Author URI: https://lumia.com.ar/
Description: Custom theme for NIU
Requires at least: 6.7
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: niu2025
Tags:
*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
	margin:0;
	padding:0;
}
.ancho {
	max-width:1600px;
	margin:auto;
}
@media (max-width:1600px) {
	.ancho {
		margin:0 6vw;
	}
}
@media (max-width:600px) {
	.ancho {
		margin:0 20px;
	}
}
body {
	background:#dadada;
	font-family: "Poppins", serif;
}
#header {
	padding:1.5rem 0;
}
#header .ancho {
	display:flex;
	justify-content:space-between;
	align-items:center;
}
#header .ancho img {
	max-width:100%;
	height:auto;
}
#header .logo {
	max-width:16%;
	margin-right:5%;
}
#header nav {
	flex-grow:1;
}
#header nav ul {
	display:flex;
	list-style:none;
	justify-content:space-between
}
#header nav li a {
	font-size:1.5rem;
	color:#1b1b1b;
	text-decoration:none;
	margin-left:1.5rem;
}
#video {
	margin:5% 0 2% 0;
	position:relative;
	padding-top:50%;
}
#video video {
	display:block;
	max-width:100%;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
#fabricaniu {
	margin:20px auto;
	position:relative;
	max-width:400px;
}
#fabricaniu span {
	display:block;
	padding-top:178%;
}
#fabricaniu video {
	display:block;
	max-width:100%;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
#productos ul, .categoria .ancho {
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
#productos ul li div {
	background:url('img/cat_oscuro.png') center center no-repeat;
	background: #00ADEE;
	background-size:cover;
}
#productos ul li div, .categoria > div  > div {
	cursor:pointer;
}
#productos ul li span {
	background:url('img/cat_claro.png') center center no-repeat;
	background: #E6E6E6;
	background-size:cover;
	display:block;
    transition: background-image 0.4s ease-in-out;
}
#productos ul li div:hover span {
	background-image:url('img/cat_oscuro.png');
	background: #00ADEE;
}
#productos ul li, .categoria .ancho > div {
	margin:2rem;
	list-style:none;
	width:27%;
	position:relative;
}
#productos ul li img, .categoria > div img {
	max-width:100%;
	height:auto;
	display:block;
}
.categoria > div img.over {
	position:absolute;
	top:0;
	left:0;	
	opacity:0;
	transition:opacity 0.4s;
}
.categoria .ancho > div:hover img.over {
	opacity:1;
}
#productos h3 {
	color:#1b1b1b;
	text-align:center;
	font-weight:bold;
	font-size:1.8rem;
	margin:1.8rem;
}
#productos .categoria, .producto_oculto {
	display:none;
}
#popupcont {
	position:relative;
}
#popup {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	display:none;
	z-index:50;
}
#popup > div.ancho {
	background:#fff;
	border-radius:20px;
	position:relative;
	border:1px solid #00ADEE;
}
#prodinfo {
	display:flex;
	padding:2vw 0;
	width:100%;
	position:relative;
}
#prodinfo > div {
	width:50%;
}
#prodinfo > div > img  {
	max-width:90%;
	height:auto;
	width:500px;
	margin:auto;
	display:block;
}
#popup h4 {
	color:#00adee;
	text-transform:uppercase;
	font-size:2rem;
	font-weight:normal;
	margin-bottom:30px;
}
#popup p {
	max-width:600px;
	margin-right:1rem;
	margin-top:0.5rem;
	margin-bottom:0.5rem;
}
#popupclose {
	position:absolute;
	top:2vw;
	right:2vw;	
	background:url('img/closebtn.png') center center no-repeat;
	background-size:contain;
	width:30px;
	height:30px;
	font-size:0;
	cursor:pointer;
	z-index:100;
}
.otrasimg {
	display:flex;
	justify-content:center;
	align-items:center;
}
.otrasimg img {
	max-width:22%;
	display:block;
	height:auto;
	margin:2%;
	cursor:pointer;
}
.relacionados p {
	color:#00adee;	
	font-size:1.2rem;
	margin-top:10%;
	padding-top:15px;
}
.posteos-relacionados {
	display:flex;
}
.posteos-relacionados img {
	max-width:16%;
	margin:2%;
	height:auto;
}
#productos header {
	background:url('img/prod_fondo.jpg') center center no-repeat;
	background-size:cover;
	position:relative;
	overflow:hidden;
}
#productos header h2 {
	padding-top:16%;
	padding-bottom:5%;
	color:#1b1b1b;
	font-size:3.2rem;
}
#productos #pale {
	position:absolute;
    bottom: 10%;
    right: 0;
	max-width:43%;
	width:860px;
	display:block;
	background:url('img/prod_paleta.png') center center no-repeat;
	background-size:contain;
}
#productos #pel1 {
	position:absolute;
    top: 20%;
    left: 36%;
	max-width:15%;
	width:283px;
	display:block;
	background:url('img/prod_pelota1.png') center center no-repeat;
	background-size:contain;
    animation: float 4s ease-in-out infinite;
}
#productos #pel2 {
	position:absolute;
    top: 15%;
    left: 11%;
	max-width:10%;
	width:200px;
	display:block;
	background:url('img/prod_pelota2.png') center center no-repeat;
	background-size:contain;
    animation: float 4s ease-in-out infinite;
	animation-delay: 2s;
}
#productos #pel1:after, #productos #pel2:after {
	content:'';
	display:block;
	padding-top:100%;
}
#productos #pale:after {
	content:'';
	display:block;
	padding-top:44%;
}
@keyframes float {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-12px);
	}
	100% {
		transform: translateY(0);
	}
}
#nosotros {
	background:url('img/nos_fondo.png') bottom center no-repeat #fff;
	background-size:80% auto;
	color:#00adee;
	padding:4vw 0;
}
#nosotros .ancho, #asociacion .ancho {
	display:flex;
	align-items:center;
	justify-content:space-between;
}
#nosotros .ancho > div:first-child {
	width:30%;
}
#nosotros .ancho > div:last-child {
	width:65%;
}
#nosotros .ancho > div video {
	display:block;
	max-width:90%;
	margin:auto;
}
#noselijen .ancho img {
	display:block;
	max-width:70%;
	margin:auto;
}
#nosotros h2 {
	font-size:3rem;
	margin-bottom:2rem;
}
#nosotros p.nosotrossubt {
	font-size:2rem;	
	font-weight:bold;
}
#nosotros p, #asociacion p {
	font-size:1.5rem;	
}
#asociacion {
	background:#00adee;
	color:#fff;
	padding:4vw 0;
	overflow:hidden;
}
#asociacion .ancho > div:first-child {
	width:65%;
}
#asociacion .ancho > div:last-child {
	width:30%;
}
#asociacion .ancho > div img {
	max-width:100%;
	display:block;
	margin:1rem auto;
}
#noselijen header {
	background: url('img/porque_fondo.png') center center no-repeat;
	background-size:cover;
}
#noselijen header .ancho h2 {
	font-size:5rem;
	color:#fff;
	padding:5% 0;
}
#noselijen .pelotacont {
	background: url('img/porque_lateral.png') left center no-repeat;
	background-size:auto 60%;
	color:#1b1b1b;
    padding: 4vw 0;
}
#noselijen .ancho {
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:2vw;
}
#noselijen .ancho > div:first-child {
	width:60%;
}
#noselijen .ancho > div:last-child {
	width:30%;
}
#noselijen ul {
	font-size:1.3rem;
}
#noselijen li {
	margin:1rem 0;
}
#encontranos {
	color:#fff;
	background:#24A9E1;
}
#encontranos h2 {
	text-align:center;
	font-size:3rem;
	padding:2rem 0;
}
#encontranos ul {
	display:flex;
	justify-content:space-between;
	list-style:none;
	padding-bottom:2rem;
}
#encontranos li {
	border:1px solid #fff;
	border-radius:100px;
	padding:1rem;
	width:29%;
	text-align:center;
	cursor:pointer;
}
#encontranos li h3 {
	font-size:1.8rem;
	font-weight:normal;
}
#encontranos li.activo h3 {
	font-weight:bold;
}
#encontranos li.activo {
	background:#fff;
	color:#24A9E1;
	font-weight:bold;
}
#encontranos h4 {
	font-size:1.5rem;
	font-weight:normal;
	text-align:center;
	text-transform:uppercase;
	padding-bottom:2rem;
}
.columnas {
	display:flex;
	flex-wrap:wrap;
}
.columnas > div {
	width:29%;
	margin:1% 2%;
	padding:20px;
	box-sizing:border-box;
}
.columnas h5 {
	font-size:1.2rem;
}
.columnas p {
	font-size:1rem;
	margin:0.5rem 0;
	line-break:anywhere;
}
.columnas p img {
	margin-right: 5px;
}
.zona {
	display:none;
}
.lis {
	display:flex;
	align-items:center;
	justify-content:space-between;
	color:#1b1b1b;
	margin:1.8rem 0;
	font-size:1.3rem;
}
.lis strong {
	font-size:1.5rem;
}
.lis > div:first-child {
	width:14%;
	text-align:right;
}
.lis > div:first-child img {
	max-width:90%;
}
.lis > div:last-child {
	width:84%;
}
#calidad {
	padding:1.8rem 0;
	background: url('img/calidad-fondo.png') center center no-repeat;
	background-size:100% auto:
}
#calidad h2 {
	padding:1.8rem 0;
	font-size:1.8rem;
}
.centrado {
	display:block;
	margin:1.5rem auto;
	max-width:100%;
}
#centrado {
	text-align:center;
}
#centrado strong, #selector_calidad strong {
	text-align:center;
	display:block;
	font-size:1.5rem;
	margin:0.75rem;
}
#selector_calidad {
	display:flex;
	justify-content:center;
	overflow:hidden;
}
#selector_calidad > div {
	margin:2%;
	max-width:25%;
	cursor:pointer;
}
#selector_calidad img {
	display:block;
	margin:auto;
	max-width:100%;
}
#calidad_sec_cont {
	position:relative;
	overflow:hidden;
}
.calidad_sec {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	display:none;
}
#s1, #s2, #s3, #s4, #s5, #s6, #s7, #s8 {
	opacity:0;
	transition:opacity 1s;
}
.visible #s1,.visible #s2,.visible #s3,.visible #s4,.visible #s5,.visible #s6,.visible #s7,.visible #s8 {
	opacity:1;
}
.visible #s1 {
	transition-delay: 0s;
}
.visible #s2 {
	transition-delay: 0.3s;	
}
.visible #s3 {
	transition-delay: 0.6s;
}
.visible #s4 {
	transition-delay: 0.9s;
}
.visible #s5 {
	transition-delay: 1.2s;
}
.visible #s6 {
	transition-delay: 1.5s;
}
.visible #s7 {
	transition-delay: 1.8s;
}
.visible #s8 {
	transition-delay: 3.2s;
}
#asociacion p {
	width:95%;
}
#home {
	position:relative;	
}
#slidersel {
	position:absolute;
	bottom:10%;
	left:0;
	right:0;
	display:flex;
	justify-content:center;
}
#slidersel li {
	width:20px;
	height:20px;
	display:block;
	margin:0 10px;
	border:5px solid #00adee;
	border-radius:100px;
	cursor:pointer;
}
#slidersel li.act {
	background:#00adee;
}
#carro {
	overflow:hidden;
	width:100%;
	position:absolute;
	padding-top:22.5%;
	position:relative;
}
#carro img {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	display:block;
}
#carro img.mob {	
	left:100%;
}
#carro img.off {
	left:100%
}
footer {
	background:#1b1b1b;	
	padding:2rem 0;
}
footer .ancho {
	display:flex;
	align-items:center;
	justify-content:space-around;
	font-size:2rem;
	color:#fff;
}
footer .ancho p a {
	display:flex;
	align-items:center;
	color:inherit;
	text-decoration:none;
	justify-content:center;
}
footer .ancho p img {
	margin-right:8px;
}
#wplink {
	background: url('img/whatsapp.svg') center center no-repeat;
	background-size:cover;
	display:block;
	width:60px;
	position:fixed;
	bottom:3vw;
	right:3vw;
	font-size:0;
	z-index:9999;
}
#wplink:after {
	content:'';
	display:block;
	padding-top:100%;
}
#fabricafotos {
	display:flex;
	justify-content:space-around;
}
#fabricafotos img {
	max-width:30%;
	height:auto;
}
@media (max-width:1400px) {
	#header nav li a {
		font-size: 1.3rem;
		margin-left: 1.3rem;
	}
}
@media (max-width:1200px) {
	#header nav {
		flex-grow:0;
	}
	#carro {
		padding-top:100%;
	}
	#carro img.desk {
		left:100%;
	}
	#carro img.mob {
		left:0;
		display:block;
	}
	#carro img.off {
		left:100%
	}
	#noselijen header .ancho {
		display:block;
	}
	#noselijen header .ancho h2 {
		font-size: 2.5rem;
	}
	#header .logo {
		max-width:40%;
	}
	#header {
		position:relative;
	}
	#header nav ul {
		display:none;
		position:absolute;
		background: #dadada;
		top:100%;
		left:0;
		width:100%;
        z-index: 9999;
	}
	#header nav > a {
		display:block;
		background:url('img/menu.png') center center no-repeat;
		background-size:contain;
		width:40px;
		height:40px;
	}
	#slidersel li {
		width:20px;
		height:20px;
		border-width:4px;
	}
	#productos header h2 {
		padding-top: 25%;
		font-size: 2.5rem;
	}
	#productos #pale {
		bottom:30%;
	}
	#productos ul li, .categoria .ancho > div {
		margin:1rem 2%;
		width:29%;
	}
	#productos h3 {
		font-size: 1rem;
		margin:0.5rem 0;
	}
	#prodinfo {
		display:block;
	}
	#prodinfo > div {
		width:auto;
	}
	#prodinfo > div:last-child {
        margin: 1rem;
	}
	#popup p {
        margin-right: 0;
	}
	
	#popup h4 {
		font-size: 1.8rem;
		margin-bottom: 15px;
	}
	#nosotros .ancho, #asociacion .ancho {
		display:block;
	}
	#nosotros .ancho > div:first-child, #nosotros .ancho > div:last-child, #asociacion .ancho > div:first-child, #asociacion .ancho > div:last-child {
		width:auto;
	}
	#nosotros h2 {
		font-size: 2.5rem;
	}
	#nosotros p.nosotrossubt {
		font-size: 1.8rem;
	}
	#nosotros p, #asociacion p {
		font-size: 1rem;
	}
	#selector_calidad {
		flex-wrap:wrap;
	}
	#centrado strong, #selector_calidad strong {
		font-size: 1rem;
	}
	#selector_calidad > div {
		max-width:25%;
		margin:5%;
		padding:0 !important;
	}
	.lis > div:first-child {
		display:none;
	}
	.lis > div:last-child {
		width:auto;
	}
	#calidad {
		background:none;
	}
	#noselijen .ancho {
		flex-direction:column-reverse;
	}
	#noselijen .ancho > div:first-child, #noselijen .ancho > div:last-child {
		width:auto;		
        margin: 0.5rem 1rem;
	}
	#noselijen .ancho img {
		max-width:50%;
	}
	footer .ancho {
		display:block;
		font-size:1.5rem;
		text-align:center;
	}
	footer .ancho p {
		margin:0.5rem;
		justify-content:center;
	}
	#encontranos h2 {
		font-size:2rem;
	}
	#encontranos li {
		margin:0.5rem;
		padding:0.5rem;
		width:auto;
	}
	#encontranos li h3 {
		font-size:1.3rem;
	}
	#encontranos ul {
		display:block;
	}
	.columnas > div {
		width: 50%;
		margin: 1% 0%;
		padding: 10px;
	}
	#wplink {
		width:20vw;
	}
}