/************************

    COLOR PALETTE

    #169bd7 blu heizer
    #d82727 rosso sile
 */

:root {
    --color-blue: #169bd7;
    --color-red: #d82727;
}

html {
    font-size: 100%;
}

body {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    color: #222222;
    font-size: 1.2rem;
}

a {
    color: var(--color-blue);
}

a:link, a:visited {
    text-decoration: none;
}

a.btn, button.form-control, input.form-control:not([type="checkbox"]) {
    padding:15px 30px;
}

a.btn.btn-default, button.form-control, input.form-control:not([type="checkbox"]), textarea.form-control{
    border: solid 1px #eee;
    text-decoration:none;
    background-color: #fff;
    color:#222222;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}
a.btn.btn-default:hover, button:hover.form-control , input.form-control:hover:not([type="checkbox"]), textarea:hover.form-control{
    border: solid 1px #eee;
    text-decoration:none;
    background-color: #fafafa;
    color:#222222;
    transition-delay: initial;
}

a:hover, a:active {
    text-decoration: underline;
    color: var(--color-blue);
}

h1, h2, h3, h4 {
    font-weight: normal;
    margin:0;
}

h1 {
    font-size: 4rem;
    margin:15px 0 30px 0;
}

h2 {
    font-size: 3rem;
    margin:15px 0 30px 0;
}

h3 {
    font-size: 2rem;
    margin:15px 0 30px 0;
}

h4 {
    font-size: 1.6rem;
    margin:15px 0 30px 0;
}

.h-underlined {
    padding: 0 0 15px 0;
    display: block;
    border-bottom: solid 5px #eee;
}

.breadcrumbs {
    width: 100%;
    padding:30px 90px;
    background-color: #f5f5f5;
}

.breadcrumbs a {
    color:#222222;
}

/*********************************************
    IDENTITY
 *********************************************/

#home-identity {
    position: relative;
}

#logo {

}

#logo img {
    height: 70px;
}

#page-identity{
    background-color: #fff;
    min-height:100px;

    -webkit-box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.3);
    z-index: 1000;
    position: relative;
}

#identity {
    padding:15px 60px;
    position: absolute;
    top:0px;
    left:0px;

    z-index: 1400;
    width: 100%;
}

#home-identity #identity {
    margin: 90px 0;
    padding:0 60px;
}

#identity.detached, #home-identity #identity.detached {
    position:fixed;
    margin:0;
    padding: 15px 60px;
    background-color: #fff;

    -webkit-box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.3);
}

#identity.detached #logo img {
    height: 70px;
}

#mainmenu_btn_container {
padding:10px 0;

}

#mainmenu_btn.active, #mainmenu_lang.active {
    color: #222222;
}

#identity.detached  #mainmenu_btn.active, #identity.detached  #mainmenu_lang.active {
    color: #222222;
}

#mainmenu_btn, #mainmenu_lang {
    font-size: 40px;
    color:#222222;
    cursor: pointer;
    display: inline-block;
    margin-left:20px;
}

#mainmenu, #mainmenulang {
    position: fixed;
    right: 0%;
    top:0;
    z-index: 1300;
    width:0%;
    height: 100vh;
    text-align: center;
    background: rgba(255,255,255, 0.9);
    transition: width 1s ease;
    padding:120px 0;
    overflow-x: hidden;
    overflow-y: scroll;
}

#mainmenu a, #mainmenulang a {
    color:#666;
}

#mainmenu a:hover, #mainmenulang a:hover {
    text-decoration: none;
    color: #222222;
}

#mainmenu.active , #mainmenulang.active {
    width:50%;
    white-space: nowrap;
}

#mainmenu ul, #mainmenulang ul {
    list-style-type: none;
    padding: 0;
    margin: 0 auto;
    font-size: 2rem;
    width:400px;
}

#mainmenu li, #mainmenulang li {
    padding: 10px 0;
}

/*********************************************
    HOME
 *********************************************/

#prodotti-correlati{
    padding:60px 0;
}

#newsletter {
    background-color:#222222;
    color:#fff;

}

#newsletter .content {
    text-align: center;
    max-width: 400px;
    width: 80%;
    margin:90px auto;
}

#newsletter .content form {
    text-align: left;
}

#newsletter a {
    color: #fff;
}

#newsletter .instagram {

    background-image: url("../images/home_instagram.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

}

#newsletter .instagram .content {
    min-height: 400px;
    display: flex;
    align-items: center;
    margin: 0 auto;
}

#newsletter .instagram .content div {
    width: 100%;

    text-align: center;
}

#section {
    background-color: #ffffff;
    padding:90px 0;
    text-align: left;
}

#section.categorie {
    background-color: #f5f5f5;
    text-align: center;
}

#section.categorie-home {
    background-color: var(--color-red);
    color:#ffffff;
    text-align: center;
}

#section.categorie p {

}

#section .categorie-icone {
    height: 120px;
    margin-bottom: 15px;
    margin-top: 30px;
}

#section.categorie-home a {
    color: #111111;
}

.videobg {
    position: relative;
    overflow: hidden;
    background-color: #222222;
    /*min-height: 600px;*/
}

.videobg .content {
    position: absolute;
    top:0;
    left:0;
    display: flex;
    align-items: center;
    padding:0 90px;
    width: 100%;
    background-color: rgba(0,0,0,0.3);
}

.videobg .content .didascalia {
    max-width: 400px;
    color: #fff;
}

.carousel-caption {
    text-align: left;
    left:60%;
    right:auto;
    padding-bottom: 10vw;
}

/*********************************************
    PAGINE
 *********************************************/

.img-categoria {
    margin-bottom: 30px;
    margin-top: 30px;
}

.box {
    background-color: #ffffff;
    padding:30px;
    margin-bottom: 60px;
    text-align: center;
}

.box.allegati {
    background-color: #ffffff;
    padding:30px;
    margin-bottom: 60px;
    text-align: center;
    border:solid 1px #eee;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    width: 100%;
    box-shadow: 6px 6px 5px rgba(0, 0, 0, 0.1);
}

.box.allegati h3 {
    margin-bottom: 60px;
}

.box.allegati a {
    display: inline-block;
    margin:30px 15px;
}


.page-title {
    position: relative;
    margin-bottom: 60px;
    text-align: center;
}

#collezioni {
    background-color: #f5f5f5;
    padding:90px 0;
    text-align: center;
}

.img_tipologia {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    min-height: 30vw;
    background-color: #eee;
}

.tipologie {
    background-color: #f5f5f5;
    margin:90px 0;
}

.tipologie .content {
    padding:90px;
    display: flex;
    align-items: center;
}

.tipologie .content div {
    width: 100%;
    text-align: center;
}

.tipologie .content h2 {
    margin-bottom: 30px;
}

#gallery {
    background-color: #fff;
    padding-bottom:90px;
    text-align: center;
}

#gallery h2 {
    margin-bottom: 90px;
}

#gallery .prodotto {
    background-repeat: no-repeat;
    background-position: center;
    background-color: #eee;
    background-size: 100%;
    opacity: 0.9;
    height: 15vw;
    margin-bottom:25px;
    transition: all 0.5s ease;
    cursor: pointer;
}

#gallery .prodotto:hover {
    opacity: 1;
    background-size: 110%;
}

#gallery-progetti {
    text-align: center;
    padding: 90px 0;
}

.gallery-cropbox {
    position: relative;
    width:100%;
    height:20vh;
    overflow:hidden;
    margin:15px 0;
    opacity: 0.8;
    background-color: #222222;
    transition:all 0.5s ease;
}

.gallery-cropbox:hover {
    opacity: 1;
}

.gallery-cropbox img {
    top:0;
    left:0;
    position: absolute;
    width: 150%;
}

#pagina {
    padding:90px;
}


#news {
    padding:90px;
}

.news-item {
    margin-bottom: 90px;
}

.news-content h3 {
    margin-bottom: 15px;
}

.news-img {

}

.news-img a {
    width: 100%;
    height: 20vw;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom:30px;

}

.news-img a img {
    min-width: 100%;
    min-height: 100%;
    transition: all 0.3s ease;
}

.news-img a img:hover {
    min-width: 120%;
    min-height: 120%;
}

/*********************************************
    FLIPBOOK
 *********************************************/

.flipbookcontainer {
    height: 80vh;
    width: 95%;
    margin: 20px auto;
}
.fullscreen {
    background-color: #333;
}

.copertina_catalogo {
    display: flex;
    align-items: end;
    height: 500px;
    text-align: center;
    width: 100%;

}

.copertina_catalogo a {
    display: block;
    padding: 30px;
}

.copertina_catalogo img {
    margin-top:60px;
    width: auto;
    height:auto;
    max-height: 450px;
    max-width: 100%;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
}
    /*********************************************
        FOOTER
     *********************************************/

#footer {
    background: #222222;
    color:#aaa;
    padding: 90px 0;
    font-size: 1.2rem;
}

#footer .identity {
    height: 96px ;
    margin-bottom: 90px;
}

#footer a, #footer a:link, #footer a:visited, #scrolltotop {
    text-decoration: none;
    color: var(--color-red);
}

#footer a:hover, #footer a:active {
    text-decoration: none;
    color: #fff;
}

#footer .btn-secondary {
    background-color: var(--color-red);
    border: var(--color-red);
}

#credits {
    width: 100%;
    text-align: center;
    font-size: 1rem;
    margin-top: 90px;
}

#credits a, #credits a:link, #credits a:visited {
    text-decoration: none;
    color: #aaa;
}


/*********************************************
    ODOMETER
 *********************************************/

.odometer {

}

.number {
    font-size: 64px;
    font-weight: 700;
}

.plus {
    text-align: center;
    font-size: 24px;
}

.fascia-grigia {
    background-color: #f5f5f5;
    padding: 90px 90px;
}

.fascia-bianca {
    background-color: #fff;
    padding: 90px 90px;
}

.bg-inox {
    background-image: url('/com_heizersile_www/images/azienda-inox.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 600px;
}

.bg-valori {
    background-image: url('/com_heizersile_www/images/azienda-valori.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 600px;
}

.bg-certificazioni {
    background-image: url('/com_heizersile_www/images/azienda-certificazioni.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 600px;
}

.image-container {
    max-width: 100%;
    position: relative;
    padding-top: 75%;
    overflow: hidden;
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.campione_colore {
    height:60px;
}

.btn.filtro_tipologie, #resetFiltroTipologie {
    padding:5px 10px;
}

.btn.filtro_tipologie.active, #resetFiltroTipologie.active{
    background-color: var(--color-blue);
    color:#fff;
}

.btn.filtro_tipologie.active:hover, #resetFiltroTipologie.active:hover{
    background-color: var(--color-blue);
    color:#fff;
}

/*
.gallery_progetti a {
    display: block;
    overflow: hidden;
    position: relative;
    height:35vh;
    width:100%;
    background-color: #222222;
    margin-bottom: 30px;
}

.gallery_progetti a img {
    position: absolute;
    width: auto;
    display: block;
    top:0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    transition: all 1s ease;
}

.gallery_progetti a img:hover {

    height: 105%;
}
*/
/*********************************************
    MEDIA QUERIES
 *********************************************/

@media (max-width: 1400px) {
    #collezioni .prodotto {
        height: 20vw;
    }

    #evidenza .prodotto {
        background-repeat: no-repeat;
        background-position: top;
        background-size: cover;
        height: 25vw;
        color: #eee;
        margin-bottom:25px
    }
}

@media (max-width: 1200px) {

    #collezioni .prodotto {
        height: 20vw;
    }

    #vangogh .content {
        padding: 90px;
    }

    .img_tipologia {
        min-height: 40vw;
    }
}

@media (max-width: 992px) {
    .carousel-caption {
        width: 100%;
        text-align: center;
        left:auto;
        right:auto;
        padding-bottom: 2rem;
    }

    #collezioni .prodotto .didascalia {
        opacity: 1;
    }

    #news {
        padding: 90px 60px;
    }

    .news-img a {
        height: 25vw;
    }

    .img_tipologia {
        min-height: 55vw;
    }

    /*.gallery_progetti a {
        height:50vh;
    }*/
}

#pagina {
    padding:60px;
}

/******
MAPPA
 */

.catData {
    align-items: center;
    border-radius: 50%;
    color: #263238;
    display: flex;
    font-size: 14px;
    gap: 15px;
    height: 40px;
    justify-content: center;
    padding: 10px;
    position: relative;
    position: relative;
    transition: all 0.3s ease-out;
    width: 30px;
}

.catData::after {
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #FFFFFF;
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
    top: 95%;
    transform: translate(-50%, 0);
    transition: all 0.3s ease-out;
    width: 0;
    z-index: 1;

}

.catData .icon {
    align-items: center;
    display: flex;
    justify-content: center;
}

.catData .icon svg {
    height: 20px;
    width: auto;
}

.catData .details {
    display: none;
    flex-direction: column;
    flex: 1;
}

/*
 * Property styles in highlighted state.
 */
.catData.highlight {
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
    height: 120px;
    padding: 8px 15px;
    width: auto;
}

.catData.highlight::after {
    border-top: 9px solid #FFFFFF;
}

.catData.highlight .details {
    display: flex;
}


@media (max-width: 768px) {

    #gallery .prodotto {
        height: 70vw;
    }

    #collezioni .prodotto {
        height: 400px;
    }

    .img_tipologia {
        min-height: 70vw;
    }

    #collezioni_carousel .prodotto {
        height: 40vw;
    }

    #news {
        padding: 90px 30px;
    }

    .news-img a {
        height: 50vw;
    }

    .tipologie .content {
        padding:90px 30px;
        display: flex;
        align-items: center;
    }

    #pagina {
        padding:30px;
    }

    .fascia-grigia {
        background-color: #f5f5f5;
        padding: 60px 30px;
    }

    .fascia-bianca {
        background-color: #fff;
        padding: 60px 30px;
    }

    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2.4rem;
    }

    h3 {
        font-size: 2rem;
    }

    h4 {
        font-size: 1.6rem;
    }

    .bg-vangogh, .bg-mandorlo, .bg-personalizzazione, .bg-qualita, .bg-progettazione, .bg-led, .bg-forno, .bg-decorazione, .bg-vetro,
    .bg-valori, .bg-lucesumisura-5, .bg-lucesumisura-4, .bg-lucesumisura-3, .bg-lucesumisura-2, .bg-lucesumisura-1, .bg-storia {
        min-height: 75vw;
    }
}

@media (max-width: 576px) {

    #mainmenu.active, #mainmenulang.active {
        width:100%;
    }

    #evidenza .prodotto {
        height: 400px;
    }

    .videobg .content {
        padding: 0 30px;
    }

    #vangogh .content {
        padding: 60px 30px;
    }


}