:root{
	--ts-dark: #201e1d;
	--ts-beige: #dbd5c3;
	--ts-red: #cf1e25;
}
@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-Book.woff') format('woff'),
  	   url('../fonts/Gotham-Book.otf') format('otf'),
  	   url('../fonts/Gotham-Book.ttf') format('ttf'),;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Organetto';
  src: url('../fonts/organetto-regular.woff') format('woff'),
  	   url('../fonts/organetto-regular.otf') format('otf'),
  	   url('../fonts/organetto-regular.ttf') format('ttf'),;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Copperplate';
  src: url('../fonts/Copperplate.woff') format('woff'),
  	   url('../fonts/Copperplate.otf') format('otf'),
  	   url('../fonts/Copperplate.ttf') format('ttf'),;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TTNorms';
  src: url('../fonts/TTNorms-Medium.woff') format('woff'),
  	   url('../fonts/TTNorms-Medium.otf') format('otf'),
  	   url('../fonts/TTNorms-Medium.ttf') format('ttf'),;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
body{
	background-color: var(--ts-dark);
	color: var(--ts-dark);
}
h1{
	font-family: 'Gotham';
}
.organetto{
	font-family: 'Organetto';
}
.gotham{
	font-family: 'Gotham';
}
.navbar a{
	font-family: 'Gotham';
	color: #ffffff;
}
.nav-link.active{
	border-bottom: 2px solid var(--ts-red);
}
.bg-dark{
	background-color: var(--ts-dark) !important;
}
.bg-beige{
	background-color: var(--ts-beige);
}
.text-justify{
	text-align: justify;
}
.caption{
	width: 90% !important;
	letter-spacing: 10px;
	position: absolute;
	top: 50px;
	z-index: 1000;
}
#contacto a{
	text-decoration: none;
	color: var(--ts-dark);
}
#contacto i{
	color: var(--ts-beige);
	background-color: var(--ts-dark);
	border-radius: 15px;
	padding: 5px;
}
.img-vh{
	max-height: 100vh;
}
.nosotros-sombra{
	position: absolute;
	right: 0;
	z-index: 1000;
}
.sliding-image {
	position: absolute;
	z-index: 100;
}
.slide-left{
	animation: slideLeft 5s ease-out 1 forwards;
}
.product{
	opacity: 0;
}
.fade-in{
	animation: fadeIn 2s ease-in forwards;
}
.fade-in-2{
	animation-delay: 1.5s;
}
.fade-in-3{
	animation-delay: 3s;
}
.fade-in-4{
	animation-delay: 4.5s;
}
@keyframes slideLeft {
	from{
		transform: translatex(0);
	}
	to{
		transform: translateX(calc(-1 * (var(--img-width) - var(--container-width))));
	}
}
@keyframes fadeIn {
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
@media(max-width: 575px){
	.caption{
		width: 100% !important;
		padding-left: 25px;
		padding-right: 25px;
	}
}