body, html {
    height: 100%;
    font-family: 'Zilla Slab', serif;
    scroll-behavior: smooth;
}

body, .smooth-container { scroll-behavior: smooth }

/* ------------------------- GLOBAL VARIABLES ------------------------- */

:root { /* CSS variables declared in the global scope */
  --nav-icon-width: 1.5em; /* values tested successfully in the range [20,100] */ 
  --nav-icon-colour: #e6e6e6;
  --col-white: #ffffff;
  --col-greyscale90: #e6e6e6;
  --col-greyscale80: #cccccc;
  --col-greyscale60: #999999; 
  --col-greyscale50: #7f7f7f;
  --col-greyscale40: #666666;
  --col-greyscale30: #4C4C4C;
  --col-greyscale20: #333333;
  --col-greyscale10: #191919;
  --col-black: #000000;
  --col-magenta: #be0045;
  --col-magenta-alt: #c80059;
  --col-accent: var(--col-magenta);
  --gallery-pad-unit: 2px;
}

/* ------------------------- GLOBAL SETTINGS ------------------------- */

a {
    color: var(--col-black);

}

a:hover {
    text-decoration: none;
}

p {
    color: var(--col-greyscale20);
    font-family: 'Zilla Slab', serif;
    font-size: 1.2em;
    padding: 0 2rem; /* top/bottom + left/right */
/*  background-color: rgba(0,255,255,0.3); /* activate for debug */
}

h1 { /* For title sections and  */
    color: var(--col-black);
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4em;
    font-weight: 350;
    letter-spacing: 5px;
    padding: 8rem 2rem 6rem; /* top, right-left, bottom */
/*  background-color: rgba(255,255,0,0.3); /* activate for debug */
}

h2 {
    color: var(--col-greyscale80);
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3em;
    font-weight: 300;
    letter-spacing: 5px;
    padding-top: 1rem;
    padding-bottom: 0rem;
    padding-left: 3rem;
    padding-right: 3rem;
/*  background-color: rgba(255,0,0,0.3); /* activate for debug */
}

h3 {
    color: var(--col-greyscale20);
    font-family: 'Zilla Slab', serif;
    font-size: 1.2em;
    padding: 0 1rem; /* top/bottom + left/right */
/*  background-color: rgba(0,255,255,0.3); /* activate for debug */
}

h4 {
    color: var(--col-greyscale20);
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    font-size: 1rem;
    letter-spacing: 1.5px;
}

.text-highlight {
    /* font-weight: bold; */
    color: var(--col-accent);
}

/* ------------------------- MEDIA QUERIES FOR RESPONSIVE BEHAVIOUR ------------------------- */


@media (max-width: 991px) { /* Breakpoint for collapsed navbar */
    .navbar li {
        padding: 2.5rem 0;
    }

    #marchi .ninth-element {
        display: block;
    }
}

/* ------------------------- NAVBAR ------------------------- */

.navbar { /* Bootstrap 4 Class */
    background-color: rgba(0,0,0,0.8);
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    padding: 1rem 1rem;
    min-height: 70px;
    align-items: center;
}

.navbar li {
    color: var(--col-greyscale80);
    text-align: center;
    margin: 0 1rem;
/*    background-color: rgba(0,0,255,0.3); /* activate for debug */
}

.nav-link { /* Bootstrap 4 Class */
    color: var(--col-greyscale80);
    transition: 0.3s;
}

.nav-link:hover { /* Bootstrap 4 Class */
    color: var(--col-white);
    transition: 0.3s;
}

.navbar-toggler:focus
{
    border: none;
    outline: none;
    box-shadow: none;
}

/* nav-icon1, nav-icon2, nav-icon3, nav-icon4 items, with their customizations are defined in a separated CSS */

/* ------------------------- HEADER ------------------------- */

#header { /* Custom Section */
    padding: 0 0 0 0;
    background: url(../img/gallery/DSC_6050.jpg) center center no-repeat;
    background-size: cover;
    height: 100%;
    color: white;
    display: flex;
    align-items: center;
}

#header-logo {
    padding: 0;
    height: 11em;
    max-height: 12em;
/*    background-color: rgba(0,255,0,0.3); /* activate for debug */
}

#header-subtitle {
    font-size: 1.5em;
    margin: 3rem;
    padding: 0;
}

/* ------------------------- SCOPRI ------------------------- */

#who { /* Custom Section */
    background: url(../img/patterns/pattern_padded.png) center center repeat;
    padding-top: 8rem;
    padding-bottom: 8rem;
}

#who p {
    color: var(--col-greyscale60);
}

/* ------------------------- SEGUICI ------------------------- */

#social {
    background: var(--col-greyscale90);
    padding-bottom: 8rem;
}

#social .fab, #social .fas {
    font-size: 3em;
    color: var(--col-black);
    text-align: center;
    padding: 1rem;
    margin: 0 1rem;
    transition: all 0.2s ease-in-out;
    animation: pulse;
    animation-duration: 1s;
    animation-delay: 1s;
/*    background-color: rgba(0,0,255,0.3); /* activate for debug */
}

#social p {
    padding-top: 6rem;
}

#social .fab:hover, #social .fas:hover {
    color: var(--col-accent);
}

/* ------------------------ GALLERIA ------------------------ */

#galleria {
    background: var(--col-greyscale10);
    padding-top: calc(2*var(--gallery-pad-unit));
}

#galleria .main-content {
    width: 100%;
}

#galleria .main-content .container-fluid {
    margin: 0;
    padding: 0;
}

#galleria .main-content .photos .photo-item img {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    height: 350px;
}

#galleria .main-content .photos .pic:first-of-type {
    padding-top: 0;
}

#galleria .main-content .photos .pic:last-of-type {
    padding-bottom: var(--gallery-pad-unit);
}

#galleria .main-content .photos .pic {
    padding-bottom: calc(2*var(--gallery-pad-unit));
    padding-left: var(--gallery-pad-unit);
    padding-right: var(--gallery-pad-unit);
}

@media (max-width: 575.98px) {
    #galleria .main-content .photos .photo-item img {
      height: 200px; 
    }
}

/* ------------------------ PRODOTTI ------------------------ */

#prodotti {
    padding-bottom: 6rem;
}

#prodotti p {
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}

#prodotti img {
    width: 6rem;
    height: auto;
}

/* ------------------------- MARCHI ------------------------- */

#marchi {
    background: var(--col-greyscale80);
    padding-bottom: 5rem;
}

#marchi h1 {
    padding-bottom: 4rem;
}

#marchi img {
    background-color: rgba(255,0 255,0.3);
    width: 80%;
}

#marchi p {
    padding-bottom: 2rem;
}

/* ---------------------- DICONO DI NOI --------------------- */

#dicono-di-noi {
    background: var(--col-greyscale90);
    padding-bottom: 6rem;
}

#dicono-di-noi p {
    font-size: 1.2rem;
}

#dicono-di-noi h1 {
    padding-bottom: 4rem;
}

#dicono-di-noi img {
    width: 3.5rem;
}

#dicono-di-noi #carousel-opinions {
    height: 15rem; /* Fixed height: prevents the variable content to alter section height */
}

/* ------------------------- TROVACI ------------------------- */

#trovaci {
    padding-bottom: 1rem;
}

#gmap {
    position: relative;
    text-align: center;
    height:500px;
    width:100%;
}

.gmap_canvas {
    overflow:hidden;
    background:none!important;
    height:500px;
    width:100%;
    border: var(--col-greyscale80) 1px solid;
}

#trovaci .fa-map-marker-alt {
    font-size: 2em;
    padding-bottom: 1rem;
    color: var(--col-accent);
}

#trovaci .fa-phone {
    font-size: 1.3em;
}

#trovaci .phone-icon-small {
    font-size: 1em;
    color: var(--col-greyscale20);
    color: var(--col-accent);
}

#trovaci .opening-hours {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* ------------------------- FOOTER ------------------------- */

#footer {
    padding: 6rem 1rem 2rem;
    background-color: var(--col-greyscale20);
}

#footer p {
    color: var(--col-black);
    font-size: 0.9em;
    padding-top: 1.5rem;
}

#footer a {
    color: var(--col-black);
    font-size: 0.9em;
    padding-top: 1.5rem;
}

#footer .fab, #footer .fas {
    font-size: 1.6em;
    color: var(--col-black);
    text-align: center;
    margin: .5rem;
    padding: .5rem;
    transition: all 0.2s ease-in-out;
    animation: pulse;
    animation-duration: 1s;
    animation-delay: 1s;
/*    background-color: rgba(127,253,25,0.3); */
}

#footer .fab:hover, #footer .fas:hover {
    color: var(--col-greyscale10);
}