@charset "utf-8";
/* CSS Document */

@media only screen and (max-width: 450px) {
	.ini{
		position:relative;
		width:100%;
		margin-left:auto;
		margin-right:auto;
	}
	.logo{
		left: 17px;
		top: 73px;
	}
	.logo img{
		width: 75%;
		height: 75%;
	}
	.redes {
    position: absolute;
    top: 5px;
    left: 0px;
		right: unset;
	}
	.menu-back{
		display: none;
	}
	.menu{
		width: 100%;
		z-index: 30;
		right: unset;
		top: 85px;
	}
	#menu{
		position: relative;
		top: 120px;
		width: 90%;
		padding: 0px;
		margin: 0px;
		left: unset;
		margin-left: auto;
		margin-right: auto;
		display: none;
		z-index: 100;
	}
	#menu li{
		display: block;
		width: 100%;
		text-align: center;
		font-weight: bold;
		border-bottom: 1px solid #444;
		background-color: red;
	}
	#menu a{
		font-size: 19px;
		height: 70px;
	}
	.link, .link div{
		height: 45px;
		transform: none;
		width: 100%;
		padding: 0;
	}
	.link div{
		background-color: #FF0000;
	}
	#open{
		position: absolute;
		top: 75px;
		right: 17px;
		width: 32px;
		height: 32px;
		display: block;
		background-image: url("../imagenes/menu.png");
		cursor: pointer;
	}
	#close{
		position: absolute;
		top: 75px;
		right: 17px;
		width: 32px;
		height: 32px;
		display: none;
		background-image: url("../imagenes/close.png");
		cursor: pointer;
	}
	.separa{
		top: 333px;
	}
	.tit-productod{
		position: relative;
		top: 0px;
		}
	.destacado{
		text-align: center;
	}
	.content2{
		top: 20px;
		display: flex;
		flex-wrap: wrap;
		min-height: 1225px;
		justify-content: center;
	}
	.g1,.g2,.g3,.g4{
		position: relative;
		left: unset;
		width: 224px;
		height: 305px;
	}
	.img-destacado{
		top: 20px;
	}
	.controlr{
		display: flex;
		height: 130px;
	}
	#opciones{
		display: none;
	}
	.izq{
		position: relative;
		top: 0px;
		border: none;
		width: 100%;
		left: unset;
	}
	.der{
		position: relative;
		top: 16px;
		left: unset;
	}
	.buscab{
		position: relative;
		margin-right: auto;
		margin-left: auto;
		display: block;
	}
	.rines{
		justify-content: center;
	}
	.form{
		width: 100%;
		box-sizing: border-box;
	}
	.grapaform{
		position: relative;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		left: 0px;
	}
	.mensage{
		left: 0;
		right: 0;
		top: 159px;
		bottom: 0;
		margin-left: auto;
		margin-right: auto;
	}
	.infocr{
		width: 100%;
		height: auto;
	}
	.img-info{
		top: 0px;
		left: 0px;
		position: relative;
		width: 100%;
		height: 100%;
	}
	.img-info img{
		width: 100%;
		height: 100%;
	}
	.info{
		position: relative;
		top: 0px;
		left: 0px;
		width: 100%;
	}
	.avisot{
		padding: 0 10px;
		box-sizing: border-box;
	}
	.infoc{
		position: relative;
		width: 100%;
	}
	.grapaf{
		width: 100%;
	}
	.aw{
		right: 10px;
	}
	.aviso{
		left: 10px;
	}
}
@media only screen and (min-width: 667px) and (max-width: 1024px) {
	.ini{
		position:relative;
		width:100%;
		margin-left:auto;
		margin-right:auto;
	}
	.logo{
		left: 17px;
		top: 73px;
	}
	.logo img{
		width: 75%;
		height: 75%;
	}
	.redes {
    position: absolute;
    top: 5px;
    left: 0px;
		right: unset;
	}
	.menu-back{
		display: none;
	}
	.menu{
		width: 100%;
		z-index: 30;
		right: unset;
		top: 85px;
	}
	#menu{
		position: relative;
		top: 120px;
		width: 90%;
		padding: 0px;
		margin: 0px;
		left: unset;
		margin-left: auto;
		margin-right: auto;
		display: none;
		z-index: 100;
	}
	#menu li{
		display: block;
		width: 100%;
		text-align: center;
		font-weight: bold;
		border-bottom: 1px solid #444;
		background-color: red;
	}
	#menu a{
		font-size: 19px;
		height: 70px;
	}
	.link, .link div{
		height: 45px;
		transform: none;
		width: 100%;
		padding: 0;
	}
	.link div{
		background-color: #FF0000;
	}
	#open{
		position: absolute;
		top: 75px;
		right: 17px;
		width: 32px;
		height: 32px;
		display: block;
		background-image: url("../imagenes/menu.png");
		cursor: pointer;
	}
	#close{
		position: absolute;
		top: 75px;
		right: 17px;
		width: 32px;
		height: 32px;
		display: none;
		background-image: url("../imagenes/close.png");
		cursor: pointer;
	}
	.separa{
		top: 412px;
	}
	.tit-productod{
		position: relative;
		top: 0px;
		}
	.destacado{
		text-align: center;
	}
	.content2{
		top: 20px;
		display: flex;
		flex-wrap: wrap;
		min-height: 664px;
		justify-content: center;
	}
	.g1,.g2,.g3,.g4{
		position: relative;
		left: unset;
		width: 224px;
		height: 305px;
		margin: 15px;
	}
	.img-destacado{
		top: 20px;
	}
	.controlr{
		display: flex;
		height: 130px;
		justify-content: center;
	}
	#opciones{
		display: none;
	}
	.izq{
		position: relative;
		top: 0px;
		border: none;
		width: 100%;
		left: unset;
	}
	.der{
		position: relative;
		top: 16px;
		left: unset;
	}
	.buscab{
		position: relative;
		margin-right: auto;
		margin-left: auto;
		display: block;
	}
	.rines{
		justify-content: center;
	}
	.form{
		width: 100%;
		box-sizing: border-box;
	}
	.grapaform{
		position: relative;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		left: 0px;
	}
	.mensage{
		left: 0;
		right: 0;
		top: 159px;
		bottom: 0;
		margin-left: auto;
		margin-right: auto;
	}
	.infocr{
		width: 100%;
		height: auto;
	}
	.img-info{
		top: 0px;
		left: 0px;
		position: relative;
		width: 100%;
		height: 100%;
	}
	.img-info img{
		width: 100%;
		height: 100%;
	}
	.info{
		position: relative;
		top: 0px;
		left: 0px;
		width: 100%;
	}
	.avisot{
		padding: 0 10px;
		box-sizing: border-box;
	}
	.infoc{
		position: relative;
		width: 100%;
	}
	.grapaf{
		width: 100%;
	}
	.aw{
		right: 10px;
	}
	.aviso{
		left: 10px;
	}
}