/* breakpoints are: 600, 900, 1200, 1600 +
for-phone-only {
  @media (max-width: 599px) { @content; }
}
for-tablet-portrait-up {
  @media (min-width: 600px) { @content; }
}
for-tablet-landscape-up {
  @media (min-width: 900px) { @content; }
}
for-desktop-up {
  @media (min-width: 1200px) { @content; }
}
for-big-desktop-up {
  @media (min-width: 1800px) { @content; }
}
*/

/* #Media Queries
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
================================================== */



/*********************************************************************/
/* Par défaut, on affiche pour les petits écrans - 480 px par défaut */
	@media only screen  {
		h1 { font-size: 2em; line-height: 1.125em; margin-bottom: 0.875em;}
		.column.betag, .columns.betag, .column.betad, .columns.betad {display:none;}
		.vignettb:hover span{ /*CSS for enlarged image on hover - keeps 25% of screen on each side clear*/
			visibility: visible;
			position: fixed;
			top: 1%;
			right: 5%;
			left: 5%;
		}

		.vignettc:hover span{ /*CSS for enlarged image on hover - keeps 25% of screen on each side clear*/
			background-color:#ffffff;
			visibility: visible;
			position: fixed;
			top: 1%;
			right: 5%;
			left: 5%;  
		}

		.vig460a:hover span{ /*CSS for enlarged image on hover - keeps 25% of screen on each side clear*/
			background-color:#ffffff;
			visibility: visible;
			position: fixed;
			top: -50px;
			right: 5%;
			left: 5%;  
		}


		.vig160a  {
			position: relative;
			top: 1%;
			right: 40%;
			left: 40%;
		/*	border: thin #000 solid;*/
			top:-5px;
		}
	}

/*********************************************************************/

/*********************************************************************/
/* Bigger than standard 960 (devices and browsers) */
	@media only screen and (min-width: 959px) {
		.column.betag, .columns.betag, .column.betad, .columns.betad {display: inline;}

		.vignettb:hover span{ /*CSS for enlarged image on hover - keeps 15% of screen on each side clear*/
			visibility: visible;
			position: fixed;
			max-width:80%;
			top: 7%;
			right: 15%;
			left: 15%;
	}

		.vignettc:hover span{ /*CSS for enlarged image on hover - keeps 15% of screen on each side clear*/
			background-color:#ffffff;
			visibility: visible;
			position: fixed;
			max-width:80%;
			top: 1%;
			right: 15%;
			left: 15%;
	}

		.viga:hover span{ /*CSS for enlarged image on hover - keeps 5% of screen on each side clear*/
			max-width:100%;
			z-index:1000;
			top: 1%;
			right: 5%;
			left: 5%;
	}

.vig160a  {
	top:-30px;
}
	}

/*********************************************************************/
/* Big screen  */
	@media only screen and (min-width: 1200px) {
		.column.betag, .columns.betag, .column.betad, .columns.betad {display: inline;}

		.vignettb:hover span{ /*CSS for enlarged image on hover - keeps 20% of screen on each side clear*/
			visibility: visible;
			position: fixed;
			max-width:70%;
			top: 10% ;
			right: 25% ;
			left: 25% ;
		}

		.vignettc:hover span{ /*CSS for enlarged image on hover - keeps 20% of screen on each side clear*/
			z-index:1000;
			background-color:#ffffff;
			visibility: visible;
			position: fixed;
			top: 1% ;
			right: 2% ;
			left: 2% ;
		}

		.viga:hover span{ /*CSS for enlarged image on hover - keeps 5% of screen on each side clear*/
			z-index:1000;
			max-width:100%;
			top: 1%;
			right: 5%;
			left: 5%;
	}

		.ziga:hover span{ /*CSS for enlarged image on hover - keeps 5% of screen on each side clear*/
/*			height:400px;*/
			width:800px;
			top: 1%;
			right: 5%;
			left: 5%;
	}

.vig160a  {
	top:-30px;
}
	}