/*minimizzazione html-minifier --remove-comments --collapse-whitespace --minify-css --minify-js --file-ext php /home/luca/html/www/html/css/style_NOT_MINIMIZED.css -o /home/luca/html/www/html/css/style.css */ /* ! Reset */ body, html{ font-family: 'Inter', sans-serif; font-size: 16px; box-sizing: border-box;margin: 0;padding: 0;} *,*:before,*:after{ box-sizing: border-box; } h1,h2,h3,h4,h5,h6, p, ol, ul{margin: 0;padding: 0; line-height: 1.1; color: inherit;} ol,ul{list-style-type: none;} img{height: auto;} :after, :before { box-sizing: border-box; } /* ! Base Style */ html,body{height: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; line-height: 1.42857143; color: #333;} body{ background: rgb(224,224,148); background: linear-gradient(90deg, rgba(224,224,148,1) 30%, rgba(108,112,89,1) 100%); } .Mio_font-text{ font-family: 'Allura', cursive; font-weight: 700; } .my_width{ width: 100%; max-width: 1350px;margin: auto;} /* cta2 pulsante 'torna su' in sources*/ h1, h2, h3, h4, h5, p{ padding-bottom: 0px;} p{line-height: 28px; color:#222; font-weight: 300;} a:focus,a:hover{text-decoration: none;} a{color:#333; text-decoration:none;} a:hover{color: #f5d033;text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;transition: all 1s cubic-bezier(.215, .61, .355, 1);} ul li{	list-style:none;} /* @font-face { font-family: 'MyWebFont'; src: url('Blackberry_Jam_Personal_Use.ttf') format('truetype'); font-display: fallback; } */ blockquote{ width: 30vw; margin: 7px; border: 2px solid #333; padding:1px; border-radius: 15% 0 15% 0; float: right; display: inline-block; color: #333; background: #c9ca89; text-align:center; } details cite{font-style: italic;} .intro-text{text-transform: uppercase;font-size: 20px;font-weight: bold;} /*.button{padding: 18px 28px; background: #316bff; color:#fff; display: inline-block;border-radius: 4px}*/ .button{margin-top: 30px;padding: 18px 28px; background: #6c7059; color:#fff; display: inline-block;border-radius: 4px;} @media (max-width: 768px) { .big-text{font-size: 32px;} /* a{color:#777;text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000; }*/ } .cta{display: inline-block; float: right;opacity: 0.7;color: #fff;padding: 13px 30px; border-radius: 25px;text-decoration: none;font-weight: bolder;} /* cta2 pulsante contatti*/ .cta2{display: inline-block;background: rgb(224,224,148); background: linear-gradient(90deg, rgba(224,224,148,1) 30%, rgba(108,112,89,1) 100%);opacity: 0.7;color: #333;padding: 13px 30px; border-radius: 25%;text-decoration: none;font-weight: bolder;} .cta2:hover{color: #f5d033;text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;transition: all 1s cubic-bezier(.215, .61, .355, 1);} @media (max-width: 768px) { .cta2{display: block;} } /*p{line-height: 22px;text-align: justify;}*/ .animate{ -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } /* impostazioni per immagini*/ .imago{	float: left; padding-right: 3px; margin-top:0px;} .imago2{float: left; padding-right: 3px; padding-top: 4px;} /*------------------------ Header ------------------------*/ .header{ background: rgba(0, 0, 0, 0.3); /*position: relative; */ /*settando position fixed e z-index l'header contenente il menu rimane in primo piano fisso*/ position: fixed;z-index: 8;width: 100%;} .header__logo{color:#fff;float: left;display: block;padding: 20px;} .header__menu{float: right;margin: 0;padding: 0 } .header__menu__item {display: inline-block;} .header__menu__item a{color: #fff;display: block;padding: 20px;} .header__menu__item a:hover{background: #000;} .header__icon-bar{display: block;float: right ;padding:20px;display: none;} .header__icon-bar span{display: block;height: 3px;width: 30px;background: #fff;margin-bottom: 5px} @media (max-width: 768px) { /* .header{ position: absolute; position: fixed; z-index: 100;width: 100%;}*/ .header__icon-bar{display: block;} .header{/*background: transparent;*/} .header__menu{ width:100%;height:0px;overflow: auto;display: block;} .header__menu__item {display: block;visibility: visible;	} .header__menu li {display: block; } .header__menu li ul {display: block; position: fixed;} .is-open{height: 300px;overflow: auto;} } /*------------------------ Cover ------------------------*/ .cover{height:70%; background-image: url("https://source.unsplash.com/400x260/?cars"); background-size: cover; -o-background-size: cover; -moz-background-size: cover; background-position: center center; position: relative; } /*------------------------ Cover no image ------------------------*/ .cover__void{height:70%; background-size: cover; -o-background-size: cover; -moz-background-size: cover; background-position: center center; position: relative; } .cover__filter{ /*background-color: #000; opacity: 0.5;*/ width: 100%;height: 100%;position: absolute;z-index: 1; background: rgb(0,0,0); background: -webkit-linear-gradient(rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%); background: -o-linear-gradient(rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%); background: linear-gradient(rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%); } .cover__caption{display: table; height: 100%; width: 100%; position: relative; z-index: 1;padding: 10px 20px;} .cover__caption__copy{display: table-cell; vertical-align: middle; text-align: center; color: #fff;} .cover__text{text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;} .cover--single{height: 50%;} .cover--single h1{font-size: 42px;} @media (max-width: 768px) { /* Cover */ .cover{height:100%;} .cover__caption{padding: 200px 20px;} } /*------------------------ Cards ------------------------ .cards{max-width: 1350px; width: 100%; margin: 40px auto;} .card{width: 30%; margin: 0 1.5%;background: #fff;float: left;margin-top: 20px;margin-bottom: 20px;} .card__image{width: 100%; height: auto;} .card__copy{padding: 5px 20px;} .card__copy h3{margin-bottom: 0} @media (max-width: 768px) { .card{width: 90%; margin: 5%;} } */ .cards{max-width: 1350px; width: 100%; margin: 40px auto;} .cards p{line-height: 24px;} .card{width: 32%; margin: 0 0.5%;background: #fff;float: left;margin-top: 20px;margin-bottom: 20px;} .card__image{width: 100%; height: auto;} .card__copy{padding: 5px 20px;} .card__copy h3{margin-bottom: 0} @media (max-width: 768px) { .card{width: 95%; margin: 2.5%;} } /*------------------------ Sets ------------------------*/ .Sets{max-width: 1200px;margin: 130px auto;} .Set{width: 47%; margin: 0 1.5%;background: #fff;position: relative;float: left;margin-top: 20px;margin-bottom: 20px;} .Set h2{margin-bottom: 0;font-size: 22px;font-style: italic;} .Set h3{margin-bottom: 0;font-size: 18px;font-style: oblique;} .set__image{width: 75%;height:auto; padding: 10px;vertical-align: top;} .Set__copy{padding: 5px 5px;} /*------------------------ Banner ------------------------*/ .banner{background: #fff;height: 50%;} .banner__bis{background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0, 0.7));/*height: 75%;*/} .banner__image{width: 30%; float: left;height: 100%; background-image: url("https://source.unsplash.com/400x400/?people"); background-size: cover; -o-background-size: cover; -moz-background-size: cover; background-position: center center; } .banner__sfondo{width: 30%; float: left;height: 100%;border-radius:100%;padding: 40px;} .banner__copy{width: 70%; float: left;height: 100%;display: table;} .banner__copy__text{display: table-cell;vertical-align: middle;padding: 30px} .banner__copy__text h3{font-size: 36px;margin-bottom: 0;} .banner__copy__text h4{font-size: 22px;margin: 5px 0;} @media (max-width: 768px) { .banner__sfondo{padding:20px;} } /*------------------------ Tablet ------------------------*/ @media (max-width: 998px){ /* Banner */ .banner__image, .banner__copy{width: 50%;height: 50%;} /*.banner__bis{height: 100%;}*/ .banner__sfondo{height: auto;} } /*------------------------ Smartphone ------------------------*/ @media (max-width: 768px) { /* Banner */ .banner{height: 100%;} .banner__image, .banner__copy{width: 100%;height: 50%;} } /*------------------------ Footer ------------------------*/ .footer{background: #333;padding: 50px;color:#fff;margin-top: 20px;vertical-align: top;} .footer p{text-align: center; background: -webkit-linear-gradient(#eee, rgb(224,224,148)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} .footer img{ float:left; border-width:0; padding:15px; } .footer a:hover{color: #f5d033;text-shadow: -1px 0 #fff, 0 1px #000, 1px 0 #000, 0 -1px #000;transition: all 1s cubic-bezier(.215, .61, .355, 1);} @media (max-width: 768px) { .footer{15px;} } /*------------------------ Single ------------------------*/ .single{} .single__copy{max-width: 800px; margin: 0px auto; margin-top: -20px;background: #fff;padding:20px 40px;position: relative;z-index: 1;} .single__copy_vuoto{max-width: 1024px; margin: 0px auto; position: relative;z-index: 1;} .single__copy__meta{font-weight: bold;font-size: 16px;font-style: italic;} .single__copy__title{font-size: 32px;} /*------------------------ Single Marchetti ------------------------*/ .single_marchetti{max-width: 1350px;width:100%;} .single_marchetti_base{color:#fff;vertical-align: top;} .single_marchetti_base p{background: -webkit-linear-gradient(#eee, rgb(224,224,148)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} a:hover{color: #f5d033;text-shadow: -1px 0 #fff, 0 1px #000, 1px 0 #000, 0 -1px #000;transition: all 1s cubic-bezier(.215, .61, .355, 1);} /*------------------------ Scomparsa ------------------------*/ details > summary { list-style: none; } details > summary::-webkit-details-marker { display: none; } details { /*background: #e6e6e6;*/ /*background: rgb(242,231,191); background: linear-gradient(90deg, rgba(242,231,191,0) 0%, rgba(242,231,191,1) 100%);*/ border:1px solid #fff; margin: 5px; border-radius: 5px 15px; padding: 20px; } /* summary per pagina sources*/ summary {color: #f5d033;text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000; cursor: pointer; } .rounded-corners-gradient-borders { box-sizing: border-box; padding: 16px; border-radius: 5px 15px; background: linear-gradient(45deg, #F48ACE 0%, #493A97 100%); margin: 24px; transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1), box-shadow 0.8s cubic-bezier(0.76, 0, 0.24, 1); } .rounded-corners-gradient-borders:hover { transform: scale(1.1) rotate(1deg); transform-origin: center center; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25), 0 0 48px rgba(0, 0, 0, 0.35); } .image__icon {float:left;padding:5px;margin-top: -15px;width:50px; } /* configurazione estetica delle immagini random */ .slider1 { min-width: 100px; background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0, 0.7)); background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0, 0.7)); -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; background-repeat: no-repeat; background-size: cover; } .slider2 { min-width: 100px; background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0, 0.7)); -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; background-repeat: no-repeat; background-size: cover; } .slider3 { min-width: 100px; background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0, 0.7)); -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; background-repeat: no-repeat; background-size: cover; } .slider4 { min-width: 100px; background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0, 0.7)); -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; background-repeat: no-repeat; background-size: cover; } .slider5 { min-width: 100px; background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0, 0.7)); -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; background-repeat: no-repeat; background-size: cover; } .slider6 { min-width: 100px; background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0, 0.7)); -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; background-repeat: no-repeat; background-size: cover; } .slider7 { min-width: 100px; background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0, 0.7)); -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; background-repeat: no-repeat; background-size: cover; } .slider8 { min-width: 100px; background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0, 0.7)); -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; background-repeat: no-repeat; background-size: cover; } .slider9 { min-width: 100px; background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0, 0.7)); -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; background-repeat: no-repeat; background-size: cover; } .slider0 { min-width: 100px; background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0, 0.7)); -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; background-repeat: no-repeat; background-size: cover; } @media (max-width: 768px) { .slider1 { background-size: contain; } .slider2 { background-size: contain; } .slider3 { background-size: contain; } .slider4 { background-size: contain; } .slider5 { background-size: contain; } .slider6 { background-size: contain; } .slider7 { background-size: contain; } .slider8 { background-size: contain; } .slider9 { background-size: contain; } .slider0 { background-size: contain; } } .container_frame{ position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ } .container_frame_4by3{ position: relative; overflow: hidden; width: 100%; padding-top: 75%; /* 4:3 Aspect Ratio */ } .container_frame_int{ position: relative; overflow: hidden; width: 100%; padding-top: 100%; /* 1:1 Aspect Ratio */ } .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } .mioSplide{ margin:50px; } @media (max-width: 768px) { .mioSplide{ margin:0; } } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } /* start commented backslash hack \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* close commented backslash hack */ *, *:before, *:after{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }