/*

1. Add your custom Css styles below
2. Place the this code in your template:

 <link href="css/custom.css" rel="stylesheet">

*/
/* FONTS */
@font-face {
    font-family: porcelanosa;
    src: url("../webfonts/Mories.otf") format("opentype");
}
/* MENU */
#mainMenu.menu-lines nav > ul > li.current > a:after, #mainMenu.menu-lines nav > ul > li:hover > a:after, #mainMenu.menu-lines nav > ul > li:focus > a:after {
    background-color: var(--secondary-color);
}
#mainMenu nav > ul > li.hover-active > a, #mainMenu nav > ul > li.hover-active > span, #mainMenu nav > ul > li.current > a, #mainMenu nav > ul > li.current > span, #mainMenu nav > ul > li:hover > a, #mainMenu nav > ul > li:hover > span, #mainMenu nav > ul > li:focus > a, #mainMenu nav > ul > li:focus > span {
    color: var(--primary-color)!important;
}
#mainMenu nav > ul > li > a {
    font-weight: 400!important;
}
/* TEXTS */
.porcelanosa{
    font-family: 'porcelanosa', serif!important;
}
h2, h3, h4, h5, h6{
    color: var(--primary-color)!important;
}
/* BACKGROUND COLORS */
.background-grey{
    background-color: #f0f0f0!important;
}