/*
    Theme Name:   Alma & Valor
    Theme URI:    https://avfunctionalfoods.com
    Description:  Template for Alma & Valor based on GeneratePress child theme
    Author:       PG
    Author URI:   https://en.pgdesign.pt
    Template:     generatepress
    Version:      0.1
*/

@font-face{ 
	font-family: 'BarlowLight';
	src: url('fonts/Barlow-Light-webfont.eot');
	src: url('fonts/Barlow-Light-webfont.eot?iefix') format('eot'),
	     url('fonts/Barlow-Light-webfont.woff') format('woff'),
	     url('fonts/Barlow-Light-webfont.ttf') format('truetype'),
	     url('fonts/Barlow-Light-webfont.svg#webfont') format('svg');
}
@font-face{ 
	font-family: 'BarlowBold';
	src: url('fonts/Barlow-Bold-webfont.eot');
	src: url('fonts/Barlow-Bold-webfont.eot?iefix') format('eot'),
	     url('fonts/Barlow-Bold-webfont.woff') format('woff'),
	     url('fonts/Barlow-Bold-webfont.ttf') format('truetype'),
	     url('fonts/Barlow-Bold-webfont.svg#webfont') format('svg');
}

/* SCROLL BAR */
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {background: #FFF;}
::-webkit-scrollbar-thumb {background: #a6c046;}
::-webkit-scrollbar-thumb:hover {background: #a6c046;}

/* TEXT */
h1,h2,h3,h4,h5,h6 {font-family: 'BarlowBold'; color: #747e50;}
h1 {font-size: 5em;}
h2 {font-size: 3em; font-family: 'BarlowLight';}
h3 {font-size: 2.8em;}
h4 {font-size: 2em;}
h5 {font-size: 1.15em;}
p, ul {font-family: 'BarlowLight'; font-size: 1em; color: #747e50;}
b, strong {font-weight: bold; font-family: 'BarlowBold';}
p::selection, b::selection {background: #747e50; color: #FFF;}

/* COMPONENTS */
.menu-item a {background: url("gfx/bullet-green.svg") no-repeat center left; background-size: auto 20px;}
.menu-item a.elementor-item-active {font-family: 'BarlowBold';} 
.btn_login a {background: #737d4f; padding: 4px 10px !important; margin: 10px 0; color: #FFF !important;}
footer p {color: #000 !important;}
.menu_footer .menu-item a {background: url("gfx/bullet-dark.svg") no-repeat center left; background-size: auto 20px; border: none;}

#product_filter .item-posts {border: none;}
#product_filter .ik-post-load-more {position: relative !important; top: inherit !important; left: 0 !important; margin: auto; color: #fff; background: #000; border: none; padding: 10px;}
#product_filter .ik-search-category {width: 35% !important;}
#product_filter .ik-drp-post-category {height: 35px !important;}
#product_filter .ikh-post-item {width: 100% !important; height: 200px !important; margin: 0 !important; border: none !important;}
#product_filter .ik-post-name a {width: 100%; height: 40px; display: inline-block; text-align: center; padding: 5px 5px 0 5px !important; background: rgba(255,255,255,0.6);}
#product_filter .ikh-image a div {margin: 1px;}
#product_filter .ikh-content {position: absolute; bottom: 0; background: transparent;}
#product_filter .ikh-image img {width: 100%;}
#product_filter .ikh-post-item-box {max-height: 200px !important; padding: 3px; margin-bottom: 6px;  top: auto !important; left: 0 !important; position: relative !important;}
#product_filter .ikh-post-item-box .ikh-image:hover {opacity: 0.8;}

/* --------------------------------- Tablet --------------------------------- */
@media all and (max-width: 1024px) {

/* TEXT */
h1 {font-size: 3em;}
h2 {font-size: 2em;}
h3 {font-size: 1.8em;}
h4 {font-size: 1.2em;}
h5 {font-size: 1em;}
p, a, ul {font-size: 0.85em;}   
    
/* COMPONENTS */
#mobile_menu .elementor-nav-menu--dropdown {height: calc(100vh - 75px); padding: 60px 0;}
#mobile_menu .elementor-item-active {font-weight: bold;}    
.btn_login a {background: #FFF !important; padding: 10px 20px !important; margin: 20px 0 !important; color: #737d4f !important;}
.menu-item {text-align: center;}
.menu-item a {width: auto; display: inline-block !important; margin: auto; background: url("gfx/bullet-white.svg") no-repeat center left; background-size: auto 20px; border-bottom: 2px solid #a6c046;}
    
}

/* --------------------------------- Smartphones --------------------------------- */
@media all and (max-width: 767px) {
    
/* TEXT */
h1 {font-size: 3em;}
h2 {font-size: 2em;}
h3 {font-size: 1.8em;}
h4 {font-size: 1.2em;}
h5 {font-size: 1em;}
p, a, ul {font-size: 0.8em;}  
    
/* COMPONENTS */
.mobile_filter ul {margin: 0; list-style: none; font-size: 1.3em; text-transform: uppercase;}
    .mobile_filter ul li {padding: 10px 0; border-bottom: 1px solid #a6c046;}
    .mobile_filter h5 {color: #FFF;}
    
}