@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
:root{
	--color-primary:#000;
	--color-secundary:#c8b81c;
	--color-rojo:rgb(226, 0, 0);
	--color-azul: #0079ba;
	--color-mostaza: #cea600;
	--color-magenta: #e50695;
	--color-violeta: #94328a;
	--color-verde: #ade132;
	--color-naranja: #eb6907;
	--color-violeta: #8b83d8;
	--color-gold: #C3A343;
	--color-rubs: #c95874;
}
* {
	margin: 0;
	padding: 0;
	outline: none;
}
body {
	font-family: 'Roboto', sans-serif;
	overflow-x: hidden;
    letter-spacing: -0.5px;
}

.navbar {
	background-color: var(--color-primary);
	text-transform: uppercase;
	position: sticky;
	top: 0;
	z-index: 9999;
}
.nav-link {
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	color: #fff;
	font-size: 0.85em;
	text-transform: uppercase;
}
.nav-link span {
	color: var(--color-secundary);
}
.nav-link:hover{
	color: var(--color-secundary);
}
.nav-link:focus{
	color: var(--color-secundary);
}
.navbar-expand-lg .navbar-nav .nav-link {
	padding-right: .8rem;
	padding-left: .8rem;
}
.navbar-expand-lg .navbar-nav .dropdown-menu{
	background-color: var(--color-secundary);
    border-radius: 0px;
}
.dropdown-item{
    color: var(--color-primary);
    font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-size: 0.8em;
	text-transform: uppercase;
}
.dropdown-item:hover{
	background-color: #b6a619;

}
.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; 
 }
.navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.navbar-toggler{
	background-color: var(--color-secundary);
}
.navbar-toggler:focus{
	box-shadow: none;
}
.cita{
	background-color: #edebe2;
	padding: 80px 50px;
}
.cita p{
	color: #878787;
	font-family: 'EB Garamond', serif;
	font-size: 1.75rem;
	font-weight: 400;
	max-width: 900px;
    margin: 0 auto;
    text-align: justify;
}
.productos{
	padding-top: 80px;
}
.productos h1{
	font-family: 'Bebas Neue', cursive;
	color:var(--color-primary);
	text-transform: uppercase;
	font-size: 3em;
	text-align: center;
	margin-bottom: 80px;
}
.frasco{
	width: 260px;
	max-width: 100%;
}
.productos h2{
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	color: #8a8989;
	font-size: 1.5em;
	text-transform: uppercase;
}
.productos span{
	font-weight: 500;
}
.productos p{
	margin-top: 0rem;
	margin-bottom: 0rem;
	font-size: 0.85em;
	color: #8a8989;
	text-transform: uppercase;
}
.main p{
	font-size: 0.95rem;
	color: #8a8989;
	text-transform: none;
}

hr{
	height: 2px !important;
	margin: 30px 0px;
	opacity: 1 !important;
}
.center-x{
	margin-left: 6%;
}

.contact a{
	color: var(--color-primary);
	text-decoration: none;
}
.contact a:hover{
	color: var(--color-secundary);
}
.btn{
	margin-top: 5px;
	margin-right: 5px;
	color: #fff;
    background-color: var(--color-primary);
    padding: 5px 15px;
    text-transform: uppercase;
    border: 0px;
    text-decoration: none;
}
.btn:hover{
	background-color: var(--color-secundary);
	color: #fff;
}
.btn a{
	color: #fff;
}
.btn a:hover{
	background-color: var(--color-secundary);

}
.btn-buy{
	margin-top: 5px;
	margin-left: 5px;
	color: #000;
    background-color: var(--color-verde);
    padding: 5px 15px;
    text-transform: uppercase;
    border: 0px;
    text-decoration: none;
	font-weight: 500;
    line-height: 1.5;
}
.btn-buy:hover{
	background-color: var(--color-primary);
	color: #ffffff;
}
.contact .form-group{
	margin: 10px 0px;
}
/**
 * Categorias
 *
 * -------------------------------------------------------------------
 */
.linea span{
	font-weight: 500;
}
.margen-top{
	margin-top: 80px;
}
.margen-bottom{
	margin-bottom: 80px;
}
.margin-left{
	margin-left: 10px !important;
}
.texto p{
	margin-top: 0rem;
    margin-bottom: 0rem;
    font-size: 0.85em;
    color: black;
}
.circulo{
	margin: 30px 0;
	width: 70px;
	height: 70px;
	padding: 10px 10px;;
	border-radius: 15px;
}
.circulo p{
	color: white;
	font-size: 1.8em;
	font-family: 'Bebas Neue', cursive;
	margin-bottom: 5px;
	margin-top: -2px;
	letter-spacing: 1px;
}
/**
 * Linea Base Roja
 *
 * -------------------------------------------------------------------
 */
.red{
	background-color: var(--color-rojo);
	padding: 80px 50px;
}
.linea h1{
	color: white;
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	font-weight: 100;
	max-width: 900px;
    margin: 0 auto;
}
.lineaeroja h2{
	color: var(--color-rojo);
	font-size: 1.25rem;
	text-transform: uppercase;
}
.lineaeroja .circulo{
	background-color: var(--color-rojo);
}
.linerojo{
	background-color: var(--color-rojo);
}
/**
 * Linea Mediterranea
 *
 * -------------------------------------------------------------------
 */
.blue{
	background-color: var(--color-azul);
	padding: 80px 50px;
}
.mediterraneo h2{
	color: var(--color-azul);
	font-size: 1.25rem;
	text-transform: uppercase;
}
.mediterraneo .circulo{
	background-color: var(--color-azul);
}
.lineazul{
	background-color: var(--color-azul);
}
/**
 * LÍNEA TÉRREAS
 *
 * -------------------------------------------------------------------
 */
 .mostaza{
	background-color: var(--color-mostaza);
	padding: 80px 50px;
}
.terreas h2{
	color: var(--color-mostaza);
	font-size: 1.25rem;
	text-transform: uppercase;
}
.terreas .circulo{
	background-color: var(--color-mostaza);
}
.linemostaza{
	background-color: var(--color-mostaza);
}
/**
 * Linea India
 *
 * -------------------------------------------------------------------
 */
 .magenta{
	background-color: var(--color-magenta);
	padding: 80px 50px;
}
.india h2{
	color: var(--color-magenta);
	font-size: 1.25rem;
	text-transform: uppercase;
}
.india h2 span{
	color: var(--color-primary);
}
.india .circulo{
	background-color: var(--color-magenta);
}
.linemagenta{
	background-color: var(--color-magenta);
}
/**
 * Linea Exótica
 *
 * -------------------------------------------------------------------
 */
 .violeta{
	background-color: var(--color-violeta);
	padding: 80px 50px;
}
.exotica h2{
	color: var(--color-violeta);
	font-size: 1.25rem;
	text-transform: uppercase;
}

.exotica .circulo{
	background-color: var(--color-violeta);
}
.linevioleta{
	background-color: var(--color-violeta);
}
/**
 * Linea Aromáticas
 *
 * -------------------------------------------------------------------
 */
 .verde{
	background-color: var(--color-verde);
	padding: 80px 50px;
}
.aromaticas h2{
	color: var(--color-verde);
	font-size: 1.25rem;
	text-transform: uppercase;
}

.aromaticas .circulo{
	background-color: var(--color-verde);
}

.lineverde{
	background-color:  var(--color-verde);
}
/**
 * Linea Pimientas
 *
 * -------------------------------------------------------------------
 */
 .naranja{
	background-color: var(--color-naranja);
	padding: 80px 50px;
}
.pimienta h2{
	color: var(--color-naranja);
	font-size: 1.25rem;
	text-transform: uppercase;
}

.pimienta .circulo{
	background-color: var(--color-naranja);
}
.linenaranja{
	background-color: var(--color-naranja);
}
/**
 * LÍNEA Semillas
 *
 * -------------------------------------------------------------------
 */
 .violeta{
	background-color: var(--color-violeta);
	padding: 80px 50px;
}
.semillas h2{
	color: var(--color-violeta);
	font-size: 1.25rem;
	text-transform: uppercase;
}
.semillas .circulo{
	background-color: var(--color-violeta);
}
.lineasemillas{
	background-color: var(--color-violeta);
}
/**
 * Linea Gold
 *
 * -------------------------------------------------------------------
 */
 .gold{
	background-color: var(--color-gold);
	padding: 80px 50px;
}
.dorado h2{
	color: var(--color-gold);
	font-size: 1.25rem;
	text-transform: uppercase;
}
.dorado .circulo{
	background-color: var(--color-gold);
}
.linegold{
	background-color: var(--color-gold);
}
/**
 * Box Regalo
 *
 * -------------------------------------------------------------------
 */
 .negro{
	background-color: var(--color-primary);
	padding: 80px 50px;
}
.box{
	padding: 25px 25px;
}
.box h2{
	color: var(--color-primary);
	font-size: 1.25rem;
	text-transform: uppercase;
}

.box .circulo{
	background-color: var(--color-primary);
}
.bg{
	background-color: var(--color-secundary);
	padding: 80px 50px;
}
.lineaestuche{
	background-color: var(--color-primary);
}
/**
 * Linea Rubs
 *
 * -------------------------------------------------------------------
 */
 .rubs{
	background-color: var(--color-rubs);
	padding: 80px 50px;
}

.linearub h2{
	color: var(--color-rubs);
	font-size: 1.25rem;
	text-transform: uppercase;
}
.linearub .circulo{
	background-color: var(--color-rubs);
}
.separador-rub{
	background-color: var(--color-rubs);
}
/**
 * Recetas
 *
 * -------------------------------------------------------------------
 */
.recetas{
	background-color: #70ba79;
	padding: 80px 50px;
	background-image:url(../image/recetas-flores.png);
	background-repeat: no-repeat;
    background-position: bottom right; 
	position: relative;
	background-size: 1000px;
}

.recetasmagicas h5{
	color: #70ba79;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-size: 1.5em;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.recetasmagicas h6{
	color: #70ba79;
	font-weight: 400;
	font-size: 1.2em;
	margin-bottom: 10px;
}
.recetasmagicas p{
	color: var(--color-primary);

}
.linerecetas{
	background-color: #70ba79;
}

.textrecetas p{
	font-size: 1.8em;
	font-weight: 100;
    color: #8a8989;
	letter-spacing: -2px;
}
.textrecetas p span{
	font-weight: 500;
}
/**
 * Footer
 *
 * -------------------------------------------------------------------
 */
footer{
	background-color: var(--color-primary);
	padding: 30px 30px;
}
.color{
	color: var(--color-secundary);
}

footer p{
	color: #fff;
	letter-spacing: -0.5;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-size: 0.9em;
}
footer a{
	color: #fff;
	text-decoration: none;
}
footer a:hover{
	color:var(--color-secundary);
}
footer .nav-link{
	padding: 0px 0px;
	text-transform:none;
}
footer h3{
	color:var(--color-secundary);
	font-size: 0.9em;
	text-transform: uppercase;
	letter-spacing: -0.5;
	font-size: 0.9em;
}

.separator{
	border-left: 1px solid var(--color-secundary);
}
.copy{
	text-align: center;
	padding-top: 20px;
	font-size: 0.8rem;
}
.copy p{
	font-size: 0.8rem;
	margin-bottom: 0rem;
}
.copy a{
	font-family: 'Roboto', sans-serif;
    font-weight: 500;
	font-size: 0.8rem;
}
/**
 * Media Queries
 *
 * -------------------------------------------------------------------
 */
@media (max-width: 768px) {
	.separator{
		border-left: 0px;
	}
	.cita{
		padding: 50px 20px;
	}
	.cita h3{
		font-size: calc(1.1rem + 0.6vw);
	}
	.productos h1{
		margin-bottom: 30px;
		font-size: 2.5em;
	}
	.margin-left{
		margin-left: 0px !important;
	}
	.recetas{
		background-image: none;
	}
	.margen-top, .productos, .textrecetas{
		padding-left: 20px;
    	padding-right: 20px;
	}
	.center-x{
		margin-left: 4%;
	}
	.btn{
	margin-right: 0px;
}
.btn-buy{
	margin-left: 0px;
}
}


@media (max-width: 1397px) {
	.btn{
	margin-right: 0px;
}
.btn-buy{
	margin-left: 0px;
}
}