/****************** 4 - RESPONSIVE ***************/
@media (min-width: 1610px) {}

@media (min-width: 1441px) {
	.Header-Menu-Principal {
		width: 90%;
	}
}

@media (max-width: 820px) {
	html {
		font-size: 10px;
	}

	.desktop{
		display: none !important;
	}

	.mobile{
		display: block;
	}

	#productos, #procesos, #nosotros{
		scroll-margin-top: 0;
	}

	.IntroVideoBox.IntroVideoBoxClasicos {
		height: auto;
		padding-bottom: 5rem;
	}

	.Site-IntroVideo {
		height: calc(100vh + 10rem);
	}
	
	.logoInicioMobile{
		display: block;
	}

	.IdiomasBox .LinkIdioma {
		padding: 4px 5px;
		margin-right: 5px;
	}

	.BoxContacto__Correo .Link {
		font-size: 1.4rem;
	}

	.PartidosModal {
		width: 100%;
	}

	.BoxPartidos-List .Item .Fecha {
		color: #c5c5c5;
		margin-right: 15px;
		width: 100%;

	}

	.BoxPartidos-List .Item {
		padding: 10px 0;
	}

	.separadorVideo{
		height: 12rem;
		clip-path: polygon(0 0, 100% 40%, 100% 100%, 0% 100%);
	}

	.fancybox-content {
		background: #fff;
		display: inline-block;
		margin: 0;
		max-width: 100%;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		padding: 25px 10px;
		position: relative;
		text-align: left;
		vertical-align: middle;
	}

	.BoxInstitucional .Title {
		color: #333;
		font-size: 2rem;
		line-height: 2.4rem;
		font-family: 'Sansita Swashed', cursive;
	}

	.BoxVision{
		margin: 1rem !important;

		.Parrafo{
			margin-bottom: 0;
		}
	}

	.BoxVision .Title {
		font-size: 3rem;
		line-height: 3rem;
		font-family: 'Sansita Swashed', cursive;
		color: #252651;
	}

	.BoxVision .Title .Text {
		font-size: 3rem;
		line-height: 3rem;
		display: block;
	}

	.BoxInstitucional .Text.TextDestacadoIntro {
		font-size: 2rem;
		line-height: 2rem;
		font-family: 'Sansita Swashed', cursive;
		color: #252651;
	}

	.BoxInstitucional .Text.TextDestacado {
		font-size: 1.6rem;
		line-height: 1.4rem;
		font-weight: 600;
	}

	.Link {
		margin: 0 0rem;
	}

	.Link .IconLine {
		background: url(../../assets/images/detalle-intro-line.png);
		width: 65px;
		height: 2px;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.BoxVideo-BoxText .Text br {
		display: none;
	}

	.BoxVision .SubTitle {
		font-size: 1.2rem;
	}

	.BoxVideo {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		height: auto;
		overflow: hidden;
		flex-wrap: wrap;
	}

	.BoxVideo-BoxText {
		position: relative;
		text-align: center;
		width: 100%;
		z-index: 2;
		order: 1;
		top: -100px;
	}

	.BoxVision.BoxMasInformacion .Link {
		font-size: 1.2rem;
	}

	.BoxVideo-BoxText {
		width: 100%;
		padding: 0 1rem;
	}

	.separadorImagen{
		height: 10rem;
		clip-path: polygon(0 0, 100% 30%, 100% 100%, 0% 100%);

		h1{
			font-size: 2rem;
		}
	}

	.MenuFlotante-List .MenuFlotante-MenuMobile {
		display: inline-block;
	}

	.IntroVideoBox .IntroVideoBox-img {
		width: 100% !important;
		left: 0;
		margin-left: 0px;
		padding: 0 15px;
		bottom: 10%;
	}

	.IntroVideoBox .IntroVideoBox-img .Link {
		display: none;
	}

	.Header-Menu {
		background-color: transparent;

		&::before {
			display: none;
		}

		.botonMenuMobile {
			display: flex;
		}

		.row {
			display: none;
			height: 100%;
		}
	}

	.Site-IntroVideo {
		.container-fluid {
			height: 100%;

			.row {
				height: 100%;

				.IntroVideoBox-Grid {
					height: 100%;

					.IntroVideoBox {
						video {
							height: 100%;
						}
					}
				}
			}
		}
	}

	.Header-Menu.HeaderActive {
		background: none;
	}

	.Header-Logo .LogoPrincipal {
		height: 70px !important;
	}

	.IntroVideoBox .IntroVideoBox-img .Text {
		font-size: 1.6em;
		line-height: 1.6rem;
		margin-bottom: 0;
	}

	.IntroVideoBox {
		position: relative;
		height: auto;
		height: 100%;
	}

	.IntroVideoBox .Video {
		height: auto;
		display: block;
		width: 100%;
		object-fit: cover;
		height: 100%;
	}

	.MenuFlotante {
		widows: 100%;
		display: flex;
	}

	.nuestrosProductos{
		padding-bottom: 2rem;

		.row .divProducto{
			height: 20rem;
			width: 100%;
			margin-bottom: 1rem;

			img{
				object-fit: cover;
				width: 100%;
			}

			.variedades{
				h2{
					line-height: 1.6rem;
				}
			}
		}
	}

	.procesos{
		padding: 0 !important;

		.slider{
			width: 100%;
			justify-content: center;
			padding: 1rem;
			flex-direction: column;

			.SliderInstitutoAFA-Grid{
				max-width: 100%;
				overflow: hidden;
				border-radius: 6px;
			}

			.contenedorTextos{
				width: 100%;
				
				p{
					width: 90%;
					text-align: center;
					margin: 0 auto;
					margin-top: 1rem;
					font-weight: 600;
				}
			}
		}

		.slider1, .slider3{
			.contenedorTextos{
				width: 100%;

				h1{
					text-align: left;
				}
			}
		}

		.slider2, .slider4{
			.contenedorTextos{
				width: 100%;

				h1{
					text-align: right;
				}
			}
		}

		p{
			width: 20rem;
		}

		.LineDivider{
			margin-bottom: 1rem !important;
		}
	}

	.vision{

		padding: 1rem 0 !important;

		.container{
			padding: 2rem !important;
		}

		.Title{
			padding-bottom: 1rem;
		}

		.Parrafo{
			font-size: 1.3rem;
		}
	}

	.BoxMenu {
		width: 100%;
		text-align: right;
		position: relative;
		right: 0;
		flex-wrap: wrap;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 15px 0;
	}

	.BoxMenu .BoxMenu-Link {
		padding: 5px 10px;
		font-size: 0.7rem;
		letter-spacing: 1px;
		width: 50%;
		text-align: center;
	}

	.contacto{
		.container{
			padding: 2rem 0 !important;
		}
	}
}

@media (max-width: 1333px){
	.nuestrosProductos{
		.divProducto{
			.variedades{
				h2{
					font-size: 1.2rem;
					line-height: 30px;
				}
			}
		}
	}
}