@media screen and (min-width:100px) and (max-width:539px){
	html{ font-size: 0.8rem;}
	#datos_sesion{ width: 100%;}
	#info img{ width: 50px; height: 50px;}
	#log-in > div{ width:90%;}
	#div_logo, #div_bien, #div_button{ left:5%;}
	#login .inputWithIcon i { top:6px !important; font-size:1.5em} 

	.flex{ flex-direction: column;}
	.flex > div{ width: 100%;}
	.filters2, .filters{ grid-template-columns: 1fr;}
	
	.w40,.w50{ width:90%}
	.canales{ grid-template-columns: 1fr; gap:5px}
	.canales img{ height:300px; width: 100%;}
	.canales h1{ font-size: 1.2rem;}
	.cont_canales{ grid-template-columns: 1fr;}

	.intro h1{ font-size:2rem}
	.overlay{ padding:20px}
	.control_menu{ overflow: auto;}
	.semanas td{ padding:3px; font-size: 14px;}
	.contenedor, .video_completo{ width: 90%; margin-left: 5%;}
	header label{ display: none;}
	button{ padding: 5px;}

	#presentacion .titulo{ font-size: 5rem;}
}

@media screen and (min-width:540px) and (max-width:767px){
	#datos_sesion{ width: 100%;}
	#info img{ width: 50px; height: 50px;}
	#log-in > div{ width:90%;}
	#div_logo, #div_bien, #div_button{ left:5%;}
	#login .inputWithIcon i { top:6px !important; font-size:1.5em} 

	.flex{ flex-direction: column;}
	.flex > div{ width: 100%;}
	.filters{ grid-template-columns: 1fr;}
	
	.w40, .w50{ width:90%}
	.cont_canales{ height: auto;}
	.canales{ grid-template-columns: 1fr; gap:5px}
	.canales img{ height: 400px; width: 100%;}
	.canales h1{ font-size: 1.2rem;}
	.cont_canales{ grid-template-columns: 1fr;}
	
	.intro h1{ font-size:3rem}
	.overlay{ padding:20px}
	.control_menu{ overflow: auto;}
	.semanas td{ padding:5px; font-size: 16px;}
	.contenedor, .video_completo{ width: 90%; margin-left: 5%;}
	header label{ display: none;}
	button{ padding: 5px;}
}

@media screen and (min-width:768px) and (max-width:1200px){
	#log-in > div{ width:90%;}
	#div_logo, #div_bien, #div_button{ left:5%;}
	#login .inputWithIcon i { top:6px !important; font-size:1.5em} 
	#info img{ width: 100px; height: 100px;}

	.w40, .w50{ width:90%}
	.canales{ grid-template-columns:repeat(2, 1fr);}
	.canales img{ height: 400px; width: 100%;}
	.canales h1{ font-size: 1.4rem;}
	.cont_canales{ grid-template-columns: repeat(2,1fr);}

	.contenedor, .video_completo{ width: 90%; margin-left: 5%;}
	button{ padding: 5px;}
}

@media screen and (min-width:1201px) and (max-width:1500px){
}