@import url('https://fonts.googleapis.com/css?family=Istok+Web');
@import url('https://fonts.googleapis.com/css?family=Courgette');

@font-face{ 
	font-family: 'Aganè';
	src: url('../fonts/agane/Aganè-ExtraBold.ttf') format('truetype');
	font-weight: bolder;
	font-style: normal;
}

@font-face{ 
	font-family: 'Aganè';
	src: url('../fonts/agane/Aganè-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face{ 
	font-family: 'Aganè';
	src: url('../fonts/agane/Aganè-Normal.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face{ 
	font-family: 'Aganè';
	src: url('../fonts/agane/Aganè-Light.ttf') format('truetype');
	font-weight: lighter;
	font-style: normal;
}

/*@font-face{ 
	font-family: 'Brush Script';
	src: url('../fonts/Brush-Script.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}*/

:root {
	
}

body {
	color: #4E4E4E;
	--primaryColor: #F7BE32;
	--primaryDarkColor: #CCA345;
}

hr {
	margin-top: 0;
	margin-bottom: 1rem;
	border: 0;
	border-top: 1px solid var(--primaryColor);
}

.navbar {
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05);
	height: 70px;
	-webkit-transition: height 0.5s;
	transition: height 0.5s;
}

.shrink-nav {
	background-color: red;
}

.shrink-nav.navbar {
	height: 45px;
}

@media screen and (max-width: 767.98px) { 
	.shrink-nav.navbar {
		height: 70px;
	}
}

.nav-link {
	color: #9A9A9A;
	font-family: "Istok Web";
	font-size: 16px;
	font-weight: bold;
	line-height: 23px;
	text-align: center;
	-webkit-transition: font-size 0.5s;
	transition: font-size 0.5s;
}

.shrink-nav .nav-link {
	color: #9A9A9A;
	font-family: "Istok Web";
	font-size: 14px;
	font-weight: bold;
	line-height: 20px;
	text-align: center;
}

.nav-link:hover, .active > .nav-link {
	color: var(--primaryColor) !important;
	border-bottom: var(--primaryColor) 2px solid;
}

.shrink-nav .nav-link:hover, .shrink-nav .active > .nav-link {
	color: var(--primaryColor) !important;
	border-bottom: none;
}

#nav-container {
	-webkit-transition: padding 0.5s;
	transition: padding 0.5s;
}

.shrink-nav #nav-container {
	padding-left: 50px;
	padding-right: 50px;
}

.logo-container {
	box-sizing: border-box;
	margin-top: -60.3px;
	padding-top: 60.3px;
	height: 167.3px;
	width: 167.3px;
	background-color: #FFFFFF;
	border: 3.3px solid var(--primaryColor);
	border-radius: 50%;
	box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.11);
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-transition: margin 0.0s;
	transition: margin 0.0s;
}

.shrink-nav .logo-container {
	margin-top: calc(-60.3px + 25px);
	background-color: transparent;
	border: none;
	box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.0);
}

#familia-trigon {
	--height: 632;
	width: 100%;
	height: calc(var(--height) * 1px);
	min-height: calc(var(--height) * 1px);
	background-position: center;
	background-image: url('/images/familia-trigon-home.jpg');
	background-size: cover;
}

#familia-trigon h1 {
	color: #FFFFFF;
	font-family: 'Aganè';
	font-size: 40px;
	font-weight: 300;
	line-height: 48px;
}

#familia-trigon h1 > span {
	color: var(--primaryColor);
	font-family: 'Aganè';
	font-size: 40px;
	font-weight: bold;
	line-height: 48px;
}

#familia-trigon p {
color: #FFFFFF;
	font-family: 'Aganè';
	font-size: 18px;
	line-height: 18px;
}

#trapezoid {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	border-bottom: calc(var(--height) * 1px) solid rgba(0,0,0,0.8);
	border-left: calc(var(--height) * 0.8 * 1px) solid transparent;
	height: 0;
	width: 864px;
	margin: 0;
}

#relacion-mayoristas {

}

#relacion-con {
	color: #4E4E4E;
	font-family: 'Aganè';
	font-size: 25px;
	line-height: 30px;
	text-align: left;
}

#mayoristas {
	color: var(--primaryColor);
	font-family: 'Aganè';
	font-size: 45px;
	font-weight: bold;
	line-height: 54px;
	text-align: left;
	margin-top: -15px;
	margin-bottom: 15px;
}

#relacion-mayoristas p {
	color: #4E4E4E;
	font-family: 'Aganè';
	font-size: 18px;
	font-weight: 300;
	line-height: 18px;
}

#relacion-mayoristas .btn-yellow, #familia-trigon .btn-yellow, #home-banner .btn-yellow {
	height: 31px;
	width: 224px;
	border-radius: 15.5px;
	background-color: var(--primaryColor);
	color: white;
	font-family: 'Aganè';
	font-size: 16px;
	font-weight: bold;
	line-height: 19px;
	text-align: center;
}

#relacion-mayoristas .btn-yellow:hover, #familia-trigon .btn-yellow:hover, #home-banner .btn-yellow:hover {
	background-color: var(--primaryDarkColor)
}

#home-banner {
	position: relative;
	height: 630px;
	background-position: center;
	background-image: url('/images/todos-los-productos.jpeg');
	background-size: cover;
}

#home-banner h1 {
	color: #FFFFFF;
	font-family: 'Aganè';
	font-size: 49px;
	font-weight: bold;
	line-height: 49px;
	text-align: left;
}

#home-banner h1 > span {
	font-family: 'Courgette';
	font-weight: normal;
	font-size: 49px;
}

#home-banner p {
	max-width: 450px;
	color: #FFFFFF;
	font-family: 'Aganè';
	font-size: 18px;
	line-height: 20px;
	margin-top: 20px;
}

.overlay:before{
  position: absolute;
  content: " ";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  background-color: rgba(0,0,0,0.3);
}

#footer {
	min-height: 226px;
	width: 100%;
	background-color: #252525;
	padding-top: 38px;
	padding-bottom: 35px;
}

#footer ul {
  list-style-type: none;
}

.footer-link {
	color: #FFFFFFEE;
	font-family: 'Aganè';
	font-size: 16px;
	font-weight: bold;
	line-height: 19px;
	text-decoration: none;
}

.footer-link:hover {
	color: #FFFFFF;
	text-decoration: none;
}

#footer .label {
	color: #FFFFFF;
	font-family: 'Aganè';
	font-size: 12px;
	font-weight: lighter;
	line-height: 14px;
	margin: 0;
}

#footer h4 {
	color: var(--primaryColor);
	font-family: 'Aganè';
	font-size: 18px;
	font-weight: bold;
	line-height: 22px;
	margin: 0;
	white-space: nowrap;
  overflow: hidden;
}

.btn-sucursales-fb {
	height: 32px;
	width: 162px;
	border-radius: 18.5px;
	background-color: #3C52A0;
	color: #FFFFFF;
	font-family: 'Aganè';
	font-size: 12px;
	font-weight: normal;
	line-height: 14px;
}

.cp-right {
	color: #FFFFFF;
	font-family: 'Aganè';
	font-size: 14px;
	line-height: 18px;
	text-align: center;
	margin: 2px;
}

.section {
	position: relative;
	/* min-height: 675px; */
}

.triangle-topleft {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border-top: 532px solid var(--primaryColor);
	border-right: 388px solid transparent;
	z-index: -1;
}

.triangle-bottomright {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 0;
	height: 0;
	border-bottom: 532px solid var(--primaryColor);
	border-left: 388px solid transparent;
	z-index: -1;
}

.home-card {
	width: 304px;
	padding: 20px;
	text-align: center;
	background-color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	-webkit-transition: all 0.5s; /* Safari */
  transition: all 0.5s;
}

.home-card:hover {
	box-shadow: 3px 4px 4px 0 rgba(0,0,0,0.14);
}

.home-card-image {
	height: 232px;
	width: 232px;
	border-radius: 50%;
	/* background-color: rgb(214, 214, 214); */
	margin-bottom: 13px;
	object-fit: cover;
}

.crianza-card-title {
	height: 36px;
	width: 212px;
	border-radius: 15.5px;
	background: transparent;
	color: black;
	font-family: 'Aganè';
	font-size: 20px;
	font-weight: bold;
	line-height: 24px;
	text-align: center;
	-webkit-transition: all 0.5s; /* Safari */
	transition: all 0.5s;
	margin-bottom: 13px;
}

/* :hover > .btn-pill-yellow {
	background: var(--primaryColor);
	color: #FFFFFF;
} */

@media (max-width: 767px) { 
	.home-card {
		box-shadow: 3px 4px 4px 0 rgba(0,0,0,0.14);
	}

	.btn-pill-yellow {
		background: var(--primaryColor);
		color: #FFFFFF;
	}
}

.btn-pill-yellow.small {
	margin-top: 26px;
	margin-bottom: 22px;
	height: 38px;
	border-radius: 19px;
	background-color: var(--primaryColor);
	color: #FFFFFF;
	font-family: 'Aganè';
	font-size: 18px;
	font-weight: bold;
	line-height: 26px;
	text-align: center;
}

.btn-pill-yellow.small:hover {
	background-color: var(--primaryDarkColor);
}

.home-card > p {
	align-self: stretch;
	color: #4E4E4E !important;
	font-family: "Istok Web";
	font-size: 12px;
	line-height: 17px;
	text-align: center;
}

#crianza-trigon .title {
	color: #4E4E4E;
	font-family: 'Aganè';
	font-size: 48px;
	font-weight: bold;
	line-height: 54px;
	text-align: center;
	margin-bottom: 0;
}

#crianza-trigon .subtitle {
	color: var(--primaryColor);
	font-family: 'Aganè';
	font-size: 25px;
	font-weight: normal;
	line-height: 30px;
	text-align: center;
}

#crianza-trigon p {
	color: #4E4E4E;
	font-family: "Istok Web";
	font-size: 16px;
	line-height: 17px;
	text-align: center;
}

#seccion-sucursales {
	--height: 763;
	--triangleWidth: 753;
	min-height: calc(var(--height) * 1px);
	/* height: calc(var(--height) * 1px); */
	background-color: var(--primaryColor);
}
/* 
.paralelograma {
	position: absolute;
	left: calc(var(--height) / 2 * 1px);
	top:0;
	width: calc(var(--height) * 1px);
	height: calc(var(--height) * 1px);
	background-color: var(--primaryColor);
	-webkit-transform: skew(45deg);
	-moz-transform: skew(45deg);
	-o-transform: skew(45deg);
} */

#seccion-sucursales h1 {
	color: #FFFFFF;
	font-family: 'Aganè';
	font-size: 74px;
	font-weight: bold;
	letter-spacing: 1.25px;	
	line-height: 74px;
}

#seccion-sucursales p {
	max-width: 467px;
	color: #4E4E4E;
	font-family: 'Aganè';
	font-size: 18px;
	line-height: 24px;
}

#seccion-sucursales .s-card-small {
	height: 241.86px;
	width: 225.22px; 
	border: 1px solid var(--primaryColor);
	border-radius: 14.69px;
	background-color: #FFFFFF;
}

#seccion-sucursales .s-card-large {
	height: 241.86px;
	width: 450.43px;
	border: 1px solid var(--primaryColor);
	border-radius: 14.69px;
	background-color: #FFFFFF;
}

@media screen and (max-width: 1199.98px) {
	#seccion-sucursales .triangle-topright {
		--triangleWidth: 450;
	}

	#seccion-sucursales .triangle-bottomleft {
		--triangleWidth: 450;
	}

	#seccion-sucursales .s-card-large {
		width: 450.43px;
		text-align: left;
	}

	#seccion-sucursales h1 {
		color: #FFFFFF;
		font-size: 74px;
		letter-spacing: 1.25px;	
		line-height: 74px;
	}
}

@media screen and (max-width: 991.98px) { 
	#seccion-sucursales .triangle-topright {
		--triangleWidth: 200;
	}

	#seccion-sucursales .triangle-bottomleft {
		--triangleWidth: 200;
	}

}

@media screen and (max-width: 767.98px) { 
	#seccion-sucursales .triangle-topright {
		--triangleWidth: 100;
	}

	#seccion-sucursales .triangle-bottomleft {
		--triangleWidth: 100;
	}

	#seccion-sucursales h1 {
		color: #FFFFFF;
		font-size: 54px;
		letter-spacing: 1.15px;	
		line-height: 54px;
	}
}

@media screen and (max-width: 575.98px) {
	#seccion-sucursales .triangle-topright {
		--triangleWidth: 0;
	}

	#seccion-sucursales .triangle-bottomleft {
		--triangleWidth: 0;
	}

	#seccion-sucursales .s-card-large {
		width: 225.22px;
		text-align: center;
	}
}

#seccion-sucursales .triangle-topright {
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-top: calc(var(--height) * 1px) solid white;
	border-left: calc(var(--triangleWidth) * 1px) solid transparent;
	z-index: 0;
}

#seccion-sucursales .triangle-bottomleft {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 0;
	border-bottom: calc(var(--height) * 1px) solid white;
	border-right: calc(var(--triangleWidth) * 1px) solid transparent;
	z-index: 0;
}

.btn-pill-white {
	height: 31px;
	width: 287px;
	border-radius: 15.5px;
	background-color: #FFFFFF;
	color: #4E4E4E;
	font-family: 'Aganè';
	font-size: 14px;
	line-height: 18px;
	text-align: center;
	margin-top: 36.14px;
}

#mapa-svg {
	width: 100%;
	max-height: 70%;
}

#tarjeta-mapa h4 {
	color: var(--primaryColor);
	font-family: 'Aganè';
	font-size: 29.38px;
	font-weight: bold;
	line-height: 30px;
	text-align: center;
	margin-top: 21px;
	margin-bottom: 0;
}

#contenido-tri-super h2 {
	color: var(--primaryColor);
	font-family: 'Aganè';
	font-size: 40px;
	font-weight: bold;
	line-height: 40px;
	margin-bottom: -7px;
}

#contenido-tri-super lead {
	width: 94px;
	color: #252525;
	font-family: 'Aganè';
	font-size: 14.69px;
	font-weight: 300;
	line-height: 15px;
	margin-top: 0;
	margin-bottom: 0;
}

#contenido-tri-super p {
	width: 193.88px;
	color: #4E4E4E;
	font-family: 'Aganè';
	font-size: 14px;
	font-weight: 300;
	line-height: 16px;
	margin-top: 11px;
}

#contenido-tri-super .btn-pill-yellow {
	height: 30.36px;
	width: 90%;
	border-radius: 15.18px;
	background-color: var(--primaryColor);
	color: #FFFFFF;
	font-family: 'Aganè';
	font-size: 16px;
	font-weight: bold;
	line-height: 19px;
	text-align: center;
}

#contenido-tri-super .btn-pill-yellow:hover {
	background-color: var(--primaryDarkColor);
}