/************************ 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; } }