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

@font-face {
    font-family: 'OwenPro-SemiBold';
    src: url("../fonts/Owen Pro/OwenPro-SemiBold.otf") format('opentype'); 
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OwenPro-Medium';
    src: url("../fonts/Owen Pro/OwenPro-Medium.otf") format('opentype'); 
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OwenPro-Regular';
    src: url("../fonts/Owen Pro/OwenPro-Regular.otf") format('opentype'); 
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OwenPro-Light';
    src: url("../fonts/Owen Pro/OwenPro-Light.otf") format('opentype'); 
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Helvetica-Narrow';
    src: url("../fonts/Helvetica/Helvetica CE Narrow.otf") format('opentype'); 
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Saira-Bold';
    src: url("../fonts/Saira-Bold.ttf") format('opentype'); 
    font-weight: normal;
    font-style: normal;
}
:root {
    --aqua: #00A0AF;
	--verde: #8DBB00;
	--negro: #000000;
	--gris: #1F242D;
	--gris-claro: #9DA8BA;
	--gris-Extraclaro: #646972;
	--owenPro-600: 'OwenPro-SemiBold';
	--owenPro-500: 'OwenPro-Medium';
	--owenPro-400: 'OwenPro-Regular';
	--owenPro-300: 'OwenPro-Light';
	--Helvetica-CE: 'Helvetica';
	--Saira-Bold: 'Saira-Bold';
	--primaryBoxShadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
    --secondaryBoxShadow: 0px -10px 15px rgba(0, 0, 0, 0.1);
}
*{
	box-sizing: border-box;
}

.nav__categorias-inferior{
	background-color: #FFFFFF;
	padding: 1% 5% .01% 5%;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.categoria__h1{
	font-family: var(--owenPro-600);
	font-size: 1.375rem;
	color: var(--gris);
}
.card__subcategoria{
	text-align: center;
	font-family: var(--Saira-Bold);
	padding: 0 40px;
	margin: 15px;
	max-height: 236px;
	transition: transform 0.3s ease;
}

.card__subcategoria:hover {
  transform: scale(1.09); 
/*  border: 2px solid #00A2AC;*/
}
.card__subcategoria h2{
	font-size: 1.125rem;
	margin-top: .5rem;
}
.containter__categorias-main {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(5, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	height: 59.5vh;
}

.menu__lateral {
	grid-area: 1 / 1 / 6 / 2;
	overflow-x: auto;
	border-right: 1px solid #A4A4A4;
	height: 95%;
	padding-right: 4%;
	scrollbar-color: #00A0AF white;
  	scrollbar-width: thin;
	min-width: 300px;
}
.your-element::-webkit-scrollbar-track {
  background-color: #00A0AF;
  border-radius: 10px;
}
.container__producto-categoria { 
	grid-area: 1 / 2 / 6 / 6;
}
.menu__lateral h1{
	font-family: var(--owenPro-600);
	font-size: 1.375rem;
	line-height: 25px;
	text-align: left;
	color: var(--aqua);
	padding-left: 40px;
	margin-bottom: 2rem;
}
.menu__lateral h2{
	font-family: var(--Saira-Bold);
	font-size: 1.125rem;
	text-align: left;
	color: var(--gris);
	cursor: pointer;
	margin: 0;
	min-height: 2.063rem;
	transition: background-color 0.3s ease, padding 0.3s ease, margin 0.3s ease, border-radius 0.3s ease; 
}
.menu__lateral h2:hover{
	background-color: var(--aqua);
	color: #FFFFFF;
	border-radius: 5px;
	padding-top: 5px;
	padding-left: 5px;
	margin: -1px -5px;
}
.menu__lateral li{
	font-family: var(--Saira-Bold);
	font-size: 1.125rem;
	text-align: left;
	margin: 3px 0;
}
.menu__lateral li:hover{
	color: var(--aqua)
}
.menu__lateral li.color-black:hover {
    color: inherit; 
}
.color-black{
	color: #000000;
}
li:not(.color-black) {
  cursor: pointer;
  color: #727272;
}
.hidden-text{
	display: none;
}
.ri-arrow-down-s-line{
	float: right;
}
hr{
	margin: 0;
}
.glider-next, .glider-prev {
    top: 30%!important;
}
.glider.draggable{
	margin: 1.5rem 0;
}
.card__subcategoria.active {
    border: 2px solid #00A2AC;
	border-radius: 10px;
    }

@media screen and (max-width: 1589px) {
.menu__lateral h2, .menu__lateral li {
	font-size: 1rem;	
	}
}
@media screen and (max-width: 1117px) {
	.menu__lateral{
		display: none;
	}
.container__producto-categoria {
    grid-area: 1 / 1 / 6 / 6;
}
}
@media screen and (max-width: 1117px) {	
	.glider-contain {
    width: 90%!important;
}
}
@media screen and (max-width: 925px) {
	.card__subcategoria {
    padding: 0 20px;
}	
}
@media screen and (max-width: 525px) {
	.card__subcategoria {
    padding: 0 10px;
}
.card__subcategoria h2 {
    font-size: 1rem;
    margin-top: .5rem;
}
}