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

    COLOR PALETTE

    #1a70ad blu cangini
 */

html {
    font-size: 100%;
}

body {
    font-family: "Darker Grotesque", Helvetica, Arial, sans-serif;
    color: #000;
    font-size: 1.2rem;
}

a {
    color: #1a70ad;
}

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:#000;
    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:#000;
    transition-delay: initial;
}

a:hover, a:active {
    text-decoration: underline;
    color: #1a70ad;
}

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

h1 {
    font-size: 4rem;
}

h2 {
    font-size: 3rem;
}

h3 {
    font-size: 2rem;
}

h4 {
    font-size: 1.6rem;
}

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

.breadcrumbs a {
    color:#000;
}

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

#home-identity {
    position: relative;
}

#logo {

}

#logo img {
    height: 45px;
}

#page-identity{
    background-color: #000;
    min-height:130px;
}

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

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

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

#identity.detached, #home-identity #identity.detached {
    position:fixed;
    margin:0;
    padding: 20px 90px;
    background: rgba(0,0,0,0.8);
}

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

#mainmenu_btn_container {


}

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

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

#mainmenu_btn, #mainmenu_lang {
    font-size: 25px;
    color:#fff;
    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: #000;
}

#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
 *********************************************/

#esplora {
    background-image: url("../images/home_esplora.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color:#fff;
    padding: 200px 0;

}

#esplora h1, #esplora h2, #esplora h3, #esplora h4, #esplora p {
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

#newsletter {
    background-color:#000;
    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;
}

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

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

#evidenza .prodotto a {
    color: #fff;
    text-decoration: none;
}

#evidenza .prodotto .didascalia {
    background-color: rgba(0,0,0,0.6);
    opacity: 0;
    transition: opacity 0.3s ease;

    width: 100%;
    display: flex;
    align-items: center;
}

#evidenza .prodotto .didascalia div {
    text-align: center;
    width: 100%;
    text-shadow: 2px 2px 10px rgba(0,0,0,1);
}

#evidenza .prodotto a:hover > .didascalia {
    opacity: 1;
    transition: opacity 0.5s ease;
}

#vangogh .content {
    background-image: url("../images/home_zoe_vgm1.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color:#fff;
    padding: 200px;
}

#vangogh .dipinto {
    background-image: url("../images/home_zoe_vgm2.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.videobg {
    position: relative;
    overflow: hidden;
    background-color: #000;
}

.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
 *********************************************/




.page-title {
    position: relative;
}

.page-title .bg {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    text-align: center;
    color:#fff;
    background: rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
}

.page-title .bg .content {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
}

.page-title img {
    width: 100%;
}

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




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

#collezioni .prodotto a {
    color: #fff;
    text-decoration: none;
}

#collezioni .prodotto .didascalia {
    background-color: rgba(0,0,0,0.6);
    opacity: 0;
    transition: opacity 0.3s ease;

    width: 100%;
    display: flex;
    align-items: center;
}

#collezioni .prodotto .didascalia div {
    text-align: center;
    width: 100%;
    text-shadow: 2px 2px 10px rgba(0,0,0,1);
}

#collezioni .prodotto a:hover > .didascalia {
    opacity: 1;
    transition: opacity 0.5s ease;
}

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

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

#collezioni_carousel h2 {
    margin-bottom: 30px;
}

#collezioni_carousel a {
    color:#000;
}

#dettaglio_collezione {
    padding:90px 0;
}

#dettaglio_collezione h4 {
    margin-bottom: 30px;
}

#dettaglio_collezione .btn {
    margin-bottom: 30px;
    margin-right:15px;
}

.lista_colori {
    margin:30px 0;
    text-align: center;
}

.lista_colori img {
    max-height: 60px;
    margin-bottom: 10px;

}

.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%;
}

#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;
}

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

.copertina_catalogo img {
    width: 100%;
}
    /*********************************************
        FOOTER
     *********************************************/

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

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

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

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

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

/*********************************************
    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-storia {
    background-image: url('/images/azienda_storia.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 600px;
}

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

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

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

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

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

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

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

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

.bg-vangogh {
    background-image: url('/images/zoe_vangogh.gif');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 600px;
}

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

.campione_colore {
    height:60px;
}

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

.btn.filtro_tipologie.active, #resetFiltroTipologie.active{
    background-color: #1a70ad;
    color:#fff;
}

.btn.filtro_tipologie.active:hover, #resetFiltroTipologie.active:hover{
    background-color: #1a70ad;
    color:#fff;
}

/*
.gallery_progetti a {
    display: block;
    overflow: hidden;
    position: relative;
    height:35vh;
    width:100%;
    background-color: #000;
    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;
    }

    #identity {
        padding: 20px;
        margin:0;
    }

    #identity.detached {
        padding: 20px;
    }

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

    #home-identity #identity.detached {
        padding: 20px;
    }

    #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;
}

@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;
    }
}

@media (max-width: 576px) {

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

    #evidenza .prodotto {
        height: 400px;
    }

    #logo img {
        height: 30px;
    }

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

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


}