/*----------------------------------------------

[Theme CSS]

Theme   : La Miellerie Belfortaine
Version : 1.0.0
Based on: Shock by Codings

----------------------------------------------*/

/*----------------------------------------------

[Content Index]

1. Color
2. Typography

----------------------------------------------*/

/*----------------------------------------------
1. Color
----------------------------------------------*/

/* #region Color */

:root {

	/* Primary - Or Miel */
	--primary-color: #D4A017;
	--primary-15-color: #D4A01726;
	--primary-25-color: #D4A01740;
	--primary-50-color: #D4A01780;
	--primary-75-color: #D4A017bf;

	/* Secondary - Brun Ruche */
	--secondary-color: #8B5A2B;
	--secondary-15-color: #8B5A2B26;
	--secondary-25-color: #8B5A2B40;
	--secondary-50-color: #8B5A2B80;
	--secondary-75-color: #8B5A2Bbf;

	/* Tertiary - Jaune Pollen */
	--tertiary-color: #F5C518;
	--tertiary-15-color: #F5C51826;
	--tertiary-25-color: #F5C51840;
	--tertiary-50-color: #F5C51880;
	--tertiary-75-color: #F5C518bf;

	/* Auxiliary - Vert Nature pour Bio */
	--accent-color: #2E5A1C;
	--success-color: #2E5A1C;
	--info-color: #8B5A2B;
	--warning-color: #D4A017;
	--danger-color: #8B4513;

	/* White */
	--white-color: #fff;
	--white-10-color: rgba(255, 255, 255, 0.1);
	--white-25-color: rgba(255, 255, 255, 0.25);
	--white-50-color: rgba(255, 255, 255, 0.50);
	--white-65-color: rgba(255, 255, 255, 0.65);
	--white-75-color: rgba(255, 255, 255, 0.75);
	--white-85-color: rgba(255, 255, 255, 0.85);

	/* Gray */
	--gray-color: #8f93a5;
	--gray-10-color: rgba(143, 147, 165, 0.1);
	--gray-25-color: rgba(143, 147, 165, 0.25);
	--gray-50-color: rgba(143, 147, 165, 0.50);
	--gray-65-color: rgba(143, 147, 165, 0.65);
	--gray-75-color: rgba(143, 147, 165, 0.75);
	--gray-85-color: rgba(143, 147, 165, 0.85);

	/* Black */
	--black-color: #1a1a20;
	--black-10-color: rgba(26, 26, 32, 0.1);
	--black-25-color: rgba(26, 26, 32, 0.25);
	--black-50-color: rgba(26, 26, 32, 0.50);
	--black-65-color: rgba(26, 26, 32, 0.65);
	--black-75-color: rgba(26, 26, 32, 0.75);
	--black-85-color: rgba(26, 26, 32, 0.85);
}

/* #endregion Color */

/*----------------------------------------------
2. Typography
----------------------------------------------*/

/* #region Typography */

:root {
	--primary-font: lato, sans-serif;
	--secondary-font: proxima-nova, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 1.5rem;
	font-family: var(--secondary-font);
  line-height: 1.2;
}

.text-style-1,
.text-style-2,
.text-style-3,
.text-style-4,
.text-style-5,
.text-style-6,
.text-style-7,
.text-style-8 {
	font-family: var(--secondary-font);
	line-height: 1.2;
}

.text-style-1 { font-size: 6.2rem; font-weight: 800; }
.text-style-2 { font-size: 5.2rem; font-weight: 800; }
.text-style-3 { font-size: 4.2rem; font-weight: 800; }
.text-style-4 { font-size: 4.2rem; font-weight: 100; }
.text-style-5 { font-size: 3.2rem; font-weight: 800; }
.text-style-6 { font-size: 3.2rem; font-weight: 100; }
.text-style-7 { font-size: 2.2rem; font-weight: 700; }
.text-style-8 { font-size: 2.2rem; font-weight: 100; }
.text-style-9 { font-size: 1.75rem; font-weight: 700; }
.text-style-10 { font-size: 1.75rem; font-weight: 100; }
.text-style-11 { font-size: 1.2rem; font-weight: 700; }
.text-style-12 { font-size: 1.2rem; font-weight: 400; }

@media (max-width: 767px) {
	.text-style-1 { font-size: 3rem; }
	.text-style-2 { font-size: 3rem; }
	.text-style-3 { font-size: 3rem; }
	.text-style-4 { font-size: 3rem; }
	.text-style-5 { font-size: 2.2rem; font-weight: 700; }
	.text-style-6 { font-size: 2.2rem; }
	.text-style-7 { font-size: 1.75rem; }
	.text-style-8 { font-size: 1.75rem; }
	.text-style-9 { font-size: 1.5rem; }
	.text-style-10 { font-size: 1.5rem; }
	.text-style-11 { font-size: 1.2rem; }
	.text-style-12 { font-size: 1rem; }
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

p:last-child {
	margin-bottom: 0;
}

b,
strong {
  font-weight: 700;
}

small, .small {
  font-size: 0.85rem;
}

/* #endregion Typography */

/*----------------------------------------------
3. Logo & Branding - La Miellerie Belfortaine
----------------------------------------------*/

/* #region Logo */

/* Logo principal dans le header */
.navbar-brand .logo {
	height: 120px !important;
	width: auto !important;
	max-width: 300px;
	transition: transform 0.3s ease;
}

.navbar-brand:hover .logo {
	transform: scale(1.05);
}

/* Logo plus petit en mode sticky/scroll */
.navbar.scroll-active .navbar-brand .logo {
	height: 70px !important;
}

/* Logo dans le footer */
.footer-brand .logo {
	height: 100px !important;
	width: auto !important;
	max-width: 250px;
}

/* Logo dans le preloader */
#preloader .logo {
	height: 150px !important;
	width: auto !important;
}

/* Responsive */
@media (max-width: 991px) {
	.navbar-brand .logo {
		height: 80px !important;
	}

	.footer-brand .logo {
		height: 70px !important;
	}
}

@media (max-width: 576px) {
	.navbar-brand .logo {
		height: 60px !important;
	}

	.footer-brand .logo {
		height: 60px !important;
	}

	#preloader .logo {
		height: 100px !important;
	}
}

/* #endregion Logo */