a{color:black;text-decoration:none;}
a:hover{color:black;text-decoration:none;}			
a:visited{color:black;font-style:none;text-decoration:none;}
a:active, a:focus{outline:none;}
* {-webkit-font-smoothing: antialiased;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

body{	background-color:	#f2f2f2;
			color:						black;}

h1{		line-height:			27pt;
			font-size:				18pt;
			font-family:			HelveticaNeue, sans-serif;
			display: 					inline;
			font-weight: 			lighter;}
h2{		line-height:			27pt;
			font-size:				11pt;
			font-family:			HelveticaNeue, sans-serif;
			display: 					inline;
			font-weight: 			lighter;
			text-transform:		uppercase;}

h3{		line-height:			18pt;
			font-size:				9pt;
			font-family:			HelveticaNeue, sans-serif;
			display: 					inline;
			font-weight: 			normal;}

h4{		font-family:			HelveticaNeue, sans-serif;
			display: 					inline;
			line-height:			18pt;
			font-size:				11pt;
			vertical-align: 	top;
			text-transform: 	uppercase;}

h5{		font-family:			HelveticaNeue, sans-serif;
			font-weight: 			normal;
			display:				inline;}

hr{ 	border:					0;
			width:					100%;
    	color:					black;
    	background-color:black;
    	height:					1px;}

#menu{line-height:		18pt;
			font-size:			11pt;
			font-family:		HelveticaNeue, sans-serif;
			text-transform: uppercase;
			opacity: 				1;
			width:					96%;
			left:						0%;
			z-index:				100;
			text-align:			justify-all;
			position: 			relative;}
.mobile{	display:none;}
.commande{	font-size:22px;
			top:  					2vmax;
			left:						2vmax;
			display:				inline-block;
			text-align:			left;
			position:				fixed;}
.logo{	line-height: 	40pt;
			font-size:			40pt;
			top:  					2vmax;
			letter-spacing: 2pt;
			width:					400pt;
			left:						50%;
			margin-left:		-200pt;
			display:				inline-block;
			text-align:			center;
			position:				fixed;}
.contact{	top:  			2vmax;
			right:					2vmax;
			display:				inline-block;
			text-align:			right;
			position:				fixed;}

#grid{opacity: 				1;
			top: 						3vmax !important;
			width:					94%;
			max-width:			1250px;
			margin-left:		auto;
			margin-right:		auto;
			padding-left:		2%;
			padding-right:	2%;
			z-index:				98;
			text-align:			center;
			position: 			relative;}

.legende {	left: 		2vmax;
			bottom: 				2vmax;
			opacity: 				1;	
			position: 			fixed;
			width:					100%;
			font-size: 			11pt;
			line-height: 		18pt;
			color:					black;
			text-align:			left;
			max-width: 			100%;
			z-index:				100;}

.sous-titre{left: 		2vmax;
			bottom: 				2vmax;
			opacity: 				1;	
			position: 			fixed;
			width:					20%;
			font-size: 			9pt;
			line-height: 		18pt;
			color:					black;
			text-align:			left;
			max-width: 			100%;
			z-index:				100;}
.annotation{
			font-family:			HelveticaNeue, sans-serif;
			width:					49.7%;
			font-weight: 			lighter;
			margin-top:				14pt;
			line-height:			21pt;
			font-size:				14pt;
			display:				inline-block;
			vertical-align: 		top;
			text-align:				right;}

.grid-3-elements-text{
			width:					31%;
			display:				inline-block;
			vertical-align: 		top;
			text-align:				left;}

.videoWrapper{
			position:				relative;
			padding-bottom:			54.3%;
			padding-top:			25px;
			height:					0;}
.videoWrapper iframe{
			position:				absolute;
			top:					0;
			left:					8%;
			width:					84%;
			height:					84%;}

.footer{	width:					100%;
			font-size:				9.5pt;
			letter-spacing:			0.5pt;
			line-height:			17pt;
			height:					62pt;
			border-top-left-radius:	9.5pt;
			border-top-right-radius:9.5pt;
			background:				linear-gradient(to top, rgba(237,237,237,0), rgba(237,237,237,1));
			z-index:				99;
			position:				relative;}
.terms{		top:					1.8vmax;
			text-transform: 		uppercase;
			left:					3%;
			display:				inline-block;
			text-align:				left;
			z-index:				100;
			position:				relative;}
.language{	top:					1.8vmax;
			left:					5%;
			line-height:			13pt;
			display:				inline-block;
			text-align:				left;
			position:				relative;}
.language-min{
			display:				none;}
.social{	top:					1.8vmax;
			text-transform: 		uppercase;
			left:					8%;
			display:				inline-block;
			text-align:				left;
			position:				relative;}
.info{		top:					1.8vmax;
			left:					11%;
			display:				inline-block;
			text-align:				left;
			position:				relative;}
.copyright{	top:  					1.8vmax;
			text-transform: 		uppercase;
			right:					-28.3%;
			display:				inline-block;
			text-align:				right;
			position:				relative;}

#copyright{
			line-height:			9pt;
			font-size:				9pt;
			text-align:				right;
			opacity: 				1;
			bottom:  				2vmax;
			width:					96%;
			right:					2vmax;
			z-index:				98;
			position: 				fixed;}

#picto{		display:				none;}

.dropdown {	text-transform:			uppercase;
			float:					left;
			overflow:				hidden;}

/* Dropdown button */
.dropdown .dropbtn {
			line-height:			27pt;
			font-size:				11pt;
			text-transform: 		uppercase;
			border:					none;
			outline:				none;
			background-color:		inherit;
			font-family:			inherit; /* Important for vertical align on mobile phones */
			margin:					0; /* Important for vertical align on mobile phones */}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {}

/* Dropdown content (hidden by default) */
.dropdown-content {
			display:				none;
			position:				absolute;
			text-transform:			uppercase;
			font-size:				7pt;
			letter-spacing:			3.5pt;
			line-height:			16pt;
			margin-top:				-2pt;
			margin-left:			4pt;
			width:					140pt;
			z-index:				1;}

/* Links inside the dropdown */
.dropdown-content a {
			float:					none;
			display:				block;
			text-align:				left;}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
			color:					grey;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
			display:				block;}

.row > .column {
  font-family:			HelveticaNeue, sans-serif;
  font-weight: 			lighter;
  line-height:			16pt;
  font-size:			9pt;
  text-align:left;
  
}

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

/* Create four equal columns that floats next to eachother */
.column {
  font-family:			HelveticaNeue, sans-serif;
  text-align:left;
  vertical-align:top;
  margin-left:1%;
  margin-right:1%;
  margin-bottom:1%;
  margin-top:1%;
  width:22%;
  display:inline-block;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 17vmin;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: white;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 50%;
  max-width: 1250px;
  font-size:11pt;
  line-height:18pt;
}

/* The Close Button */
.close {
  color: black;
  position: absolute;
  top: 17vmin;
  right: 25%;
  margin-right:9pt;
  font-size: 35px;
  font-weight: bold;
  z-index:1000000000;
  background-color: rgba(255, 255, 255, 0);
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 14%;
  width: auto;
  padding: 11pt;
  margin-top: -20pt;
  color: black;
  font-size: 18pt;
  transition: 0.6s ease;
  border-radius: 0 9pt 9pt 0;
  user-select: none;
  -webkit-user-select: none;
}

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

/* Position the "prev button" to the left */
.prev {
  left: 0;
}

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

/* Caption text */
.caption-container {
  font-family:			HelveticaNeue, sans-serif;
  text-align: left;
  margin-top:-0pt;
  color: black;
}

img.demo {
  opacity: 0.6;
  width:100%;
}

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

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

@font-face{	font-family:			'HelveticaNeue';
			font-weight:			normal;
			font-style:				normal;
			src:					url('https://www.mattialistowski.com/css/font/HelveticaNeue.eot');
			src:					url('https://www.mattialistowski.com/css/font/HelveticaNeue.eot?#iefix') format('embedded-opentype'),
									url('https://www.mattialistowski.com/css/font/HelveticaNeue.woff') format('woff'),
									url('https://www.mattialistowski.com/css/font/HelveticaNeue.woff2') format('woff2'),
									url('https://www.mattialistowski.com/css/font/HelveticaNeue.ttf') format('truetype'),
									url('https://www.mattialistowski.com/css/font/HelveticaNeue.svg#font') format('svg');}

@font-face{	font-family:			'HelveticaNeue';
			font-weight:			normal;
			font-style:				normal;
			src:					url('https://www.mattialistowski.com/css/font/HelveticaNeue.eot');
			src:					url('https://www.mattialistowski.com/css/font/HelveticaNeue.eot?#iefix') format('embedded-opentype'),
									url('https://www.mattialistowski.com/css/font/HelveticaNeue.woff') format('woff'),
									url('https://www.mattialistowski.com/css/font/HelveticaNeue.woff2') format('woff2'),
									url('https://www.mattialistowski.com/css/font/HelveticaNeue.ttf') format('truetype'),
									url('https://www.mattialistowski.com/css/font/HelveticaNeue.svg#font') format('svg');}