/*

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");
} */
.font-main {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.heading-text.heading-section h2 {
    font-size: 30px;
}
h3, .h3 {
    font-size: 1.2rem;
}
.social-icons:not(.social-icons-colored):not(.social-icons-colored-hover) li a:hover {
    background-color: #4d4d4d00!important;
}
/* HEADER */
#header .header-inner #logo a, #header .header-inner #logo a span, #header #header-wrap #logo a, #header #header-wrap #logo a span {
    font-weight: 200!important;
}
/* TOPBAR */
#topbar.dark.topbar-transparent {
    /* border-bottom: 1px solid #fff!important; */
}
#footer .copyright-content {
    background-color: var(--primary-color) !important;
    color: white;
}
#footer a:not(.btn):not(:hover) {
    color: white;
}
/* 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;
}
/* FONTS CLASS */
/* .porcelanosa{
    font-family: 'porcelanosa', serif!important;
} */
/* TEXTS */
.logo-default{
    color: var(--secondary-color);
}
/* BACKGROUND COLORS */
.background-grey{
    background-color: #f0f0f0!important;
}
.post-item.grey-bg .post-item-wrap {
    background-color: #8a8a8a;
}
p {
    font-weight: 400;
    font-size: 1.25rem;
}
hr {
    margin-top: 0rem;
    margin-bottom: 0rem;
    border: 0;
    border-top: 2px solid white;
}
.heading-text h3 {
    line-height: 49px;
}
.social-icons:not(.social-icons-colored):not(.social-icons-colored-hover) li a:hover {
    background-color: none;
}
.post-item.border > .post-item-wrap > .post-item-description {
    padding: 6px !important;
    width: 100% !important;
}

.text-box.text-box-2.text-dark a img{
    width: 40px;
    height: 40px;
    margin-bottom: 20px;
}
.text-box {
    align-items: center;
    display: flex;
}
 /* MEDIAS */
@media (min-width: 1024px) {
    /* HEADER */
    /*
    #header .header-inner #logo, #header #header-wrap #logo {
        float: initial!important;
        display: flex!important;
        justify-content: center!important;
        align-items: center!important;
        margin-bottom: 10px;
        height: 40px!important;
    }
    #header .header-inner, #header #header-wrap {
        height: 85px!important;
    }
    #header {
        position: relative;
        width: 100%;
        z-index: 199 !important;
        height: 80px;
        line-height: 20px;
    }
    #header[data-transparent="true"] + .inspiro-slider, #header[data-transparent="true"] + #slider, #header[data-transparent="true"] + .fullscreen, #header[data-transparent="true"] + .halfscreen, #header[data-transparent="true"] + #google-map {
        top: -120px!important;
        margin-bottom: -120px!important;
    }
    #header .header-inner #logo a, #header .header-inner #logo a span, #header #header-wrap #logo a, #header #header-wrap #logo a span {
        font-size: 25px!important;
    }
    #header[data-fullwidth="true"] #mainMenu.menu-center nav > ul > li.mega-menu-item > .dropdown-menu {
        top: 35px!important;
    }
    #header[data-transparent="true"] + #page-title {
        top: -170px!important;
    }
    */
}
@media (max-width: 576px) {
    /* #logo-default, #logo-dark {
        display: none;
    } */
}