/* Visualizzabile da 200px - Struttura Mobile-first */ /* Inseriti in */ /*@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@1,900&display=swap');*/ /*@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');*/ /*@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@400;700&display=swap');*/ /*@import url('https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i');*/ /*@import url('https://fonts.googleapis.com/css?family=Walter+Turncoat');*/ /*@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;500;600;700&display=swap');*/ /*@import url('https://fonts.googleapis.com/css2?family=Rokkitt:wght@100;200;300;400;500;600;700;800;900&display=swap');*/ @import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); @font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2'); font-display:swap; } /*Open Sans, Liberation Sans Font Awesome, Kanit per il logo, */ :root{ /*BG blue #1f2e46 da provare*/ font-size:13px; --icon-spacing:calc(1rem + 10px); font-display: swap; } /*Reset*/ a{text-decoration:none;} body{margin:0;padding:0;/*overflow:hidden;*/font-display:swap;font-family:'Open Sans',Arial,sans-serif;font-family:'Ubuntu',sans-serif;} body > .console{font-family: Inconsolata, sans-serif;font-size:11px;background-color:#121212;color:#92C500;font-weight:700;} /* Per ripristinare i margini di default togliere i 2 zeri iniziali */ /*h1{font-size:2em; margin:0 0 .67em 0} h2{font-size:1.5em; margin:0 0 .75em 0} h3{font-size:1.17em;margin:0 0 .83em 0} h4{font-size:1em; margin:0 0 1.12em 0} h5{font-size:.83em; margin:0 0 1.5em 0} h6{font-size:.75em; margin:0 0 1.67em 0}*/ h1,h2,h3,h4,h5,h6{font-size:1rem;margin:0 0 .75em 0;font-weight:700} html{scroll-behavior:smooth} img{max-width:100%} ul{list-style-type:none;margin:0;padding:0;} ul li{box-sizing:border-box;} p{margin:0} /* SELETTORI RISERVATI */ /* SELETTORI DEL TEMPLATE: #cssmenu #jondev_header #jondev_topbar #preloader .back_to_top .colophon .footer .is-sticky .main .parallax-container nav SELETTORI NELLE PAGINE: #contatti #ordini .come_lavoriamo .presentazione .servizi */ /* ------------------- GESTISCO LA STRUTTURA ------------------- */ strong.thin {font-weight:400;} #preloader {z-index:2;position:fixed;top:0;right:0;bottom:0;left:0;} #preloader > p {/*position:absolute;top:1%;left:50%;transform:translateX(-50%);*/text-align:center;font-weight:900;font-size:2rem;font-family:'Kanit', sans-serif;} #preloader > img {position:absolute;/*width:60%;*//*height:242px;*/top:50%;left:50%;transform:translate(-50%, -50%);font-size:30px;font-family:'Open Sans', sans-serif;font-weight:bold;} .main {margin:0 auto;position:relative;} .back_to_top {display:none;position:fixed;bottom:5%;right:4%;z-index:1;border:0;padding:5% 6%;font-size:1.5rem;border-radius:50%;} .main > header {position:inherit;z-index:1;} /*#jondev_topbar {display:none}*/ #jondev_topbar > .transparent_texture {display:flex;flex-wrap:wrap;justify-content:space-evenly;flex-direction:column;} #jondev_topbar #mobile-phone, #jondev_topbar #mail {font-size:1rem;text-align:center;font-weight:600;} #jondev_header {justify-content:flex-start;position:relative;} #jondev_header > .bg_opacity {position:absolute;top:0;right:0;bottom:0;left:0;} #jondev_header > .bg_watermark {position:inherit;} #jondev_header .logo {display:block;text-align:center;font-size:2.4rem;text-transform:uppercase;} #jondev_header h2 {text-align:center;font-size:1.5rem;text-transform:uppercase;} #jondev_header p {text-align:center;font-size:1rem;} .parallax-container {position:relative;overflow:hidden;height:auto;} .parallax-container .parallax {position:absolute;top:0;left:0;right:0;bottom:0;z-index:-2;} .parallax-container .parallax img {opacity:0;position:absolute;left:50%;bottom:0;min-width:100%;min-height:100%;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transform:translateX(-50%);transform:translateX(-50%)} #cssmenu ul ul li a {width:100%;box-sizing:content-box;padding:20px;white-space:nowrap;} #cssmenu:not(.small-screen) li:hover > ul > li {max-height:80px;} #cssmenu.small-screen .submenu-button {width:48px;height:48px;} /*Elimino il float di Materialize.css per correggere i sub-menu in visualizzazione desktop*/ nav ul li {float:none;} .is-sticky > #cssmenu ul{max-height:calc(100vh - 46px);overflow-y:auto;} .footer .boxes {/*position:relative;*/display:flex;flex-wrap:nowrap;justify-content:space-evenly;flex-direction:column;transition:all .2s;} .footer .boxes > div h3 {margin:0;/*margin-left:var(--icon-spacing);*/text-transform:uppercase;font-style:italic;font-weight:600;display:block;box-sizing:border-box;} .footer .boxes > div h3 + p {margin:0;} .footer .boxes > div:last-child > h3 + ul {margin-bottom:0;} .footer .servizi_web ul li a:before, /*Per allineare le icone delle liste con il testo del sito*/ .footer .servizi_web ul li:before, /*la somma del font size delle icone con il margin-right deve essere uguale*/ .footer .contatti ul li:before, .footer .contatti ul li a:before, /*alla somma del font size delle icone dei box più il margin e le liste non devono avere margin-left come qui sopra.*/ .footer .contatti ul li a:after {display:inline-block;font-family:"Font Awesome 5 Pro";/*font-size:1rem;*/width:1rem;margin-right:10px;text-align:right;font-weight:300;} .footer .servizi_web ul li:before {content:"\f105";font-weight:900;} .footer .contatti ul li.nome {position:relative;} .footer .contatti ul li.nome:before {font-family:"Font Awesome 5 Duotone";content:"\f0c0";} .footer .contatti ul li.nome:after {font-family:"Font Awesome 5 Duotone";content:"\10f0c0";position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:var(--fa-secondary-opacity, 0.20);} .footer .contatti ul li.cellulare a:before {content:"\f879";} .footer .contatti ul li.telegram a:before {font-family:"Font Awesome 5 Brands";content:"\f3fe";} .footer .contatti ul li.mail a:before {content:"\f658";} .footer .contatti ul li.sedi {position:relative;} .footer .contatti ul li.sedi a:before {content:"\f80a";} .footer .note_legali ul li a:before {display:inline-block;font-family:"Font Awesome 5 Pro";font-size:1rem;width:1rem;margin-right:10px;text-align:right;} .footer .note_legali ul li.footer_link_privacy a:before {content:"\f15c";} .colophon {text-align:center;} .colophon > span{display:block;} @media (min-width:320px){ :root{font-size:16px;} .back_to_top {font-size:1rem;padding:4% 5%;} #jondev_topbar #mobile-phone, #jondev_topbar #mail {font-size:1rem;font-weight:600}} @media (min-width:420px){ /* Change layout spacings */ #jondev_topbar #mobile-phone {padding-right:0;text-align:left;} #jondev_topbar #mail {padding-left:0;text-align:right;} #jondev_topbar > .transparent_texture {justify-content:space-between;flex-direction:row} #jondev_topbar #mobile-phone, #jondev_topbar #mail {font-size:1rem/*;width:50%*/}} @media (min-width:480px){ .back_to_top {font-size:1.5rem;padding:3% 4%;}} @media (min-width:550px){ .footer .boxes {justify-content:space-between;flex-flow:row wrap} .footer .boxes > div {position:relative;width:47%;} } @media (min-width:640px){ .back_to_top {font-size:1.5rem;padding:2.2% 3%;right:2%} } @media (min-width:720px){ .footer .boxes > div {padding:0;} } @media (min-width:1024px){ .back_to_top {padding:1.5% 2%} .is-sticky > #cssmenu ul{overflow-y:unset} .footer .boxes > div {width:25%;}} /*select {display:static}*//*???*/ /* .block_content {display:flex;flex-wrap:nowrap;justify-content:space-evenly;flex-direction:column;}*/ /* ------------------- GESTISCO I FONT ------------------- */ /* ------------------- GESTISCO LE SPAZIATURE ------------------- */ :root{ --main-padding:10%; --padding-5:5%; --padding-y-li-footer:8%; --padding-bar-x:5%; --padding-bar-y:2.5%; --block-padding-x:var(--main-padding); --block-padding-y:var(--main-padding); --padding-vertical-elements:10%; --block-padding-single-column:0;} #jondev_topbar > .transparent_texture {margin:0;padding:0} #jondev_topbar #mobile-phone, #jondev_topbar #mail {padding:var(--padding-bar-y) var(--padding-bar-x)} #jondev_header .logo {padding:0 var(--block-padding-x)} #jondev_header > .bg_watermark {padding:var(--block-padding-y) 0} .main > div > div, .main > div > article{/*position:relative;*/padding:var(--block-padding-y) var(--block-padding-x)} .footer .boxes {padding:var(--block-padding-y) var(--block-padding-x)} .footer .boxes > div, .footer .boxes > div > div {margin-bottom:10%} .footer .boxes > div:last-child, .footer .boxes > div > div:last-child {margin-bottom:0} .footer .boxes div > ul li {padding-bottom:var(--padding-y-li-footer)} .footer .boxes div > ul li:first-child {padding-top:var(--padding-y-li-footer)} .footer .boxes div > ul li:last-child {padding-bottom:0} .colophon{padding:var(--padding-bar-y) var(--padding-bar-x)} /*@media (min-width:320px){:root{--main-padding:10%}}*/ @media (min-width:400px){:root{--padding-y-li-footer:5%}} @media (min-width:420px){#jondev_topbar #mobile-phone{padding-right:0}#jondev_topbar #mail{padding-left:0}} @media (min-width:550px){.footer .boxes{padding:var(--padding-5)}} @media (min-width:720px){:root{--padding-bar-x:2%;--padding-bar-y:1%}} @media (min-width:1024px){.footer .boxes > div{margin-bottom:0}} /* ------------------- GESTISCO IL COLORE ------------------- */ :root{ /*BG blue #1f2e46 da provare*/ /*Palette Template Colors:*/ color:#FF00FF;--black:#000000;--white:#FFFFFF;--none:none; --blue-light:#0D83DD; --blue-dark:#00283A; /* Colore primario */ --blue-darkest:#152732; /*Testo Blu Scuro per Titoli su Sfondo Bianco*/ --blue-darkness:#011F2D;/*Bordi Blu Scuri*/ --grey-lightest:#F3F3F3;/*Sfondo grigio chiaro*/ --grey-light:#DEDEDE; /*H2 quasi bianco su sfondo grigio chiaro*/ --grey-dark:#6C7C84; /*Testo grigio blu sfondo blu e Footer*/ --grey-dark:#7697A2; --grey-middest:#444; --grey-midd:#777; /*Testo grigio chiaro paragrafi su Sfondo Bianco, originale era 777*/ --lime:#92C500; /*Testo verde su Sfondo Bianco, Icone*/ --lime-dark:#6F9600; /*Sfondo verde scuro per Blocchi e Date Post*/ --lime-light:#9BB800; /*Testo Verde Scolorito (faded) su sfondo Bianco*/ --first-color:var(--blue-dark); --second-color:var(--lime); --tenth-color:var(--white); --link-in-dark:var(--lime); --icon-link-hover:var(--lime-light); --icon-spacing:calc(1rem + 10px); } a{color:inherit} body{background:var(--white)} #preloader {background:var(--first-color)} #preloader > p {color:var(--tenth-color);} #preloader > p > span {color:var(--second-color)} #preloader > img {text-shadow:0 0 10px #FFF, 0 0 20px #FFF, 0 0 30px #FFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 60px #228DFF;color:#FFF;} .back_to_top {background:var(--lime);color:var(--white)} .main > header {background:var(--first-color);color:var(--grey-dark)} #jondev_topbar {border-bottom:1px solid var(--blue-darkness);color:#a4b6d1} #jondev_topbar > .transparent_texture > li:hover{color:var(--second-color)} #jondev_header {color:var(--tenth-color)} #jondev_header .logo {font-family:'Kanit', sans-serif} #jondev_header .logo .dev {color:var(--second-color)} #jondev_header > .bg_opacity {background:#000;opacity:.85} #jondev_header > .bg_watermark {background:url('../img/bg-intro-appr.png')} /*Customize CSS Menu Maker*/ #cssmenu {background:var(--first-color);border-bottom:1px solid var(--blue-darkness);border-top:1px solid var(--blue-darkness)} #cssmenu ul li {color:var(--tenth-color)} #cssmenu li:hover > a {color:var(--second-color)} #cssmenu ul ul li a {background:var(--blue-darkness);} #cssmenu > ul > li.has-sub:hover > a:after {background:var(--second-color)} #cssmenu.small-screen ul ul li a {background:var(--blue-darkness);border-bottom:1px solid var(--blue-darkness)} #cssmenu.small-screen .submenu-button {border-left:1px solid var(--blue-darkness);} #cssmenu.small-screen .submenu-button:after, #cssmenu.small-screen .submenu-button:before{background:var(--tenth-color)} /*Aggiungo le icone alle voci di menu*/ #cssmenu ul li a:before {display:inline-block;font-family:"Font Awesome 5 Pro";font-size:1rem;width:1rem;margin-right:10px;text-align:right;} #cssmenu ul li a.menulink_homepage:before {content:"\f80c";} #cssmenu ul li a.menulink_preventivo:before {content:"\f0ae";}/*f0ae f0e0*/ #cssmenu ul li a.menulink_contatti:before {font-family:"Font Awesome 5 Brands";content:"\f287";} .footer {background:var(--first-color);color:/*var(--grey-dark)*/#a4b6d1} .footer h3 {color:var(--tenth-color);} .footer a {color:inherit;font-weight:bold;} .footer a:hover {color:var(--link-in-dark);} .footer .colophon {background-color:#012232;border-top:1px solid #001925;}