@charset "utf-8";
/* CSS Document */

@font-face {
	font-family: "Baloo";
	src: url("../fonts/Baloo2-SemiBold.ttf");
}

@font-face {
	font-family: "Open-Sans";
	src: url("../fonts/OpenSans-Regular.ttf");
}

* {
	box-sizing: border-box;
	font-size: 16px;
}

body {
	margin: 0;
	font-family: "Open-Sans";
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Baloo";
	margin: 0;
}

img {
	max-width: 100%;
}

.container {
	width: 100%;
	margin: auto;
	padding: 0 20px;
}

.container-flex {
	display: flex;
	flex-wrap: wrap;
}

.column {
	width: 100%;
}

.text {
	font-size: 1.2rem;
}

/*------------Header styles------------*/

.main-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 10px 30px;
	border-radius: 50px;
	position: fixed;
	top: 20px;
	background-color: #ffffff;
	width: 90%;
	left: 0;
	right: 0;
	margin: auto;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	z-index: 50;
}

.container-logo {
	width: 100%;
	display: flex;
	justify-content: center;
}

.container-logo .logo-img {
	height: 40px;
	margin: 0 auto 10px;
}

.menu {
	display: inline-flex;
	width: 100%;
	justify-content: space-around;
	margin: 0;
	list-style: none;
	padding-inline-start: 0;
	margin-block-start: 0;
    margin-block-end: 0;
}

.menu li {
	list-style: none;
	
}

.menu li a{
	font-size: .8rem;
	text-decoration: none;
	color: #000000;
	font-weight: bold;
}

/*------------Banner styles------------*/

.banner {
	height: 80vh;
}

.banner-index {
	background:  url("../img/index/pistacho.jpg");
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.banner-title {
	color: #ffffff;
	font-size: 2rem;
	text-align: center;
	z-index: 1;
}


.banner::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 80vh;
	background: rgba(0,0,0,0.2);
	top: 0;
	left: 0;
}

/*------------Main styles------------*/
.main {
	
	padding: 0 20px;
}

.bienvenida {
	width: 100%;
}



.bienvenida-title{
	margin: 60px 0 20px;
	text-align: center;
	font-size: 3rem;
	color: #315731;
}

.bienvenida-contenido {
	display: flex;
	flex-direction: row-reverse;
}

.bienvenida-contenido .cont-img {
	margin: auto;
}

.filosofia-contenido {
	display: flex;
	justify-content: center;
}

.filosofia-contenido .cont-img {
	transition: all 0.3s ease;
	margin-bottom: 40px;
}

.filosofia-contenido .cont-img img {
	max-width: 200px;
}

.filosofia-contenido .cont-img:hover {
	transform: scale(1.1);
}

.filosofia-contenido .cont-img .text {
	text-align: center;
	font-weight: bold;
}
.productos .title {
	font-size: 2rem;
	text-align: center;
	margin-bottom: 20px;
	margin-top: 60px;
}

.productos-contenido .cont-img {
	position: relative;
	transition: all 0.3s ease;
	margin-bottom: 20px;
}

.productos-contenido .cont-img:hover {
	cursor: pointer;
	transform: scale(1.1);
}

.productos-contenido .cont-img::before {
	content: '';
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.3);
	position: absolute;
	border-radius: 50%;
	top: 0;
	left: 0;
}

.productos-contenido .cont-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: white;
	font-weight: bold;
	text-align: center;
}

.productos-contenido .cont-text .text {
	font-size: 2rem;
}

.modal {
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,.7);
	z-index: 999;
	position:fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	display: none;
}

.modal.abrir {
	display: flex;
}

.modal .cont-info {
	height: 70vh;
	width: 80%;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
	background-color: #ffffff;
	padding: 40px;
	overflow: scroll;
	overflow-x: hidden;
}

.cont-info::-webkit-scrollbar, .cont-info::-webkit-scrollbar {
    -webkit-appearance: none;
}

.cont-info::-webkit-scrollbar:vertical,.cont-info::-webkit-scrollbar:vertical {
    width:10px;
}

.cont-info::-webkit-scrollbar-button:increment,.cont-info::-webkit-scrollbar-button, .cont-info::-webkit-scrollbar-button:increment,.cont-info::-webkit-scrollbar-button {
    display: none;
} 

.cont-info::-webkit-scrollbar:horizontal, .cont-info::-webkit-scrollbar:horizontal {
    height: 10px;
}

.cont-info::-webkit-scrollbar-thumb, .cont-info::-webkit-scrollbar-thumb {
    background-color: #797979;
    border-radius: 20px;
    border: 2px solid #f1f2f3;
}

.cont-info::-webkit-scrollbar-track, .cont-info::-webkit-scrollbar-track {
    border-radius: 10px;  
}


.modal .cont-info .title {
	font-family: 'Baloo';
	font-size: 3rem;
	margin-top: 0;
	text-align: center;
	margin-bottom: 20px;
}

.modal .cont-table table {
	width: 100%;
    overflow-x: auto;
   	text-align: center;
   	border-collapse:collapse;
	margin: 0 auto;
}

.modal .cont-table table td, .modal .cont-table table th{
	padding: 10px;
	border: #999 1px solid;
   	width: 25%;
}

.aromaticas ul li:nth-child(1) {
	list-style: url(../img/index/romero.png);
}

.aromaticas ul li:nth-child(2) {
	list-style: url(../img/index/romero-rastrero.png);
}

.aromaticas ul li:nth-child(3) {
	list-style: url(../img/index/salvia.png);
}

.aromaticas ul li:nth-child(4) {
	list-style: url(../img/index/tomillo.png);
}

.aromaticas ul li:nth-child(5) {
	list-style: url(../img/index/tomillo-limon.png);
}

.aromaticas ul li:nth-child(6) {
	list-style: url(../img/index/lavanda.png);
}

.aromaticas ul li:nth-child(7){
	list-style: url(../img/index/santolina.png);
}


/*------------Footer styles------------*/

.main-footer {
	margin-top: 60px;
	background: #315731;
	padding: 20px;
	font-size: 1.2rem;
	color: #ffffff;
}

.footer__title {
	font-size: 1.4rem;
}

.footer__item {
	margin-bottom: 20px;
}

.footer__social {
	display: block;
	padding: 10px 0;
	text-decoration: none;
	color: #ffffff;
}

.footer__social:hover {
	text-decoration: underline;
}

.footer__copy {
	text-align: center;
	font-size: .9em;
}

.footer__copy a, .footer_copy a:visited {
	text-decoration: none;
	color: #ffffff;
	font-size: .9em;
}

.footer__copy a:hover {
	text-decoration: underline;
}



/*------------Media responsive------------*/

@media screen and (min-width: 768px){
	.container-logo {
		width: 45%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.container-logo .logo-img {
		margin: 0;
	}
	.menu {
		width: 55%;
	}

	.menu li a {
		font-size: 1.1rem;
	}

	.banner-title {
		font-size: 3.5rem;
	}
	
	.columna-25 {
		width: 20%;
	}

	.filosofia-contenido .cont-img {
		margin-bottom: 0;
	}

	.filosofia-contenido .cont-img img {
		max-width: 100%;
	}

	.filosofia-contenido, .productos-contenido {
		justify-content: space-between;
	}

	.columna-33 {
		width: 30%;
	}

	.productos-contenido .cont-text .text {
		font-size: 1.5rem;
	}

}

@media screen and (min-width: 1024px) {
	.container, .main-nav, .banner-title {
		max-width: 800px;
	}

	.container-logo {
		width: 50%;
	}

	.menu {
		width: 50%;
	}

	.bienvenida-contenido .cont-img, .aromaticas .cont-img {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.modal .cont-info {
		width: 50%;
	}
}

@media screen and (min-width: 1440px) {
	.container, .main-nav, .banner-title  {
		max-width: 1000px;
	}

	.columna-50 {
		width: 45%;
		margin: 0 auto;
	}

	.container-logo {
		width: 65%;
	}

	.menu {
		width: 35%;
	}

	.banner-title {
		font-size: 4rem;
	}

	.productos-contenido .cont-text .text {
		font-size: 2.5rem;
	}
	
}

@media screen and (min-width: 1600px) {
	.container, .main-nav, .banner-title  {
		max-width: 1200px;
	}

	.menu li a {
		font-size: 1.3rem;
	}

	.main-nav {
		padding: 20px 30px;
	}

	.banner-title {
		font-size: 6rem;
	}

	.productos-contenido .cont-text .text {
		font-size: 2.5rem;
	}
}

@media screen and (min-width: 2560px) {
	.container, .main-nav, .banner-title  {
		max-width: 1600px;
	}

	.container-logo {
		width: 75%;
	}

	.menu {
		width: 25%;
	}

	.container-logo .logo-img {
		height: 50px;
	}
	
	.productos-contenido .cont-text .text {
		font-size: 3.5rem;
	}
}