@charset "utf-8";
/* CSS Document */
*{
	box-sizing: border-box;
}
html{
	scroll-behavior:smooth;
}
.containerIndex{
	display:flex;
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	align-items: center;
	flex-direction: column;
}

.sectionContainerIndex{
	width:100%;
	padding: 16px;
	background-image: url(../../img/index/pizzaPreparada.webp);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right;
}
.titleIndex{
	font-size:900%;
	color:#311b92;
	padding: 30px 0px;
	font-style: italic;
}
.titleIndex span{
	font-size:50%;
}
.subTitleIndex{
	font-size:300%;
	max-width: 800px;
	padding: 70px 0px;
	color: #263238;
	font-style:italic;
}
.containerButton{
	max-width: 800px;
}
.buttonIndex {
	box-shadow: 0px 1px 9px 0px #5e5e5e;
	background-color:#5cbf2a;
	border-radius:7px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:xx-large;
	padding:10px 31px;
	text-decoration:none;
	text-shadow:0px 1px 4px #2f6627;
	width: 100%;
	text-align:center;
	font-style: italic;
}
.buttonIndex:hover {
	background-color:#44c767 ;
}
.buttonIndex:active {
	position:relative;
	top:1px;
}
.containerPara{
	padding: 40px 16px;
	
}
.paraIndex{
	color:#263238;
	font-size:150%;
	font-style:italic;
	line-height: 1.6;
}

/*---------------------------*/
.sectionProductos{
	background-color:#311b92;
	margin-bottom: 40px;
	box-sizing: border-box;
}
.containerFilter{
	box-sizing:border-box;
	display: flex;
	max-width: 1600px;
	margin: 0 auto;
	justify-content: space-evenly;
    align-items: baseline;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 15px;
}
.titleContainer{
	justify-content: center;
}
.filter{
	box-sizing:border-box;
	display: flex;
	align-items: center;
	color: #fff;
	justify-content: center;
}
.filter h1{
	box-sizing: border-box;
	font-size:xx-large;
	padding: 5px;
}

.selectFilter{
	background-color:#fff;
	color: #263238;
	box-sizing: border-box;
	padding: 5px;
	font-size: large;
	border-radius: 7px;
}

.sectionProductsTitle{
	color:#5cbf2a;
	padding: 8px;
	max-width: 1600px;
	margin: 0 auto;
	font-size:xx-large;
	text-align: center;
}
.containerCategoryProduct{
	width:100%;
	display: flex;
	flex-direction: row;
	box-sizing: border-box;
	padding: 5px;
	max-width: 1600px;
	margin: 0 auto;
	flex-wrap: wrap;
}
.containerProductItem{
	width:calc(20% - 12px);
	margin:6px;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 7px;
	cursor: pointer;
}

.linkToModalItem:hover{
	width:90%;
	margin: 0 auto;
}
.linkToModalItem{
	text-decoration:none;
	background-color: #fff;
	border-radius: 7px;
}
.imgProductItem{
	width:100%;
	border-radius: 7px;
}
.titleItem{
	font-size:large;
	color:#311b92;
	padding:0px 5px;
	box-sizing: border-box;
}
.priceProductItem{
	font-size:large;
	padding:0px 5px;
	box-sizing: border-box;
	color:#311b92;
}
.buttonLinkItem{
	width:100%;
	box-sizing: border-box;
	padding: 0px 5px 5px;
	display: block;
	font-size: medium;
	text-align: right;
}
@media screen and (max-width: 720px) {

.containerIndex{
	display:flex;
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	align-items: center;
	flex-direction: column;
}

.sectionContainerIndex{
	width:100%;
	padding: 16px;
	background-image: url(../../img/index/pizzaPreparada.webp);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right;
}
.titleIndex{
	font-size:400%;
	color:#311b92;
	padding: 0px 0px;
	font-style: italic;
}
.titleIndex span{
	font-size:60%;
}
.subTitleIndex{
	font-size:200%;
	max-width: 50%;
	padding: 20px 0px;
	color: #263238;
	font-style:italic;
}
.containerButton{
	max-width: 200px;
}
.buttonIndex {
	background-color:#5cbf2a;
	border-radius:5px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:20px;
	padding:10px 31px;
	text-decoration:none;
	text-shadow:0px 1px 4px #2f6627;
	width: 100%;
	text-align:center;
}
.buttonIndex:hover {
	background-color:#44c767 ;
}
.buttonIndex:active {
	position:relative;
	top:1px;
}
.containerPara{
	padding: 20px 16px 40px;
	
}
.paraIndex{
	font-size: medium;
	line-height: 1.3;
}
/*-----------------------*/
	.containerProductItem{
	width:calc(33% - 12px);
	margin:6px;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 7px;
	cursor: pointer;
}
	
}
@media screen and (max-width: 500px) {

.containerIndex{
	display:flex;
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	align-items: center;
	flex-direction: column;
}

.sectionContainerIndex{
	width:100%;
	padding: 16px;
	background-image: url(../../img/index/pizzaPreparada.webp);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right;
}
.titleIndex{
	font-size:xx-large;
	color:#311b92;
	padding: 0px 0px;
	font-style: italic;
}
.titleIndex span{
	font-size:medium;
}
.subTitleIndex{
	font-size:medium;
	max-width: 200px;
	padding: 20px 0px;
	color: #263238;
	font-style:italic;
}
.containerButton{
	max-width: 200px;
}
.buttonIndex {
	background-color:#5cbf2a;
	border-radius:5px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:20px;
	padding:10px 31px;
	text-decoration:none;
	text-shadow:0px 1px 4px #2f6627;
	width: 100%;
	text-align:center;
}
.buttonIndex:hover {
	background-color:#44c767 ;
}
.buttonIndex:active {
	position:relative;
	top:1px;
}
.containerPara{
	padding: 20px 16px 40px;
	
}
.paraIndex{
	font-size: medium;
	line-height: 1.3;
}
	
/*-------------*/
.titleContainer{
	width: 100%;
}
.filter{
	width: 100%;
}
	
.containerFilter{
	box-sizing:border-box;
	display: flex;
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	justify-content: space-evenly;
    align-items: baseline;
	flex-direction: column;
	flex-wrap: wrap;
}
/*------------------------*/
	.containerProductItem{
	width:calc(50% - 12px);
	margin:6px;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 7px;
	cursor: pointer;
}
	
}