/*-------------------------------------------------------------------------*/
/* Copyright (c) DELTA X MULTIMEDIA                                        */
/* Tutti i diritti sono riservati - All rights reserved                    */
/* https://www.deltaxmultimedia.it - info@deltaxmultimeida.it              */
/* CSS Document                                                            */
/*-------------------------------------------------------------------------*/
/* Media Slide Show Gallery  - v.1.00 March 2021                           */
/*-------------------------------------------------------------------------*/
/* Used for multimedia objects: images, videos, documents, audio           */
/* when on mobile devices                                                  */
/*-------------------------------------------------------------------------*/

/*

mssg = Media Slide Show Gallery

*/

img {
  	vertical-align: middle;
    borders:none;
}

* {
	box-sizing: border-box;
}

/*img {
  	vertical-align: middle;
}*/

/* Position the image container (needed to position the left and right arrows) */
#media-slideshow-gallery {
	position: relative;
	display: none;
	width:100%;
}

/* Hide the images by default */
.mssg-Slides {
  	display: none;
}

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

/* Next & previous buttons */
.mssg-prev,
.mssg-next {
	cursor: pointer;
	position: absolute; 
  top: 36.5%;
  -ms-transform: translateY(-60px);
  transform: translateY(-60px);
	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;
	background-color: rgba(0, 0, 0, 0.1);
	z-index:999;
}

/* Position the "next button" to the right */

.mssg-prev
{
	left:0;
}

.mssg-next {
	right: 0;
	border-radius: 3px 0 0 3px;
}

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

/* Number text (1/3 etc) */
.mssg-numbertext {
	color: #f2f2f2;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
	background-color: rgba(0, 0, 0, 0.2);
	z-index:999;
}

/* Container for image text */
.mssg-caption-container {
	
	clear:both;
  	text-align: center;
  	background-color: #222;
  	color: white;
    padding:10px;
}

.mssg-caption {
}

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

/* Six columns side by side */
.mssg-column {
	float: left;
	width: 16.66%;
}

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

.mssg-active,
.mssg-thumb:hover {
	opacity: 1;
	border:1px solid #666 !important;
}

.mssg-crop
{

	/*border: 1px solid #000;*/
	box-sizing:border-box;
	float: left;
	height: 440px;  /*180   important to crop vertical (portrait) images */ 
	width: 100%;
	/*background:#000;*/
	

}

.mssg-crop img
{
	object-fit: cover;
	height: 100%;
	width: 100%;
	box-sizing:border-box;
}


.mssg-column-crop
{

	/*border: 1px solid #000;*/
	box-sizing:border-box;
	float: left;
	height: 80px;  /*180   important to crop vertical (portrait) images */ 
	width: 100%;
	/*background:#000;*/
}

.mssg-column-crop img
{
	object-fit: cover;
	height: 100%;
	width: 100%;
	box-sizing:border-box;
	border:none;	
}



@media screen and (max-width: 740px)
{
	#media-slideshow-gallery
	{
		display:block;
	}
}



@media only screen and (max-width: 600px) {
	.mssg-crop
	{
		height: 360px;
	}
	
	.mssg-column-crop
	{
		height: 60px;
	}
}


@media only screen and (max-width: 480px) {
	.mssg-crop
	{
		height: 300px;
	}
	
	.mssg-column-crop
	{
		height: 50px;
	}
}