/* ==========================================================================
   SM2
	 (c)Nicola Turco
   ========================================================================== */

/* XS - Extra small devices (< 544px) */
/* SM - Small devices (544px - 767px) */
/* MD - Medium devices (768px - 991px) */
/* LG - Large devices (992px - 1199px) */
/* XL - Extra Large devices (> 1200px) */

/* Fonts: Thin 300 / Normal 400 + italic / Semibold 600 / Bold 700 */
/* Colori: Blu Opaco #274a8b, Blu #003366 */ 

/* -------------------------------------------------------------------------
		STILI GENERICI
   ------------------------------------------------------------------------- */

html { font-size: 15px; }
@media (min-width: 768px){ html { font-size: 16px; }}
@media (min-width: 992px){ html { font-size: 17px; }}
@media (min-width: 1200px){ html { font-size: 18px; }}
	 
body {
	font-family: 'Open Sans', sans-serif;	
	font-weight: 400;
	line-height: 1.55;
	color: #444;
	background-color: #fff;
	margin: 0;
}
	 
a, a:visited { color: #274a8b; }
a:hover, a:active { color: #CA6C01; }
a.underline { text-decoration: underline; }
a.none { text-decoration: none; }
.allwidth { width: 100%; }
.cursorhelp { cursor: help; }
.relative { position: relative; }
.errore { color:red; font-weight: bold; }
b { font-weight: 600; }

.media-body h4 {
	font-size: 1rem;
	color: #336699;
}
.media-body h3 em {
	font-size: 1rem;
}

.browserupgrade {
	color: #c30;
	background: #fff;
	text-align: center;
	font-size: 16px;
	height: 50px;
	line-height: 50px;
	font-weight: bold;
}	

iframe  {
	width: 100%;
	min-height:5rem;
}

.img-thumbnail {
  display: inline-block;
  height: auto;
  max-width: 100%;
  padding: 4px;
  line-height: 1.428571429;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}
.img-rounded {
  border-radius: 6px;
}

.thumb-post { /* croppa le anteprime ad una altezza massima */
  object-fit: cover; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  max-height: 150px;
}

.thumb-webcam { /* croppa le anteprime ad una altezza massima */
  object-fit: cover; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  max-height: 150px;
	height: 150px;
	margin:0px;
	padding:0px;
	display: block;
}


/* -------------------------------------------------------------------------
		HEADER - NAVBAR
   ------------------------------------------------------------------------- */
header {padding-bottom:75px;}
.navbar { min-height: 55px; border-bottom: 3px solid #003366; background-color: #ff9933; }
.navbar-brand > img { height: 40px; }
.navbar-nav .nav-link, .navbar-nav .dropdown-item { color: #000000 !important; text-transform: uppercase; }
.navbar-nav dropdown-item.active, .navbar-nav .dropdown-item:active { background-color: #999999; }
.navbar-nav .nav-link:focus, .navbar-nav .nav-link:hover, .navbar-nav .dropdown-item:focus { color: #ffffff !important; }
.navbar-toggleable-md .navbar-nav .nav-link { padding-left: .75rem; padding-right: .75rem; }
.navbar-toggleable-md > .container { padding-right: 15px; padding-left: 15px;}
.navbar-nav .dropdown-item:hover { color: red !important; }

.nav-search { padding-left: .75rem; padding-right: .75rem; }

.nav-link2 { font-size: 1.2rem; font-weight:600; letter-spacing:0px; text-decoration:none; }
.nav-link2 span { color: black; text-decoration:none; font-style: italic;}
.nav-link2:hover { text-decoration:none; }

@media (min-width: 992px){
	.navbar { height: 80px; }
	.navbar-brand > img { height: 60px; }

/* --- Navbar shrink --- */   
	.navbar.shrink { min-height: auto; height: 50px; }
	.navbar.shrink .navbar-nav { margin-top: 0; }
	.navbar.shrink a.navbar-brand { padding-top: -10px !important; }
	.navbar.shrink .navbar-brand > img { height: 40px; margin-top: -10px; }
	.navbar {
	 -webkit-transition: all 0.2s ease;
	 transition: all 0.2s ease;
	}
	.navbar.shrink .nav-link, .navbar.shrink .dropdown-item  { font-size: 80%; }
	.nav { background: inherit; }
}

/* --- Effetto transizione su dropdown --- */
@media (min-width: 992px){
	.dropdown > .dropdown-menu { /* nascondo il dropdown per consentire la transizione */
		display: block;
		opacity: 0;
		height: 0;
		visibility: hidden;
		margin-top: 0;
		border-radius: 0;
	}
	.dropdown:hover > .dropdown-menu {
		display: block; /* apertura dropdown all'hover invece che al click */
		opacity: 0.95;
		height: auto;
		visibility: visible;
		-webkit-transition: all 0.5s ease-out 0.25s; /* Safari */
		transition: all 0.5s ease-out 0.25s;
	}
}

@media (max-width:543px) {
	.fixbugbsalpha6 { width: 100%;}
}




'********
.boxtransition {	-webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in;} 
.square { position: absolute; bottom: 75%;  left: 0;  right: 0;  top: 0; border:0px solid red; padding-right:15px; padding-left:15px;}
.square .bgtext { position: absolute;  bottom: 0; top: 0; left:15px; right:15px; padding-top:10px; padding-right:15px; padding-left:15px; background: #000; background: rgba(0, 0, 0, 0.4); filter: alpha(opacity=60); text-align:center;}
.square .bgtext h2 {  color:white; font-size: 1.1rem;}
'******




/* -------------------------------------------------------------------------
		CAROUSEL
   ------------------------------------------------------------------------- */

.carousel-item.active, .carousel-item-next, .carousel-item-prev { /* fix bug bootstrap alpha6 */
	display:block;
}

.carousel-item {height: auto; border:0px solid red;}
.carousel-item img {height: auto;}

#myCarousel { position: relative;}

#myCarousel > .carousel-inner > .carousel-item {
	height: calc(40vh - 5rem);
	width: 100vw;
	background-repeat:no-repeat !important;
	background-size:cover !important;
	background-position: center bottom !important;
	overflow: hidden;
}
@media (min-width:992px) { /* Immagine al 100% della schermata */
	#myCarousel > .carousel-inner > .carousel-item {
		height: calc(50vh - 5rem);
	}
}


#myCarousel .carousel-control.left, #myCarousel .carousel-control.right {
	color: #fff;
}
.carousel-control.left, .carousel-control.right {
	background-image:none;
	color: #036;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
  width: auto;
  height: auto;
	top: 45%;
	margin: 0;
}

/*@media (min-width: 992px){
	.carousel-item { min-height:400px; max-height: 650px; border:0px solid red:}
}

@media (max-width:543px) {
	.carousel-item { min-height:200px; max-height: 650px; border:0px solid red:}
}
*/


.fixcarouselmaxfit { width:100%; border:0px solid green;}




/* -------------------------------------------------------------------------
		BREADCRUMB
   ------------------------------------------------------------------------- */

#briciole { background-color: #f5f5f5; }
.breadcrumb { background-color: #f5f5f5; color: #eee; margin-bottom: 0; padding-left: 2px; }
.breadcrumb a { color: #274a8b; }
.breadcrumb .active, .breadcrumb > li + li::before { color: #555; }
.breadcrumb-item + .breadcrumb-item::before { content: ">"}


/* -------------------------------------------------------------------------
		CONTENUTI
   ------------------------------------------------------------------------- */
	 
div#content { padding-top: 1rem; padding-bottom: 2rem; }	 
h2.page-title { font-weight: 300; margin-bottom: 2rem; border-bottom:1px solid #666666;}
h3 { font-size: 1.5rem; }
.titlebar { background-color: #1f3644; color: white; font-size: 1.5rem; width:100%; display:block; border-bottom: 2px solid white; padding: 0.5rem; margin-bottom:0px;}
.titlehr { width:100%; display:block; height:0px; border: 2px solid #1f3644; margin-top:0px; }
	 
/* -------------------------------------------------------------------------
		HOME PAGE
   ------------------------------------------------------------------------- */

/* --- BENVENUTI --- */	 
	 
.jumbotron {
	padding: 2rem 1rem;
	margin-bottom: 2rem;
	background-color: #fff;
	border-radius: 0;
}


.btn {cursor: pointer;}
.btn-custom {
	color: #274a8b;
	border: 1px solid #ddd;
	background-color: #f5f5f5;
}

.btn-custom:focus, .btn-custom:hover {
	border-color: #003366;
	box-shadow: 0 0 3px rgba(238, 127, 1, 0.5);
}

	 
	 
.grid-sizer, .grid-item {
	width: 100%;
	height: auto;
	margin-bottom: 1rem;
}


.row2 [class*="col-"]{
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}
.row2 {
  overflow: hidden; 
}


.bloccomacrocat {
	text-align:center;
	color: white;
	border:0px solid red;
	background-image: url(img/sfumaturablocchiperresponsivedesign.png);
	background-position: right;
	background-repeat: no-repeat;
	border-radius: 15px;
  vertical-align: middle;
	width:100%;
	padding: 0.5rem 1rem;
	display:table;
}
@media (min-width: 576px){ .bloccomacrocat a { min-height: 110px; }}
@media (min-width: 768px){ .bloccomacrocat a { min-height: 110px; }}
@media (min-width: 992px){ .bloccomacrocat a { min-height: 110px; }}
@media (min-width: 1200px){ .bloccomacrocat a { min-height: 110px; }}
	 
.bloccomacrocat:hover {background-image: url(img/pixelblack.png); background-repeat: repeat; opacity: 0.65}
.bloccomacrocat a {height:150px; width:100%; border-bottom:2px solid white; border-top:2px solid white; display:table-cell; color:white; text-shadow: 1px 1px 0px rgba(63,107,169, 1);}
.bloccomacrocat a:hover {text-decoration: none;}


/* --- AVVISI-NEWS --- */
.home-news {
	border: 1px solid #ddd;
	color: #444;
	background-color: #f5f5f5;
	padding: .75rem;
	overflow: hidden;
}
.home-news:focus, .home-news:hover {
	border-color: #003366;
	box-shadow: 0 0 3px rgba(238, 127, 1, 0.5);
}
.home-news figure { 
	max-height: 200px;
	margin: 0;
	overflow: hidden;
}
.home-news h4 {
	font-size: 1rem;
	color: #336699;
}
.home-news a { color: #444; }
.home-news a:hover { color: #111; }
.home-news-body h3 {
	font-size: 1.33rem;
	font-weight: 600;
	text-transform: uppercase;
}
.home-news-body p { 
	font-weight: 300;
	font-size: 1rem;
}
p.news-date  { 
	font-weight: 400;
	margin-bottom: 0.3rem;
	color: #996699;
}




/* -------------------------------------------------------------------------
		PAGINE INTERNE
   ------------------------------------------------------------------------- */

.media img { max-width: 125px; }

@media (min-width: 768px) {
.media article img { max-width: 270px; }
.articleimg { padding-right: .75rem; border-right: 1px solid #ddd; margin-top:10px; }
}

/* --- DOCUMENTI - LINK --- */
/* ( News, Rassegna stampa, articoli/record, ecc... ) */

.detail-attach h4 {
	font-size: 1.25rem;
	text-transform: uppercase;
	border-bottom:1px solid #666666;
	margin-top:1rem;
	margin-bottom:10px;
}
.detail-attach ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.detail-attach li {
  padding-bottom: 0.5rem;
}
.detail-attach .fa, .docclient .fa {
  font-size: 1.25rem;
  padding-right: 0.5rem;
  width: 1.75rem; /* 32px */
}
.docclient { margin-top: 0.5rem; margin-bottom:20px; border-bottom:1px solid #999999;} /* documento singolo */

.ico-left { padding-right: 0.5rem; }
.ico-right { padding-left: 0.5rem; }

span.ext {
  font-size: 0.8rem;
  color: #555;
  font-weight: 300;
}





.form1 { border-bottom:1px solid #999999; width:100%; padding-bottom:5px; margin-bottom: 20px;}
.form1 label { float:right; width: auto; line-height: 2.2rem; margin-right: 15px;}
.form1 select { float:right; width: auto; margin-right: 15px;}
.form1 button { float:right; width: auto;}

/* Tipi documenti */
.fa-file-pdf-o { color: #da251c; }
.fa-file-word-o { color: #2A5699; }
.fa-file-excel-o { color: #207245; }
.fa-file-archive-o { color: #FF9408; }
.fa-file-text-o { color: #4CA1B5; }
.fa-file-image-o { color: #274a8b; }
.fa-file-video-o { color: #E62117; }
.fa-file-o { color: #666; }
.fa-external-link { color: #808080; }


/* --- PAGINATION --- */

.page-item.active .page-link, .page-item.active .page-link:focus, .page-item.active .page-link:hover {
	background-color: #274a8b;
	border-color: #274a8b;
}
.page-link:focus, .page-link:hover {
  color: #274a8b;
}


/* -------------------------------------------------------------------------
		FOOTER
   ------------------------------------------------------------------------- */

footer {
	color: #000000;
	background-color: #f5f5f5;
	background-color: #ff9900;
	border-top: 3px solid #003366; 
}
.footer-main {
	font-size: 1rem;
	padding: 1rem 0;
	line-height: 1.4;
	font-weight: 300;
}
.footer-main a {
	text-decoration: underline;
	color:white;
}
.footer-bottom {
	font-size: 0.85rem;
	background-color: #fff;
	text-align: right;
	padding-top: .5rem;
	padding-bottom: 2.5rem;
}

 /* --- Link di ritorno ad inizio pagina --- */
#gotop {
	font-size: 4rem;
	text-align: center;
	position: fixed;
	bottom: 5%;
	right: 5%;
	z-index: 21;
  opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease-out;
	color: #003366;
}
#gotop.show {
  opacity: 0.5;
	visibility: visible;
}
#gotop:hover {
  opacity: 1;
}







/* --- ARTICOLI RECORD --- */
.articolo {
	border: 1px solid #ddd;
	color: #444;
	background-color: #f5f5f5;
	padding: .75rem;
	overflow: hidden;
}
.articolo:focus, .articolo:hover {
	border-color: #003366;
	box-shadow: 0 0 3px rgba(238, 127, 1, 0.5);
	background-color: #ffe9d1;
}
.articolo figure { 
	max-height: 200px;
	margin: 0;
	overflow: hidden;
}
.articolo h4 {
	font-size: 1rem;
	color: #336699;
}
.articolo a { color: #444; }
.articolo a:hover { color: #111; }
.articolo:hover a {	text-decoration: none; }
.articolo h3 {
	font-size: 0.80rem;
	font-weight: 600;
	/*text-transform: uppercase;*/
}
.articolo-body p { 
	font-weight: 300;
	font-size: 1rem;
	padding-left:0px;
}
p.autore  { 
	font-weight: 400;
	margin-bottom: 0.3rem;
	color: #274a8b;
	font-size:0.6rem;
}


/* --- Galleria di 5 foto orizzontali --- */

div.minigallery {
  margin: 15px 0;
  overflow: auto;
}
div.minigallery img {
  float: left;
  margin-right: 4px;
  padding: 2px;
  border: 1px solid #ccc;
}
div.minigallery img:hover {
  border: 1px solid black;
}

/* --- Galleria --- */

#gallery {
	border: 0px solid silver;
	margin: 15px 0;
	overflow: auto;
}
.anteprimafoto {
	width: 100%;
	border-bottom: 5px solid #0066cc;
}
.anteprimafoto:hover {border-bottom: 5px solid red;}
/* galleria */


.blueimp-gallery {
	font-size: 10px;
	color: white;
	font-weight: normal;
}

/* vecchie classi
.containerbanner {
	display:table;
	width:100%
}
.bannerbottom { margin: 1rem 1rem 0rem 1rem !important; border:0px solid red; display: table-cell; text-align:center}
*/

.containerbanner {width:100%; clear:both; border:0px solid red; display:block; }
.bannerbottom { height: 30px; width:auto; display:block; margin:0px; padding:0px; border:0px solid blue; margin: 0.5rem; float:left;}

@media screen and (min-width: 480px) {
    .bannerbottom { height: 50px; }
}
@media screen and (min-width: 768px) {
    .bannerbottom { height: 60px; }
}
@media screen and (min-width: 992px) {
    .bannerbottom { height: 80px; }
}
@media screen and (min-width: 1200px) {
    .bannerbottom { height: 100px; }
}











//vecchie classi


/* form utilità */
.formjsinclude1 { font-size: 16px; text-align:center;}
.formjsinclude1 form input { cursor: pointer; background-color: #333333; color: orange; border:1px solid silver;}
.formjsinclude1 form input:hover { background-color: orange; color: #333333; border:1px solid silver;}
.formjsinclude1 form a { cursor: pointer; background-color: none; color: grey; min-width: 110px; border:1px solid silver;}
.formjsinclude1 form a:hover { background-color: orange; color: #333333; border:1px solid silver;}

.formjsinclude2 {width: 400px; border:0px solid silver; font-size: 16px; text-align:right;}
.formjsinclude2 form input[type="text"] { background-color: none; color: grey; min-width: 110px; border:1px solid silver;}
.formjsinclude2 form input[type="submit"] { cursor: pointer; background-color: none; color: grey; min-width: 110px; border:1px solid silver;}
.formjsinclude2 form input[type="submit"]:hover { background-color: orange; color: #333333; border:1px solid silver;}
.formjsinclude2 form a { cursor: pointer; background-color: none; color: grey; min-width: 110px; border:1px solid silver;}
.formjsinclude2 form a:hover { background-color: orange; color: #333333; border:1px solid silver;}

.formjsinclude3 {border: 1px solid silver; padding: 2px; width: 250px; align:center; text-align:right; margin-top:5px;}
.formjsinclude3 form input[type="text"] { background-color: none; color: grey; min-width: 110px; border:1px solid silver;}
.formjsinclude3 form input[type="submit"] { cursor: pointer; background-color: none; color: grey; min-width: 110px; border:1px solid silver;}
.formjsinclude3 form input[type="submit"]:hover { background-color: orange; color: #333333; border:1px solid silver;}
.formjsinclude3 form a { cursor: pointer; background-color: none; color: grey; min-width: 110px; border:1px solid silver;}
.formjsinclude3 form a:hover { background-color: orange; color: #333333; border:1px solid silver;}

.formjsinclude4 {border: 1px solid silver; padding: 2px; width: 100%; align:center; text-align:right; margin-top:5px;}
.formjsinclude4 form select { background-color: none; color: grey; min-width: 110px; border:1px solid silver;}
.formjsinclude4 form input[type="text"] { background-color: none; color: grey; min-width: 110px; border:1px solid silver;}
.formjsinclude4 form input[type="submit"] { cursor: pointer; background-color: none; color: grey; min-width: 110px; border:1px solid silver;}
.formjsinclude4 form input[type="submit"]:hover { background-color: orange; color: #333333; border:1px solid silver;}
.formjsinclude4 form input[type="button"] { cursor: pointer; background-color: none; color: grey; min-width: 110px; border:1px solid silver;}
.formjsinclude4 form input[type="button"]:hover { background-color: orange; color: #333333; border:1px solid silver;}
.formjsinclude4 form input[type="reset"] { cursor: pointer; background-color: none; color: grey; min-width: 110px; border:1px solid silver;}
.formjsinclude4 form input[type="reset"]:hover { background-color: orange; color: #333333; border:1px solid silver;}
.formjsinclude4 table {border: 0px solid black; margin-top:0px;padding:0px; width: 100%;}
.formjsinclude4 table caption {border: 0px solid silver; font-weight:bold; background-color:#336699;padding:1px;color:white;font-size:11px;text-transform:uppercase;}
.formjsinclude4 table th {border: 0px solid silver; background-color:#336699;padding:1px;color:white;font-size:11px;text-transform:uppercase;}
.formjsinclude4 table td {border: 1px solid silver;min-width: 50px;padding:1px;vertical-align: top;}
.formjsinclude4 form a { cursor: pointer; background-color: none; color: grey; min-width: 110px; border:1px solid silver;}
.formjsinclude4 form a:hover { background-color: orange; color: #333333; border:1px solid silver;}

.formjsinclude5 {border: 1px solid silver; padding: 2px; width: 550px; align:center; text-align:right; margin-top:5px;}
.formjsinclude5 form select { background-color: none; color: grey; min-width: 110px; border:1px solid silver;}
.formjsinclude5 form input[type="text"] { background-color: none; color: grey; min-width: 110px; border:1px solid silver;}
.formjsinclude5 form input[type="submit"] { cursor: pointer; background-color: none; color: grey; min-width: 110px; border:1px solid silver;}
.formjsinclude5 form input[type="submit"]:hover { background-color: orange; color: #333333; border:1px solid silver;}
.formjsinclude5 form input[type="button"] { cursor: pointer; background-color: none; color: grey; min-width: 110px; border:1px solid silver;}
.formjsinclude5 form input[type="button"]:hover { background-color: orange; color: #333333; border:1px solid silver;}
.formjsinclude5 form input[type="reset"] { cursor: pointer; background-color: none; color: grey; min-width: 110px; border:1px solid silver;}
.formjsinclude5 form input[type="reset"]:hover { background-color: orange; color: #333333; border:1px solid silver;}
.formjsinclude5 table {border: 0px solid black; margin-top:0px;padding:0px; width: 100%;}
.formjsinclude5 table caption {border: 0px solid silver; font-weight:bold; background-color:#336699;padding:1px;color:white;font-size:11px;text-transform:uppercase;}
.formjsinclude5 table th {border: 0px solid silver; background-color:#336699;padding:1px;color:white;font-size:11px;text-transform:uppercase;}
.formjsinclude5 table td {border: 1px solid silver;min-width: 50px;padding:1px;vertical-align: top;}
.formjsinclude5 form a { cursor: pointer; background-color: none; color: grey; min-width: 110px; border:1px solid silver;}
.formjsinclude5 form a:hover { background-color: orange; color: #333333; border:1px solid silver;}

.formjsinclude6 {border: 1px solid silver; padding: 2px; width: 100%; align:center; text-align:right; margin-top:5px;}
.formjsinclude6 form select { background-color: none; color: grey; min-width: 110px; border:1px solid silver;}
.formjsinclude6 form input[type="text"] { background-color: none; color: grey; min-width: 110px; border:1px solid silver;}
.formjsinclude6 form input[type="submit"] { cursor: pointer; background-color: none; color: grey; min-width: 110px; border:1px solid silver;}
.formjsinclude6 form input[type="submit"]:hover { background-color: orange; color: #333333; border:1px solid silver;}
.formjsinclude6 form input[type="button"] { cursor: pointer; background-color: none; color: grey; min-width: 110px; border:1px solid silver;}
.formjsinclude6 form input[type="button"]:hover { background-color: orange; color: #333333; border:1px solid silver;}
.formjsinclude6 form input[type="reset"] { cursor: pointer; background-color: none; color: grey; min-width: 110px; border:1px solid silver;}
.formjsinclude6 form input[type="reset"]:hover { background-color: orange; color: #333333; border:1px solid silver;}
.formjsinclude6 table {border: 0px solid black; margin-top:0px;padding:0px; width: 100%;}
.formjsinclude6 table caption {border: 0px solid silver; font-weight:bold; background-color:#336699;padding:1px;color:white;font-size:11px;text-transform:uppercase;}
.formjsinclude6 table th {border: 0px solid silver; background-color:#336699;padding:1px;color:white;font-size:11px;text-transform:uppercase;}
.formjsinclude6 table td {border: 1px solid silver;min-width: 50px;padding:1px;vertical-align: top;}
.formjsinclude6 form a { cursor: pointer; background-color: none; color: grey; min-width: 110px; border:1px solid silver;}
.formjsinclude6 form a:hover { background-color: orange; color: #333333; border:1px solid silver;}


.carousel-control-prev2,
.carousel-control-next2 {
  width: 8%;
}





/**ZOOM**/    

.zoom {      
-webkit-transition: all 0.20s ease-in-out;    
-moz-transition: all 0.20s ease-in-out;    
transition: all 0.20s ease-in-out;     
cursor: -webkit-zoom-in;      
cursor: -moz-zoom-in;      
cursor: zoom-in;  
}     

.zoom:hover,  
.zoom:active,   
.zoom:focus {
/**adjust scale to desired size, 
add browser prefixes**/
-ms-transform: scale(1.1);    
-moz-transform: scale(1.1);  
-webkit-transform: scale(1.1);  
-o-transform: scale(1.1);  
transform: scale(1.1);    
position:relative;      
z-index:100;  
}

/**To keep upscaled images visible on mobile, 
increase left & right margins a bit**/  
@media only screen and (max-width: 768px) {   
ul.gallery {      
margin-left: 15vw;       
margin-right: 15vw;
}

/**TIP: Easy escape for touch screens,
give gallery's parent container a cursor: pointer.**/
.DivName {cursor: pointer}
}