:root {
    --main-scapole-color: #F0621E;
    --color-scapole-light-grey: #dbdddf;
    --color-scapole-normal-grey: #a9abad;
    --color-scapole-bg: #ffffff;

    --color-scapole-orange-main: #F0621E;
    --color-scapole-gray-light: #404041;
    --color-scapole-gray-light-2: rgba(64, 64, 65, 0.51);
    --color-scapole-gray-havy: #424143;
    --color-scapole-gray-dark: #8c8e90;
    --color-scapole-white: #ffffff;
    --color-scapole-green: #006400;
}

* {
    font-family: 'Roboto', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.default-title {
    font-family: 'Oswald', 'Roboto', sans-serif;
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    letter-spacing: 0.07rem;
}

h1.default-title-except,
h2.default-title-except,
h3.default-title-except,
h4.default-title-except,
h5.default-title-except,
h6.default-title-except,
.default-title-except {
    font-family: 'Roboto', sans-serif;
    text-transform: none;
    font-weight: normal;
    letter-spacing: normal;
}

body .container {
    background-color: #ffffff!important;
}

section#banner-extra-topo .bg-img-div {
    height: 45px;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

nav#main {
    -webkit-box-shadow: 2px 0px 11px 1px rgba(0,0,0,0.59);
    -moz-box-shadow: 2px 0px 11px 1px rgba(0,0,0,0.59);
    box-shadow: 2px 0px 11px 1px rgba(0,0,0,0.59);
}

nav#main #menu .icon {
    width: 35px!important;
    height: 35px!important;
}

nav#main #menu .icon svg {
    height: 100%!important;
    width: 100%!important;
    fill: var(--color-scapole-gray-light);
}

nav#main #menu p {
    font-size: 18px;
    color: var(--color-scapole-gray-light);
    font-weight: bold;
}

nav#main #menu:hover svg {
    fill: var(--color-scapole-orange-main);
    cursor: pointer;
}

nav#main #menu:hover p {
    color: var(--color-scapole-orange-main);
    cursor: pointer;
}

nav#main #whatsapp .icon,
nav#main #instagram .icon,
nav#main #facebook .icon {
    height: 30px;
    width: 30px;
}

nav#main #facebook .icon svg,
nav#main #instagram .icon svg,
nav#main #whatsapp .icon svg {
    fill: var(--color-scapole-gray-light)!important;
}

nav#main #whatsapp .icon:hover,
nav#main #instagram .icon:hover,
nav#main #facebook .icon:hover {
    cursor: pointer;
}

nav#main #whatsapp .icon:hover svg,
nav#main #instagram .icon:hover svg,
nav#main #facebook .icon:hover svg {
    fill: var(--color-scapole-orange-main)!important;
    color: var(--color-scapole-orange-main)!important;
}


nav#main #main-search input {
    width: 300px;
}

nav#main #main-search svg {
    height: 35px;
    width: 35px;
}

nav#main #main-search svg {
    fill: var(--color-scapole-gray-dark);
}

nav#main #main-search span {
    cursor: pointer;
}

nav#main #main-search #main-search-results {
    position: absolute;
    width: 300px;
    top: 55px;
    z-index: 4;
}

nav#main #main-search #main-search-results p,
nav#main #main-search #main-search-results a {
    color: var(--color-scapole-gray-dark);
    font-size: 0.8rem;
}

nav#main #main-search #main-search-results li {
    background-color: transparent;
}

nav#main #phone {
    height: 36px;
    font-size: 1.4rem;
}

nav#main #phone .icon {
    height: 100%;
}

nav#main #phone svg {
    height: 30px;
    width: auto;
}

nav#main #phones .icon-phone svg {
    width: 25px;
    fill: var(--color-scapole-gray-havy);
}

nav#main #phones #phones-list a {
    text-decoration: none;
}

nav#main #phones #phones-list #divisor {
    height: 50px;
    width: 0.5px;
    background-color: var(--color-scapole-gray-dark);
}

nav#main #phones #phones-list .phone-numero {
    font-weight: 900!important;
    color: var(--main-scapole-color);
    font-size: 18px;
}

nav#main #phones #phones-list .phone-text {
    font-weight: 600!important;
    color: var(--color-scapole-gray-light);
    font-size: 13px;
    text-transform: uppercase;
}


nav#main #phone svg path {
    /* transition: fill 600ms ease; */
    fill: var(--color-scapole-gray-dark);
}

nav#main #phone .default-title {
    /* transition: color 600ms ease; */
    color: var(--color-scapole-gray-light);
}

/* phone hover */
nav#main #phone:hover .default-title {
    color: var(--color-scapole-orange-main);
}

nav#main #phone:hover svg path {
    fill: var(--color-scapole-orange-main);
}

/* BUDGET BUTTON */
nav#main #budget {
    width: 240px;
    height: 30px;
}

nav#main #budget a {
    height: 45px;
    width: 300px;
    font-size: 18px;
    line-height: 25px;
    font-weight: 500;
    border: 2px solid #006600;
    border-radius: 5px;
    background-color: var(--success);
}

nav#main #budget a:hover {
    background-color: var(--color-scapole-orange-main);
    border-color: var(--color-scapole-gray-light);
    cursor: pointer;
}

nav#main #budget p {
    line-height: 25px;
    font-size: 15px;
}

nav#main #budget a span.icon {
    width: 25px;
    height: 25px;
}

nav#main #budget a span.icon svg {
    width: 24px;
    height: 24px;
}

nav#main #budget a span.icon svg polygon,
nav#main #budget a span.icon svg path {
    fill: #fff!important;
}





section#categories {
    background-color: var(--color-scapole-gray-light);
}

.box-shadow {
    -webkit-box-shadow: 0 4px 8px 0 rgba(21,22,23,.2);
    -moz-box-shadow: 0 4px 8px 0 rgba(21,22,23,.2);
    box-shadow: 0 4px 8px 0 rgba(21,22,23,.2);
}

.list-products .container {
    background-color: transparent!important;
}

.list-products .product-list-item:hover {
    text-decoration: none;
}

.list-products .product-list-item .card {
    border: none;
}

.list-products .product-list-item .card-title {
    font-size: 0.8rem;
    color: #000;
    text-decoration: none;
    height: 30px;
    text-transform: none;
    font-weight: normal;
    font-family: 'Roboto', sans-serif;
    letter-spacing: normal;
}

section#categories #content {
    background-color: var(--color-scapole-gray-light);
    height: 100px;
}

section#categories #content .category-item {
    width: 110px;
    font-size: 0.8rem;
    color: #ffffff;
    text-decoration: none;
    transition: background 600ms ease;
}

section#categories #content .category-item .icon {
    height: 35px;
}

section#categories #content .category-item .title {
    height: 35px;
}

section#categories #content .category-item:hover {
    background-color: var(--color-scapole-orange-main);
}

section#categories #content .category-item svg {
    width: 25px;
    height: 25px;
}

section#categories #content .category-item svg path {
    fill: var(--color-scapole-gray-dark);
    stroke: var(--color-scapole-gray-dark);
    transition: fill 1200ms ease, stroke 1000ms ease;
}

section#categories #content .category-item:hover svg path {
    fill: #fff;
    stroke: #fff;
}

section#categories .category-item.has-subcategory {
    position: relative;
}

section#categories .category-item.has-subcategory ul.list-group {
    position: absolute;
    width: 250px;
    font-size: .9rem;
    color: #ffffff;
    z-index: 2;
    top: 100px;
    left: 0;
}

section#categories .category-item.has-subcategory ul li {
    background-color: var(--color-scapole-gray-dark);
    color: #ffffff;
}

section#banners-customers-sec {
    margin-top: 100px!important;
}

section#testimonials {
    margin-bottom: 100px!important;
}

section#testimonials img {
    width: 80px;
    height: 80px;
}

section#testimonials p.name {
    font-weight: bold;
}

section#testimonials .card .card-body {
    height: 370px;
}

section#testimonials .card .card-body .testimonial {
    height: 160px;
}

section#testimonials .card .card-body p {
    font-size: 0.8rem;
}

section#testimonials p.position {
    font-size: 0.8rem;
    color: var(--color-scapole-gray-light);
}

section#testimonials hr {
    border: 1px solid var(--color-scapole-orange-main);
}

section#testimonials .content {
    color: var(--color-scapole-gray-light);
    font-size: 1.0rem;
}

section#newsletter .container {
    background-color: #cccccc38!important;
}

section#newsletter .content {
    height: 285px;
}

section#newsletter svg {
    width: 100%;
    height: auto;
}

section#newsletter svg path {
    fill: var(--color-scapole-orange-main)
}

section#newsletter input {
    text-align: center;
}

section#google360 .content .content-cta {
    position: absolute;
    height: 247px;
    z-index: 2;
    left: 610px;
    bottom: -300px;
    font-size: 1.2rem;
}

section#google360 .content .content-cta a:hover {
    color: var(--color-scapole-orange-main)!important;
    background-color: #ffffff;
}

section#google360 .content .content-cta a:focus {
    box-shadow: none;
}

section#google360 .icon-ancestor {
    height: 120px;
    width: 100%;
    position: absolute;
    z-index: 1;
}

section#google360 .icon {
    background-repeat: no-repeat;
    width: 100%;
    position: absolute;
    height: 120px;
    background-size: 130px auto;
    bottom: 40px;
    left: 40px;
}

section#google360 .banner {
    height: 247px;
    background-size: cover;
}

footer .col-9,
footer .col-3 {
    background-color: #58595b!important;
}

footer .category h1 {
    font-size: 0.8rem;
    color: #ffffff;
    line-height: 40px;
}

footer .category a:hover {
    text-decoration: none;

}

footer .category a:hover h2 {
    color: rgba(217, 217, 217, 0.59);

}

footer .category h2 {
    font-size: 0.8rem;
    line-height: 25px;
    color: #ffffff;
}

footer .category .item h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
}

footer #row-copy-right {
    height: 45px;
    background-color: var(--color-scapole-gray-havy);
    font-size: 0.8rem;
    font-weight: 300;
}

footer img.logo-white {
    width: 70%!important;
}

footer #social p {
    font-size: 0.9rem;
}

footer #social .social-item a {
    width: 100%;
    height: 100%;
}

footer #social .social-item svg {
    width: 50%;
    height: auto;
}

footer #social .social-item svg path {
    fill: #fff;
}

footer #social .fb-page {
    height: 100%;
}

/* Errors Page */
section#errors h1 {
    color: #f15c24;
    font-weight: 700;
}

section#errors h2,
section#errors h3 {
    color: #404041;
}