﻿
	/*@media (min-width:320px){}
	@media (min-width:360px){}
	@media (min-width:400px){}
	@media (min-width:480px){}
	@media (min-width:720px){}
	@media (min-width:800px){}
	@media (min-width:960px){}*/
	:root{
		/*Palette Template Colors:*/
		--dark-block_bg:		var(--blue-dark);	--light-block_bg:		var(--white);		--light_grey-block_bg:			var(--grey-lightest);
		--dark-block_title:		var(--white);		--light-block_title:	var(--blue-darkest);--light_grey-block_title:		var(--grey-light);
		--dark-block_subtitle:	var(--lime);		--light-block_subtitle:	var(--lime);		--light_grey-block_subtitle:	var(--);
		--dark-block_txt:		var(--white);		--light-block_txt:		var(--grey-midd);	--light_grey-block_txt:			var(--grey-middest);
		--dark-block_bold:		var(--lime);		--light-block_bold:		var(--blue-darkest);--light_grey-block_bold:		var(--lime-dark);
		--dark-block_link:		var(--);			--light-block_link:		var(--lime);		--light_grey-block_link:		var(--);
		--dark-block_link_hover:var(--);														--light_grey-block_link_hover:	var(--);
		--dark-block_icon:		var(--lime);													--light_grey-block_icon:		var(--);

		--single-article-bg:			var(--grey-lightest);
		--single-article-title:			var(--grey-light);
		--single-article-title-after:	var(--);
		--single-article-title-cap:		var(--blue-darkest);
		--single-article-txt:			var(--grey-middest);
		--single-article-link:			var(--);
		--single-article-link_hover:	var(--);

	}
		/* HOMEPAGE */
		/*background:[background-image] [background-position] / [background-size] [background-repeat] [background-attachment] [background-origin] [background-clip] [background-color];*/
				.come_lavoriamo									{padding:var(--block-padding-y) var(--block-padding-x);}
				.come_lavoriamo > .bg_opacity					{position:absolute;top:0;right:0;bottom:0;left:0}
				.presentazione									{display:flex;flex-flow:column-reverse}
				.presentazione > .fototessera					{text-align: center;}
				.presentazione > .fototessera > .border,
				.presentazione > .fototessera > .border > .img	{line-height:0;border-radius:50%}
				.presentazione > .fototessera > .border			{display:block;padding:5px;box-sizing:border-box;width:160px;height:160px;margin:2rem auto 0 auto;}
				.presentazione > .fototessera > .border > .img	{width:100%;height:100%}
				.presentazione > .descrizione					{text-align:center}
				.presentazione > .descrizione > h1				{font-size:1.231rem;font-weight:700;margin:0;text-transform:uppercase}
				.presentazione > .descrizione > h1 + span		{display:block;font-weight:400;font-size:1rem;text-transform:uppercase;margin-bottom:1rem}
				.presentazione > .descrizione > p				{font-size:.86rem;line-height:1.6rem}/*font-size:1.046rem*/
				.servizi										{position:relative;display:flex;flex-flow:column;text-align:center;z-index:0}
				.servizi > .texture								{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}
				.servizi > .servizio							{display:flex;flex-flow:column;justify-content:space-between;margin-bottom:20%;z-index:2}
				.servizi > .servizio:first-child				{margin-top:10%}
				.servizi > .servizio:last-child					{margin-bottom:10%}
				.servizi > .servizio > .servizio_head i			{font-size:4rem;border-radius:50%;padding:15px;margin-bottom:5%}
				.servizi > .servizio > .servizio_head h1,
				.servizi > .servizio > .servizio_head h2		{font-size:1.2rem;text-transform:uppercase}
				.servizi > .servizio > .servizio_body p			{font-size:.86rem;line-height:1.6rem}/*font-size:1.046rem*/
				.servizi > .servizio > .servizio_body p strong	{font-weight:inherit}
				.servizi > .servizio > .servizio_footer			{display:none;margin-top:10%}

				.servizi_light											{position:relative;display:flex;flex-flow:column;text-align:center;z-index:0}
				.servizi_light > .texture								{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}
				.servizi_light > .servizio								{display:flex;flex-flow:column;justify-content:space-between;margin-bottom:20%;z-index:2}
				.servizi_light > .servizio:first-child					{margin-top:10%}
				.servizi_light > .servizio:last-child					{margin-bottom:10%}
				.servizi_light > .servizio > .servizio_head i			{font-size:3rem;border-radius:50%;padding:25px;margin-bottom:5%}
				.servizi_light > .servizio > .servizio_head h1,
				.servizi_light > .servizio > .servizio_head h2			{font-size:1.2rem;text-transform:uppercase}
				.servizi_light > .servizio > .servizio_body p			{font-size:.8em;line-height:1.9em}/*font-size:1.046rem*/
				/*.servizi_light > .servizio > .servizio_body p strong	{}*/
				.servizi_light > .servizio > .servizio_footer			{display:none;margin-top:10%}

				.come_lavoriamo									{text-align:center;}
				.come_lavoriamo > .bg_opacity					{z-index:-1;}
				.come_lavoriamo h3								{font-size:2rem;text-transform:uppercase;}
				.come_lavoriamo h3:after						{content:"";display:block;height:1px;margin:0.31225em auto 0;position:relative;width:100px;}
				.come_lavoriamo p								{max-width:1000px;margin:0 auto;}
		.main > div > .cta												{position:relative;display:flex;display:none;flex-flow:column;justify-content:space-between;font-size:1.0rem;font-family:'Walter Turncoat', sans-serif;text-transform:uppercase;}
		.main > div > .cta > .texture									{position:absolute;top:0;right:0;bottom:0;left:0}
		.main > div > .cta > .action_text,
		.main > div > .cta > .action_click								{z-index:0;}
		.main > div > .cta > .action_text h3							{font-family:"Open Sans", sans-serif;font-size:2rem;text-align:center;}
		.main > div > .cta > .action_text h3:after						{content:"";display:block;height:1px;margin:0.31225em auto 0;position:relative;width:100px;}
		.main > div > .cta > .action_click								{margin-top:5%;font-family:"Open Sans", sans-serif;text-align:center;line-height:3rem;text-transform:none;}
		.main > div > .cta > .action_click a							{line-height:1rem;}
		.main > div > .cta > .action_click a.button_lime				{display:inline-block;box-sizing:border-box;padding:7%;border:none;border-radius:5px;font-size:1.2rem;text-align:center}
		.main > div > .blog												{display:none;}


		/* CONTATTI */
				#contatti{display:flex;flex-flow:column;font-size:.9rem;}
				#contatti h1{font-size:2rem;}
				#contatti a{font-weight:900;}
				#contatti div{margin-bottom:5%;}
				#contatti .text_block{margin-bottom:5%;}
				#contatti .social_links{display:flex;justify-content:space-evenly;margin-bottom:5%;flex-wrap:wrap;justify-content:space-evenly;}
				#contatti .social_links a{text-align:center;display:block;box-sizing:border-box;width:40%;height:100%;padding:1rem 0;}
				/*#contatti .social_links a.icon-link-telegram{margin-top:5%;}*/
				#contatti .social_links a:before,
				#contatti .social_links a:after{font-family:"Font Awesome 5 Brands";font-size:3rem;text-align:center;}
				#contatti > form input[type="text"],
				#contatti > form textarea,
				#contatti > form select {display:block;box-sizing:border-box;width:100%;height:auto;margin:0 0 8px 0;background-color:rgba(0,0,0,0);border:1px solid var(--blue-dark);padding:3%;color:inherit;font-family:inherit;font-size:.8rem;}
				#contatti > form label,
				#contatti > form a{font-size:.8rem;}
				#contatti > form .submit{border:0;width:100%;padding:5%}

		.main > div > .privacy{color:var(--light-block_txt);background:none repeat scroll 0 0 #eeeeee;background:#f3f3f3 none repeat scroll 0 0;}
		.main > div > .privacy ol{list-style-type:none;padding-left:2.5%;margin:0;}
		.main > div > .privacy a[href^="#"]{color:var(--light-block_link);font-weight:900;text-decoration:underline;line-height:2rem}
		.main > div > .privacy p{font-size:1rem;}
		.main > div > .privacy > div > .titolare p{font-size:.9rem;line-height:2rem;}
		.main > div > .privacy > div > div{margin-bottom:5%;}
		.main > div > .privacy > article > div h1,
		.main > div > .privacy > div > div h1,
		.main > div > .privacy > div > div h2{color:var(--light-block_title)}
		.main > div > .privacy > div > div h3{margin-top:2%;}
		.main > div > .privacy > div > div h3+p{padding-left:5%;border-left:1px solid #dedede;}

		/* ORDINI */
				#ordini				{color:var(--light-block_txt);background:#444;display:flex;flex-flow:row wrap;justify-content:space-between;align-items:flex-start;}
				#ordini > div		{margin-bottom:1%;width:49.5%;background:#FFF;word-break:break-all;}
				#ordini > div > h2	{padding:1%;margin:0;background-color:#6f9600;color:#FFF;font-size:.8rem;}
				#ordini > div > div	{padding:2%;padding-top:1%;border:1px solid #e0e0e0;border-top:0;font-size:.7rem;}

		/* PAGINA SINGOLA */
				#pagina_singola				{background:var(--single-article-bg);color:var(--single-article-txt)}
				#pagina_singola h1,
				#pagina_singola h2,
				#pagina_singola h3			{text-align:center;text-transform:uppercase;}
				#pagina_singola h2,
				#pagina_singola h3			{color:var(--single-article-title-cap)}
				#pagina_singola h1			{font-size:7vw;}
				#pagina_singola h2			{font-size:5vw;}
				#pagina_singola h3			{font-size:4vw;color:var(--lime);}
				#pagina_singola > section > a:nth-child(1){display:block;padding-top:65px;margin-top:-50px;}
				#pagina_singola h1			{color:var(--single-article-title)}
				#pagina_singola h1:after	{background:#dedede none repeat scroll 0 0;content:"";display:block;height:1px;margin:0.31225em auto 0;position:relative;width:100px;}
				#pagina_singola p			{/*font-size:.86em;*/line-height:1.6em;line-height:2rem;margin:1em 0;}
				#pagina_singola p > span.role{font-style:italic;}
				#pagina_singola p,
				#pagina_singola ul			{font-size:1.1rem;}
				#pagina_singola ol			{list-style-type:decimal;padding-left:1.5rem;font-weight:600;}
				#pagina_singola ol li		{padding-bottom:1rem;}
				#pagina_singola ol li:last-child		{padding-bottom:0;}
				/*#pagina_singola ul		{padding-left:1rem;}*/
				#pagina_singola ul > a		{display:block;padding-top:65px;margin-top:-50px;text-transform:uppercase;font-weight:700;color:var(--first-color)}
				#pagina_singola ul li		{font-size:1rem;padding-bottom:1rem;font-weight:600;}
				#pagina_singola ul.serv li	{font-size:1rem;padding-bottom:1rem;font-weight:700;}
				#pagina_singola ul li > span.desc{font-size:.9rem;font-weight:400;font-style:italic;color:var(--grey-midd);}
				#pagina_singola ul li > a	{display:block;font-weight:600;text-decoration:underline;line-height:1.5rem;color:var(--second-color)}


				#pagina_singola > section	{margin-top:var(--block-padding-y)}
				#pagina_singola > section > a:nth-child(3){
					padding:.5rem 1rem;
					border-radius:15px;
					font-weight:700;
					font-size:.8rem;
					letter-spacing:1px;
					background-color:var(--second-color);
					color:var(--first-color);
				}
				#pagina_singola > section p > a{color:var(--lime);text-decoration:underline;font-weight:bold;font-style:italic;}
				/*#pagina_singola h2 + p{}
				#pagina_singola h3{}
				#pagina_singola h3 + p{}*/


.rsw_pistoia{background:none repeat scroll 0 0 #eeeeee;background:#f3f3f3 none repeat scroll 0 0;}
/*Form https://www.jondev.it/realizzazione-siti-web-pistoia */
/*.form_pt > div > input		{}
.form_pt > div > textarea	{}
.form_pt > div > div > label > input{}*/

				/*#pagina_singola > *{display:none;}*/
				#pagina_singola > form{display:block;}
					.form_pt > div > input,
					.form_pt > div > textarea,
					.form_pt > div > div > label > input{
						box-sizing:border-box;
						width:100%;
						padding:14px;
						margin:0 0 10px 0;
						border-radius:3px;
						font-size:14px;
						border:1px solid #000;
						background-color:rgba(0,0,0,0);
						/*font-family:'Inconsolata', sans-serif;*/
						}
					.form_pt > div > div > label > input{width:auto;}
				#pagina_singola span.eccoci{display:block;line-height:initial;text-align:center;font-size:10vw;font-weight:900;font-style:italic;}

@media (min-width:270px){.presentazione > .fototessera > .border{width:200px;height:200px}}
@media (min-width:320px){}
@media (min-width:360px){}
@media (min-width:460px){
		/* HOMEPAGE */
		.main > div > .cta > .action_click a.button_lime				{padding:6%}
}
@media (min-width:550px){
		/* HOMEPAGE */
		.main > div > div, .main > div > section			{padding:var(--padding-5)}
				.presentazione								{padding:0;flex-flow:row-reverse;justify-content:space-between;align-items:center;}
				.presentazione > div						{box-sizing:border-box;width:50%}
				/*.presentazione > div.fototessera			{}*/
				.presentazione > div.fototessera > .border	{margin:0 auto}
				.presentazione > div.descrizione			{text-align:left}
				.presentazione > div.descrizione > h1		{margin-top:0}
				/*.presentazione > div.descrizione > p		{font-size:.8rem}*/
				.servizi									{justify-content:space-between;flex-flow:row wrap}
				.servizi > .servizio						{position:relative;width:47%;margin-bottom:10%}
				.servizi > .servizio > .servizio_body		{flex:1}

				.servizi_light									{justify-content:space-between;flex-flow:row wrap}
				.servizi_light > .servizio						{position:relative;width:47%;margin-bottom:10%}
				.servizi_light > .servizio > .servizio_body		{flex:1}

		.main > div > .cta > .action_click a.button_lime		{padding:5%}
}
@media (min-width:540px){#contatti .social_links a{width:auto;}}
@media (min-width:640px){
		/* HOMEPAGE */
				.presentazione > div.descrizione > h1		{font-size:1rem;margin-bottom:1rem}
				/*.presentazione > div.descrizione > p		{font-size:.86em;line-height: 1.6em;}*/
				/*.servizi > .servizio > .servizio_body p		{font-size:1.1rem}*/
		.main > div > .cta > .action_click a.button_lime		{padding:3% 7%}

		/* CONTATTI */
				#contatti{flex-flow:row;justify-content:space-between;}
				#contatti > *{width:49%;}
}
@media (min-width:1024px){
		/* HOMEPAGE */
				.servizi									{justify-content:space-between}
				.servizi > .servizio						{width:20%;margin-bottom:0}
				.servizi > .servizio:last-child				{margin-bottom:0}
				.servizi > .servizio > .servizio_head h1,
				.servizi > .servizio > .servizio_head h2	{font-size:1rem}
				/*.servizi > .servizio > .servizio_body p		{font-size:.85rem}*/

				.servizi_light									{justify-content:space-between}
				.servizi_light > .servizio						{width:20%;margin-bottom:0}
				.servizi_light > .servizio:last-child			{margin-bottom:0}
				.servizi_light > .servizio > .servizio_head h1,
				.servizi_light > .servizio > .servizio_head h2	{font-size:1rem}
				.servizi_light > .servizio > .servizio_body p	{font-family: "Liberation Sans", "Open Sans", sans-serif;font-size:.85em;line-height:1.65em}

				.come_lavoriamo p								{max-width:640px;margin:0 auto;font-size:1.4rem;line-height:2.5rem;font-weight:700;}

		.main > div > .cta					{flex-flow:row;justify-content:space-between;align-items:center;}
		.main > div > .cta > .action_text,
		.main > div > .cta > .action_click	{width:50%;}
		.main > div > .cta > .action_click	{margin-top:0;}

		#pagina_singola > section > a:nth-child(1)	{padding:26px;}
		#pagina_singola > section > a:nth-child(3)	{border-radius:50px;
			padding:.5rem 1rem;
			border-radius:15px;
			font-weight:800;
			text-transform:uppercase;
			font-size:.8rem;
			letter-spacing:2px;
		}
		#pagina_singola h2							{font-size:3vw;}
		#pagina_singola h3							{font-size:2vw;}
		#pagina_singola ul > a						{display:block;padding-top:70px;margin-top:-55px;}
}



		/* HOMEPAGE - COLORI */
				.presentazione									{color:#444}
				.presentazione > .fototessera > .border			{border:1px solid #e0e0e0}
				.presentazione > .fototessera > .border > .img	{background:url('https://www.jondev.it/img/Johnny/Johnny-Alexis-Ferrari.jpg') center center/cover no-repeat}
				.presentazione > .descrizione > h1				{color:var(--light-block_title)}
				.presentazione > .descrizione > h1 + span		{color:var(--light-block_subtitle)}
				.servizi										{background:var(--dark-block_bg);color:var(--dark-block_txt);box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.5)}
				.servizi > .texture								{background:url('https://www.jondev.it/img/bg_egg_shell.png')}
				.servizi > .servizio > .servizio_head i			{border:2px solid var(--dark-block_icon);color:var(--dark-block_icon)}
				.servizi > .servizio > .servizio_head h2		{color:var(--dark-block_title)}
				.servizi > .servizio > .servizio_body p strong	{color:var(--dark-block_bold)}

				.servizi_light											{background:var(--light-block_bg);color:var(--light-block_txt);box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.5)}
				/*.servizi_light > .texture								{background:url('https://www.jondev.it/img/bg_egg_shell.png')}*/
				.servizi_light > .servizio > .servizio_head i			{border:2px solid var(--dark-block_icon);color:#FFF;background:var(--dark-block_icon)}
				.servizi_light > .servizio > .servizio_head h2,
				.servizi_light > .servizio > .servizio_head h1			{color:var(--light-block_title)}
				.servizi_light > .servizio > .servizio_body p strong,
				.servizi_light > .servizio > .servizio_body p b			{font-weight:400;color:var(--light-block_bold)}

				.come_lavoriamo									{color:var(--grey-midd);background:url('https://www.jondev.it/img/bg-intro-appr.png')}
				.come_lavoriamo h3								{color:var(--dark-block_title)}
				.come_lavoriamo h3:after						{background:var(--dark-block_icon) none repeat scroll 0 0;}
				.come_lavoriamo p								{color:var(--dark-block_txt);font-size:1.0rem;font-weight:500;}
				.come_lavoriamo > .bg_opacity					{background:#000;opacity:.8}
		.main > div > .cta									{background:var(--lime-dark);background:var(--black);color:var(--dark-block_txt)}
		.main > div > .cta > .texture						{background:url('https://www.jondev.it/img/bg_blackboard.png')}
		.main > div > .cta > .action_text h3:after			{background:var(--dark-block_icon) none repeat scroll 0 0;}
		.main > div > .blog									{background:var(--light_grey-block_bg);box-shadow:0px -10px 9px -11px rgba(0, 0, 0, 0.5)}

		/* CONTATTI - COLORI */
				#contatti								{background:url('https://www.jondev.it/img/bg_brush.png');color:var(--light-block_title)}
				#contatti a								{color:var(--light-block_link)}
				#contatti .social_links a:before		{display:block;}

				#contatti a.icon-link-phone				{color:inherit;}
				#contatti a.icon-link-phone:before		{font-family:"Font Awesome 5 Pro";content:"\f095";color:#28A8EA;}				

				#contatti a.icon-link-telegram			{color:inherit;}
				#contatti a.icon-link-telegram:before	{content:"\f2c6";color:#28A8EA;}
				#contatti a.icon-link-whatsapp			{color:inherit;}
				#contatti a.icon-link-whatsapp:before	{content:"\f232";color:#25D366;}
				#contatti a.icon-link-linkedin			{color:inherit;}
				#contatti a.icon-link-linkedin:before	{content:"\f08c";color:#006097;}

		.button_lime		{color:var(--dark-block_txt)}
		.button_lime		{background:var(--lime-dark);color:var(--tenth-color)}
		.button_lime:hover,
		.button_lime:active	{background:var(--second-color)}
