@charset "utf-8";

/* CSS Document */



@media only screen and (max-width: 1023px) {

#header{

	width: 90%;

	height: auto;

	padding: 0px 5% 10px 5%;

	position: fixed;

	z-index: 100;

	background-color: #ffffff;

	border-bottom: 1px solid #fff;;

}	

#header_top{

	width: 100%;

	height: auto;

	display: inline-table;

	text-align: center;

}

	#header_top img{

		width: 100%;

		max-width: 600px;

		height: auto;

	}	

#header_sx{

	display: none;

}

#header_dx{

	width: 100%;

	height: auto;

	float: none;

	text-align: center;

	margin-top: -20px;

}





#container{

		width: 90%;

		height: auto;

		padding: 200px 5%;

}

	#container_general{

		padding-top: 200px;

	}

	#container_scheda{

		padding-top: 100px;

	}	

	

.work_grid_preview{

	width: calc(33% - 10px);

	margin: 5px;

	height: auto;

	float: left;

}

	

.swipebox img{

	width: calc(32.9% - 10px);

	margin: 5px;

}

	

#scheda_sx_singola{

	width: 100%;

	float: none;

	padding: 100px 0px 0px 0px;

	letter-spacing: 1px;

}

#scheda_dx_singola{

	width: 100%;

	float: none;

	padding: 20px 0px 0px 0px;

}

	#scheda_dx_singola img{

		width: 100%;

		max-width: 500px;

		height: auto;

		padding-top: 0px;	

	}	

	

/* Gallery */	

	.lightbox .lb-img {

	  -o-object-fit: contain;

	  object-fit: contain;

	  margin-bottom: 8px;

	  display: block;

	  width: auto;

	  height: 300px;

	}	

	.lightbox .lb-content {

	  background-color: white;

	  display: flex;

	  flex-direction: column;

	  justify-content: center;

	  margin: 1em;

	  max-height: 80%;

	  padding: 1rem;

	  position: relative;

	}	

	.gallery-grid {

	 	display: grid;

	 	grid-template-columns: repeat(auto-fit, minmax(calc(25% - 40px), 1fr));

	  	grid-auto-rows: minmax(200px, -webkit-max-content);

	  	grid-auto-rows: minmax(200px, max-content);

	  	grid-auto-flow: dense;

	  	gap: 20px;

	  	margin-top: 40px;

	  	padding: 10px;

	}

	

}



@media only screen and (max-width: 1200px) {



	#container{

		width: 90%;

		height: auto;

	}

	#container_scheda{

		width: 90%;

		height: auto;

		padding-top: 100px;

	}

	#header_sx{

 	width: 500px;

	height: auto;

	position: absolute;

	z-index: 100;

}

	#header_name{

		float: left;

		width: 417px;

	}

		#header_name img{

			width: 100%;

			height: auto;

		}

	.bat{

		width: 83px;

		height: auto;

		float: right;

		transition: 3s ease-in-out;

	}

		.bat img{

			width: 100%;

			height: auto;

		}	

	.redbox.animate{

		-webkit-transform: translate(-417px,0);

		-moz-transition: translate(-417px,0);  

    	-o-transition: translate(-417px,0);  

    	-ms-transition: translate(-417px,0); 

    	transition: translate(-417px,0); 

	}

	

	.column {

  flex: 20%;

  max-width: 100%;

  padding: 5px 8px;

}	

		

}









@media screen and (max-width: 800px) {

  .next {

    display: none !important;

  }

}



@media only screen and (max-width: 768px) {	

#header{

	width: 90%;

	height: auto;

	padding: 0px 5%;

	position: static;

	z-index: 100;

	background-color: #fff;

}

#container{

	width: 90%;

	height: auto;

	padding: 50px 5%;

}

	#container_general{

		padding-top: 50px;

	}	

.work_grid_preview{

	width: calc(50% - 10px);

	margin: 5px;

	height: auto;

	float: left;

}

.work_grid_preview_3{

	width: calc(50% - 10px);

	margin: 5px;

	height: auto;

	float: left;

}

#container_scheda{

	width: 90%;

	padding: 50px 5% 0px 5%;

	position: relative;

}



#scheda_sx_singola{

	padding: 0px 0px 0px 0px;

}	

#scheda_sx_mobile{

	width: 100%;

	padding: 80px 0px 0px 0px;

	display: inline;

}

#scheda_dx{

	width: 100%;

	margin-left: 0;

	float: none;

	padding: 50px 0px 0px 0px;

	text-align: center;

}

#scheda_dx img{

	width: 100%;

	max-width: 400px;

	height: auto;

}

	

.swipebox img{

	width: calc(49.7% - 10px);

	margin: 5px;

}	

	

/* Gallery */	

	.gallery-grid {

	  display: grid;

	  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

	  grid-auto-rows: minmax(200px, -webkit-max-content);

	  grid-auto-rows: minmax(200px, max-content);

	  grid-auto-flow: dense;

	  gap: 10px;

	  margin-top: 40px;

	  padding: 10px;

	}

	.lightbox .lb-img {

	  -o-object-fit: contain;

	  object-fit: contain;

	  margin-bottom: 8px;

	  display: block;

	  width: auto;

	  height: 300px;

	}

	.lightbox .lb-content {

	  background-color: white;

	  display: flex;

	  flex-direction: column;

	  justify-content: center;

	  margin: 1em;

	  max-height: 80%;

	  padding: 1rem;

	  position: relative;

	}

}



@media screen and (max-width: 600px) {

	

	.column {

	  flex: 50%;

	  max-width: 100%;

	  padding: 5px 8px;

	}

	

}

	



@media only screen and (max-width: 479px) {

	

.column {

  flex: 100%;

  max-width: 100%;

  padding: 5px 8px;

}

.work_grid_preview{

	width: 100%;

	margin: 5px 0px;

	height: auto;

	float: none;

}

.work_grid_preview_3{

	width: 100%;

	margin: 5px 0px;

	height: auto;

	float: none;

}



}