/* =============================================================================
   HTML5 CSS Reset Minified - Eric Meyer
   ========================================================================== */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
li{list-style:none}


/* =============================================================================
   My CSS
   ========================================================================== */

/* ---- base ---- */

html,body{ 
	width:100%;
	height:100%;
	
	::-webkit-scrollbar {  display: none; }
}

html{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body{
  font:normal 75% Arial, Helvetica, sans-serif;
}

canvas{
  display:block;
  vertical-align:bottom;
}


/* ---- stats.js ---- */

.count-particles{
  background: #000022;
  position: absolute;
  top: 48px;
  left: 0;
  width: 80px;
  color: #13E8E9;
  font-size: .8em;
  text-align: left;
  text-indent: 4px;
  line-height: 14px;
  padding-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.js-count-particles{
  font-size: 1.1em;
}

#stats,
.count-particles{
  -webkit-user-select: none;
  margin-top: 5px;
  margin-left: 5px;
}

#stats{
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.count-particles{
  border-radius: 0 0 3px 3px;
}


/* ---- particles.js container ---- */

#particles-js{
  width: 100%;
  height: 100%;
  background-color: #fafafa;
  background-image: url('/img/logo.png?5');
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}



a{
  	color: black;
 	text-decoration:underline;
	text-decoration-style: dotted;
}

a:hover{
  text-decoration: underline;
  color:#88b7cf;;
}

a:active {
  color: black;
}

a:visited {
  color: black;
}

	
.section{
		
		width:300px;
		margin:0 auto;
		margin-top:50px;
		padding-top:25px;
		padding-bottom:25px;
		border-top:1px dotted #000;  
		border-bottom:1px dotted #000; 
		text-align:center;
		font-size:2em;
}

.section_desc{
	width:100;
	padding:30px;
	box-sizing:border-box;
	text-align:center;
	font-size: 1.4em;
}



.servizio{
	width:33%;
	max-width:500px;
	aspect-ratio:1/1;
	border-radius:10px; 
	margin-top:30px; 
	box-shadow: 0px 0px 10px -0px #aaa;
	transition:0.2s;
	cursor:pointer;
	background:#fff;
}

.servizio:hover{

	box-shadow: 0px 0px 20px 0px #666;
}


.servizio_img{
	width:100%; 
	aspect-ratio:2/1;
	height:50%;
	top:0px; 
	border-top-left-radius:10px; 
	border-top-right-radius:10px; 
	 background-position: center center;
	background-size: cover; 
	background-repeat: no-repeat;
}



.servizio_txt{
	padding:10px; box-sizing:border-box;
	text-align:justify;
}




@media screen and (orientation:portrait) {
  
	.servizio,.servizio_img {
		margin-top:0px;
		width:100%;
		border-radius:0px;
		box-shadow: none;
	}
	
	
}




.contact{	
	position:fixed;
	bottom:15px;
	right:15px; 	 
	transition:0.5s; 
	opacity:0; 
	visibility:hidden;
}



.contact_option{
	width:40px;
	height:40px;
	border-radius:40px;
	background:#ccc;
	margin-top:15px;
}

.picker-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:rgba(50, 50, 50, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s; 
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
   z-index:99;
}


.focus{
	position:fixed;
	width:90%;
	max-width:800px;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	
	height:90%;
	
	border-radius:20px;
	background:#fff;
	overflow:auto;
	opacity: 0;
  visibility: hidden;
  transition: all 0.5s; 
  z-index:100;
}
	



/*----------------------slideshow------------------------*/

* {
  box-sizing: border-box;
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
  margin-top:50px;
}

@media screen and (orientation:portrait) {
  
  .container {
   
 width:100%;
  }
}
  

@media screen and (orientation:landscape) {
  
  .container {
   
 max-width:1024px;
  margin: 0 auto;
  }
} 
/* Hide the images by default */
.mySlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  box-sizing:border-box;
  display:inline-block;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}