:root {
    /* Colors */   
    --color-primary: #24BBC7;
    --colors-primary-hovered: #23A4AD;

    --color-section-dark: #1D1F1E;
    --color-section-light: #F2F2F2;
    
    --color-bg-light-translucid: rgba(255, 255, 255, 0.8);
    --color-bg-dark-grey: rgba(60, 60, 60, 0.84);
    --color-bg-white: #FFFFFF;
    --color-bg-bluish-green: rgba(0, 126, 135, 0.8);;

    --color-text-dark: #1D1F1E;
    --color-text-medium-light: #727272;
    --color-text-light: #F5F5F7;

    /* Sizes */
    --header-height: 48px;
    --subheader-height: 64px;
    --main-section-padding: 100px;
    --section-padding: 72px 0;
    --text-line-height: 150%;
    --product-large-img-size: 250px;
    --product-img-size: 200px;
    
    /* Text sizes */
    --text-ultra-large: 56px;
    --text-large: 48px;
    --text-medium: 40px;
    --text-small: 32px;
    --text-ultra-small: 24px;
    --text-body-paragraph: 16px;
    --text-body-small: 14px;
    --text-body-description: 18px;
    --text-body-highligthed-ultra-small: 12px;
    --text-body-ultra-small: 12px;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url(../fonts/SF-Pro-Display-Light.otf);
    font-weight: normal;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url(../fonts/SF-Pro-Display-Bold.otf);
    font-weight: bold;
} 

html, body {
    font-family: 'SF Pro Display', Arial, Helvetica, sans-serif;
}

/* COLORS CLASS */

.color--primary {
    color: var(--color-primary);
}

.color__section--dark {
    background-color: var(--color-section-dark);
}

.color__section--light {
    background-color: var(--color-section-light);
}

/* BACKGROUND */

.color__background--dark-grey {
    background-color: var(--color-bg-dark-grey);
}

.color__background--white {
    background-color: var(--color-bg-white);
}

.color__background--bluish-green {
    background-color: var(--color-bg-bluish-green);
}

/* COLOR TEXT */

.color__text--medium-light {
    color: var(--color-text-medium-light);
}

.color__text--dark {
    color: var(--color-text-dark);
}

.color__text--light {
    color: var(--color-text-light);
}

/* PADDING */

.padding--main-section {
    padding-top: var(--main-section-padding);
    padding-bottom: var(--main-section-padding);
}

.section--padding {
    padding: var(--section-padding);
}

.mt--header {
    margin-top: var(--header-height);
}

.mt--header-and-subheader {
    margin-top: calc(var(--header-height) + var(--subheader-height));
}

.section--pading-div {
    padding-top: 50px;
    padding-bottom: 50px;
}

/* PAGE VAR */

.text__subtitle--ultra-large {
    font-size: var(--text-ultra-large);
    line-height: var(--text-line-height);
}

.text__title--ultra-large {
    font-size: var(--text-ultra-large);
    font-weight: bold;
    line-height: var(--text-line-height);
}

.text__title--large {
    font-size: var(--text-large);
    font-weight: bold;
    line-height: var(--text-line-height);
}   

.text__title--medium {
    font-size: var(--text-medium);
    font-weight: bold;
    line-height: var(--text-line-height);
}

.text__title--small {
    font-size: var(--text-small);
    line-height: var(--text-line-height);
    font-weight: bold;
}

.text__body--paragraph {
    font-size: var(--text-body-paragraph);
    line-height: var(--text-line-height);
}

.text__body--small {
    font-size: var(--text-body-small);
    line-height: var(--text-line-height);   
}

.text__subtitle--small {
    font-size: var();
    line-height: var(--text-line-height);
}

.text__subtitle--medium {
    font-size: var(--text-medium);
    line-height: var(--text-line-height);
}

.text__subtitle--large {
    font-size: var(--text-large);
    line-height: var(--text-line-height);
}

.text__subtitle--ultra-large {
    font-size: var(--text-ultra-large);
    line-height: var(--text-line-height);
}

.text__subtitle--ultra-small {
    font-size: var(--text-ultra-small);
    line-height: var(--text-line-height);
}

.text__subtitle--description {
    font-size: var(--text-body-description);
    line-height: var(--text-line-height);
}

.text__body--highligthed-ultra-small {
    font-size: var(--text-body-highligthed-ultra-small);
    line-height: var(--text-line-height);
    font-weight: bold;
}

.text__body--ultra-small {
    font-size: var(--text-body-ultra-small);
    line-height: var(--text-line-height);
}

.text__title--ultra-small {
    font-weight: bold;
    font-size: var(--text-ultra-small);
    line-height: var(--text-line-height);
}

.text__body--description-highlighted {
    font-size: var(--text-body-description);
    line-height: var(--text-line-height);
    font-weight: bold;
}

.text__title--category {
    font-size: 20px;
    line-height: var(--text-line-height);
    font-weight: bold;
}

/* MAX WIDTH */

.width-small {
    max-width: 450px;
}

.width--medium {
    max-width: 510px;
}

.width--medium-large {
    max-width: 595px;
}

.width--contact {
    max-width: 650px;
}

.width--ultra-small {
    max-width: 340px;
}

.width--ultra-large {
    max-width: 800px;
}


.width--tiny {
    max-width: 130px;
}

.text--width {
    max-width: 540px;
}

/* END  OF VAR PAGE */  

/* Links */

.link--primary {
    color: var(--color-primary);
    text-decoration: none;
}

.link--primary:hover {
    color: var(--colors-primary-hovered);
    text-decoration: none;
}

.button-group {
    font-size: var(--text-body-paragraph);
    color: var(--color-text-light);
    background: var(--color-primary);
    border-radius: 30px;
    padding: 10px 16px;
    border: none;
}

.button-group:hover {
    background: var(--colors-primary-hovered);
}

.icons {
    display: flex;
    align-items: center;
}

.group-input {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #727272;
}

.span-icons {
    display: flex;
    justify-content: center;
    font-size: 70px;
    margin-bottom: 20px;
}

/* HEADER NAVIGATION */

.header--fixed {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--color-bg-dark-grey);
    position: fixed;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    z-index: 100;
    width: 100%;
    top: 0;
    height: var(--header-height);
} 

.header__logo {
    max-width: 100px;
    cursor: pointer;
}

.header--fixed div > ul {
    display: flex;
}

.header--fixed div ul > li:not(:last-child) {
    list-style: none;
    margin-right: 20px;
}

.header--fixed div li > a {
    text-decoration: none;
    font-size: var(--text-body-small);
    color: var(--color-text-light);
}

.header--fixed div li > a:hover {
    color: #d8d8da;
}

.subheader--fixed {
    background-color: var(--color-bg-light-translucid);
    padding: 10px 0;
    border-bottom: 1px solid #d4d4d4;
    position: fixed;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);

    z-index: 100;
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--subheader-height);
    top: var(--header-height);
}

/* END HEADER NAVIGATION */

/* FOOTER */

.footer {
    background-color: var(--color-section-light);
    padding: 36px 0 18px;
}

.footer__category > h3 {
    margin-bottom: 10px;
}

.footer__category h3 > a {
    color: var(--color-text-dark);
    font-size: var(--text-body-small);
    font-weight: bold;
    text-decoration: none;
}

.footer__category h3 > a:hover {
    color: #5a5a5c;
}

.footer__category ul > li {
    margin-top: 10px;
}

.footer__category ul li > a {
    color: var(--color-text-dark);
    text-decoration: none;
    font-size: var(--text-body-small);
}

.footer__category ul li > a:hover {
    color: #5a5a5c;
}

/* PAGE 2 */

.single-link li > a {
    text-decoration: none;
    color: var(--color-text-dark);
}

.single-link li > a:hover {
    color: #6d6e6d;
}

/* Menu */

.hamburger {
	display: none;
    cursor: pointer;
    color: var(--color-text-light);
}

.menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	visibility: hidden;
	opacity: 0;
	z-index: 101;
}

.menu_door {
	position: absolute;
	top: 0;
	width: 0;
	height: 100%;
	background: #222222e1;
}

.door_left {
	right: 50%;
}

.door_right {
	left: 50%;
}

.menu_content {
	width: 100%;
	height: 100%;
	opacity: 0;
}

.menu_close {
	position: absolute;
	top: 60px;
	right: 60px;
	font-size: 12px;
	color: var(--color-text-light);
	letter-spacing: 0.2em;
	cursor: pointer;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}

.menu_close:hover {
	color: #c9c9c9;
}

.menu_nav ul li:not(:last-of-type) {
	margin-bottom: 20px;
}

.menu_nav ul li a {
	font-size: 20px;
	color: #ffffff;
    text-decoration: none;
	letter-spacing: 0.2em;
}

.menu_nav ul li a:hover {
  color: #c9c9c9;
  -webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
}

.product {
    max-width: var(--product-img-size);
    max-height: var(--product-img-size);
}

.product--large {
    max-width: var(--product-large-img-size);
    max-height: var(--product-large-img-size);
}

.description-item {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* number of lines to show */
    -webkit-box-orient: vertical;
}

/* Whatsapp Button */
.pulse-button {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 40px;
    right: 40px;
    z-index: 3;
    width: 54px;
    height: 54px;
    border: none;
    box-shadow: 0 0 0 0 #b6c734;
    border-radius: 50%;
    background: #C0D237;
    background-image: -webkit-linear-gradient(top, #C0D237, #C0D237);
    background-image: -moz-linear-gradient(top, #C0D237, #C0D237);
    background-image: -ms-linear-gradient(top, #C0D237, #C0D237);
    background-image: -o-linear-gradient(top, #C0D237, #C0D237);
    background-image: linear-gradient(to bottom, #C0D237, #C0D237);
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    -webkit-animation: pulse 1.25s infinite cubic-bezier(0.16, 0, 0, 1);
    -moz-animation: pulse 1.25s infinite cubic-bezier(0.16, 0, 0, 1);
    -ms-animation: pulse 1.25s infinite cubic-bezier(0.16, 0, 0, 1);
      animation: pulse 1.25s infinite cubic-bezier(0.16, 0, 0, 1);
}
.pulse-button:hover {
animation: none;
background: #b6c734;
}

.pulse-button, .pulse-button:visited, .pulse-button:link, .pulse-button:visited, .pulse-button:focus {
    outline: none;
}

.pulse-button img {
width: 22px;
}

@-webkit-keyframes pulse {
    to {
        box-shadow: 0 0 0 30px rgba(217, 0, 0, 0);
    }
}
@-moz-keyframes pulse {
    to {
        box-shadow: 0 0 0 30px rgba(217, 0, 0, 0);
    }
}
@-ms-keyframes pulse {
    to {
        box-shadow: 0 0 0 30px rgba(217, 0, 0, 0);
    }
}
@keyframes pulse {
    to {
        box-shadow: 0 0 0 30px rgba(217, 0, 0, 0);
    }
}

/* Responsive */

@media (max-width: 992px) {
    
    .span-icons {
        margin-top: 20px;
    }

    .section--category {
        margin: 0px;
        margin-bottom: 20px;
        padding: 0px;
    }

    .section--highlighted {
        padding: 30px 5px;
    }

    .section--info {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer__category {
        margin-bottom: 30px;
    }

    .hamburger {
      display: flex;
      align-items: center;
    }
    
    .header__nav {
        display: none !important;
    }
}

/* Text */
@media (max-width: 992px) {
    .text__subtitle--ultra-large, .text__title--ultra-large, .text__subtitle--large, .text__title--large {
        font-size: var(--text-medium);
        line-height: var(--text-line-height);
    }

    .text__subtitle--ultra-small, .title--ultra-small  {
        font-size: 20px;
        line-height: 120%;
    }
}