/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
@import url(https://fonts.googleapis.com/css?family=Yatra+One);
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
/**
 * Remove default margin.
 */
body {
  margin: 0;
}
/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}
/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}
/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0;
}
/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}
/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}
/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}
/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}
/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}
/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0;
}
/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}
/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}
/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}
/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}
/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}
/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}
/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}
/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  box-sizing: content-box;
  /* 2 */
}
/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}
/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}
/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
/*normalize.css*/
@font-face {
  font-family: 'Bespoke';
  src: url('../fonts/Bespoke-kCnWiDfHlH.eot');
  src: url('../fonts/Bespoke-kCnWiDfHlH.eot?#iefix') format('embedded-opentype'), url('../fonts/Bespoke-kCnWiDfHlH.woff') format('woff'), url('../fonts/Bespoke-kCnWiDfHlH.ttf') format('truetype'), url('../fonts/Bespoke-kCnWiDfHlH.svg#Montreal-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}
* {
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  outline: none;
}
img {
  -ms-interpolation-mode: bicubic;
  vertical-align: bottom;
}
ul {
  margin: 0px;
  padding: 0px;
}
body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: 'Bespoke';
  /* -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;*/
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
}
header {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  margin: auto;
  height: 1px;
  width: 100%;
  text-align: center;
  z-index: 10040;
}
header h1 {
  width: 290px;
  margin: auto;
  padding-top: 40px;
  text-align: center;
}
header h1 a {
  text-decoration: none;
  color: black;
}
header h1 #snapplay {
  font-size: 50%;
  font-family: Webdings;
  font-size: 40px;
}
header h1 #snapplay_cheese {
  opacity: 0;
  -moz-opacity: 0;
  filter: alpha(opacity=0);
  margin-bottom: -13px;
  margin-top: 5px;
  display: block;
  position: relative;
  font-size: 13px;
  margin-left: 50px;
}
header ul.menu {
  list-style: none;
  margin-top: 10px;
}
header ul.menu li {
  display: inline-block;
  margin-right: 20px;
}
.social-fb {
  display: inline-block;
  text-indent: -10000px;
  background: url("share.png") no-repeat 0px 0px;
  width: 16px;
  height: 16px;
}
.social-gp {
  display: inline-block;
  text-indent: -10000px;
  background: url("share.png") no-repeat 0px -16px;
  width: 16px;
  height: 16px;
}
.social-pin {
  display: inline-block;
  text-indent: -10000px;
  background: url("share.png") no-repeat 0px -32px;
  width: 16px;
  height: 16px;
}
.social-tu {
  display: inline-block;
  text-indent: -10000px;
  background: url("share.png") no-repeat 0px -48px;
  width: 16px;
  height: 16px;
}
.social-tw {
  display: inline-block;
  text-indent: -10000px;
  background: url("share.png") no-repeat 0px -64px;
  width: 16px;
  height: 16px;
}
.actions,
.actions-close {
  z-index: 10020;
  display: block;
  text-align: center;
  position: fixed;
  margin: auto;
  bottom: 10px;
  width: 100%;
}
.actions-close {
  z-index: 10050;
  opacity: 0;
  visibility: hidden;
}
.overlay-content {
  z-index: 10050;
  position: fixed;
  width: 100%;
  margin: auto;
  visibility: hidden;
}
.inner-overlay-content {
  width: 60%;
  margin: auto;
  margin-top: 160px;
  text-align: center;
  font-size: 100%;
  line-height: 1.6em;
  letter-spacing: -1px;
}
/*.actions img {
  opacity: 0.9;
  -moz-transition: opacity 0.25s ease-in-out;
    -webkit-transition: opacity 0.25s ease-in-out;
    -ms-transition: opacity 0.25s ease-in-out;
    transition: opacity 0.25s ease-in-out;
}

.actions img:hover {
  cursor: pointer;
  opacity: 1;
}
.actions #topload-inner {
  z-index: 10020;
  width: 980px;
  margin: auto;
}
.actions p {
  margin-top: 0;
  margin-bottom: 0px;
}*/
#main {
  display: block;
  text-align: center;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: scroll;
  z-index: 1;
}
#main #news {
  position: relative;
  width: 1px;
  height: 1px;
  z-index: 1000;
}
#main #news #news-inner {
  z-index: 1000;
  position: relative;
  width: 250px;
  height: auto;
  min-height: 150px;
  padding: 0px 10px 10px 18px;
}
#main #news #news-inner #news-close {
  width: 13px;
  margin-left: 230px;
  margin-top: 5px;
  position: absolute;
  font-size: 70%;
}
#main .pics {
  z-index: 100;
  display: block;
  position: absolute;
  cursor: move;
  opacity: 0;
}
#main .pics img {
  max-width: 500px;
}
#main .pics1 {
  top: 205px;
  left: 513px;
}
#main .pics2 {
  top: 178px;
  left: 1040px;
}
#main .pics3 {
  top: 548px;
  left: 0px;
}
#main .pics4 {
  top: 802px;
  left: 510px;
}
#main .pics5 {
  top: 716px;
  left: 937px;
}
#main .pics6 {
  top: 1140px;
  left: 28px;
}
#main .pics7 {
  top: 1270px;
  left: 700px;
}
#main .pics8 {
  top: 1000px;
  left: 1460px;
}
#main .pics9 {
  top: 1602px;
  left: 189px;
}
#main .pics10 {
  top: 1700px;
  left: 1100px;
}
#main .pics11 {
  top: 2167px;
  left: 764px;
}
#main .pics12 {
  top: 2150px;
  left: 90px;
}
#main .pics13 {
  top: 2140px;
  left: 1256px;
}
#main .pics14 {
  top: 2500px;
  left: 289px;
}
#main .pics15 {
  top: 2975px;
  left: 40px;
}
#main .pics16 {
  top: 3005px;
  left: 513px;
}
#main .pics17 {
  top: 2978px;
  left: 1040px;
}
#main .pics18 {
  top: 3128px;
  left: 0px;
}
#main .pics19 {
  top: 3602px;
  left: 510px;
}
#main .pics20 {
  top: 3516px;
  left: 1237px;
}
#main .pics21 {
  top: 4140px;
  left: 528px;
}
#main .pics22 {
  top: 4866px;
  left: 140px;
}
#main .pics23 {
  top: 5000px;
  left: 1260px;
}
#main .pics24 {
  top: 4202px;
  left: 28px;
}
#main .pics25 {
  top: 5300px;
  left: 2000px;
}
#main .pics26 {
  top: 5100px;
  left: 629px;
}
#main .pics27 {
  top: 5150px;
  left: 1290px;
}
#main .picsmagic {
  top: 3100px;
  left: 80px;
}
/*image legende*/
.pics.active .tooltip span {
  display: block;
  background: white;
  width: auto;
  text-align: center;
}
.tooltip:hover span {
  display: block;
  background: white;
  width: auto;
  text-align: center;
}
.tooltip span {
  display: none;
  font-size: 80%;
  padding: 5px;
}
a#snapplay {
  position: relative;
  z-index: 24;
  text-decoration: none;
}
a#snapplay:hover {
  z-index: 25;
}
a#snapplay span {
  display: none;
}
a#snapplay:hover span {
  display: block;
  position: absolute;
  top: 0px;
  left: 2em;
  width: 200px;
  text-align: left;
  font-size: 70%;
}
img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
      user-select: none;
}
input[type=text]:valid {
  color: green;
}
/* Unmatched */
input[type=text]:invalid {
  color: red;
}
.overlay {
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 10030;
  background: white;
  visibility: hidden;
}
.action {
  width: 60px;
  height: 60px;
  display: inline-table;
  border-radius: 132px;
  text-align: center;
  line-height: 65px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
      user-select: none;
  background-size: cover;
  cursor: pointer;
  margin: 0px 15px;
}
.action#act-reload {
  background-image: url('../img/act-reload.png');
}
.action#act-infos {
  background-image: url('../img/act-infos.png');
}
.action#act-snap {
  background-image: url('../img/act-snap.png');
}
.action:hover {
  background-color: #0492ec;
}
/*
@font-face {
	font-family: 'Montreal';
	src: url('../fonts/hinted-Montreal-Regular.eot');
	src: url('../fonts/hinted-Montreal-Regular.eot?#iefix') format('embedded-opentype'),
	url('../fonts/hinted-Montreal-Regular.woff') format('woff'),
	url('../fonts/hinted-Montreal-Regular.ttf') format('truetype'),
	url('../fonts/hinted-Montreal-Regular.svg#Montreal-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Montreal SemBd';
	src: url('../fonts/hinted-Montreal-DemiBold.eot');
	src: url('../fonts/hinted-Montreal-DemiBold.eot?#iefix') format('embedded-opentype'),
	url('../fonts/hinted-Montreal-DemiBold.woff') format('woff'),
	url('../fonts/hinted-Montreal-DemiBold.ttf') format('truetype'),
	url('../fonts/hinted-Montreal-DemiBold.svg#Montreal-DemiBold') format('svg');
	font-weight: 600;
	font-style: normal;
}

* {
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	outline: none;
}

a {
	text-decoration: none;
	color:@color-black;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

html {
	font-family: 'Montreal', Arial;
}

header {
	position: fixed;
	top: 13%;
	left: 0;
	width: 100%;
	z-index:100;
	h1.logo {
		text-align: center;
		svg {
			height:115px;
			width: auto;
			.mq-max(@tablet, {
				     height:80px;
				    });
			.svg1 {
				transition: all 0.2s ease-in-out;
			}
		}

	}
}

.creative {
	width:@container;
	.mq-max(@desktop, {
        width:@container-tablet;
    });
    .mq-screen(0, @tablet, {
        width:@container-mobile;
    });

	margin:auto;
	.container {
		margin-top:100px;
		.mq-max(@tablet, {
		        margin-top:80px;
		    });
	}
	header {
		top:0;
		.inner-menu {
			width:@container;
			margin:auto;

			.mq-max(@desktop, {
		        width:@container-tablet;
		    });
		    .mq-max(@tablet, {
		        width:@container-mobile;
		    });
		}

		background: white;
		height: 80px;
		.menu {
			float: left;
			margin-left: 84px;
			position: absolute;
			.mq-max(@tablet, {
			      margin-left: 60px;
			      font-size:80%;
			    });
			ul {
				list-style: none;
				line-height: 93px;
				margin: inherit;
				padding: inherit;
				li {
					display: inline-block;
					margin-right: 20px;
					text-transform: uppercase; 
					.mq-max(@tablet, {
				      margin-right: 10px;
				    });
				    a {
				    	transition: all 0.2s ease-in-out;
				    	&:hover {
							color:@color-yellow;
				    	}
				    	&.active {
				    		color:@color-yellow;
				    	}
				    }
				}
			}
		}
		h1.logo {
			margin: 0;
			text-align: inherit;
			top: -20px;
			margin-left: -13px;
			position: absolute;
			.mq-max(@tablet, {
			      margin-left: 0px;
			    });
			svg {
				height:115px;
				width: 163px;
				.mq-max(@tablet, {
			      width: 120px;
			    });
			}

		}
	}
	
	h1.name {
		width:90%;
		margin:auto;
		font-size:600%;
		text-align: center;
		padding-top: 20px;
		font-family: 'Montreal',Arial;
   	 font-weight: 100;	
   	 .mq-max(@tablet, {
			      font-size:300%;
			    });	
	}
	.work {
		width:60%;
		margin:auto;
		text-align: center;
		margin-bottom:50px;
			font-size:150%;
			.mq-max(@tablet, {
			      font-size:125%;
			    });	

		}
	.portfolio {
		li { 
			margin-bottom:40px;
			img {
				width:100%;
			}
			.demi-1, .demi-2 {
				display:inline-block;
				border: 0;
    			margin: 0;
    			padding:0;
    			vertical-align: top;
    			width:49%;
    			.mq-max(@tablet, {
			       display:block;
			       width: 100%;
			    });
			}
			.demi-1 {
				text-align: left;
				margin-right: 1%;
			}
			.demi-2 {
				text-align: right;
				margin-left: 1%;
			}
			> a {
				padding-bottom: 56.25%; 
				position: relative;
				overflow: hidden;
				cursor: pointer;
				display: block;
				width: 100%;
				&:hover {
					.cover  {
						transform: scale(1.1);
						filter: grayscale(0%);
						-webkit-filter: grayscale(0%);
						&.noeffect {
							filter:inherit;
							transform:inherit;
							transition:inherit;
						}
					}
					.legende {
					//	opacity: 0;
					}
					.play-btn {
						opacity: 1;
					}
				}
			}
			iframe {
				position: absolute;
				height: 100%;
				width: 100%;
				z-index: 1;
				left: 0;
				top: 0;
			}
			.legende {
				z-index: 10;
				width: 100%;
				color: @color-black;
				font-size:120%;
				position: relative;
			    text-align: center;
			    margin-top: 20px;
			    font-weight: 700;



			}
			.legende2 {
				z-index: 10;
				width: 100%;
				color: @color-black;
				font-size:120%;
				position: relative;
			    text-align: center;
			    margin-top: 6px;
			}
			.play-btn {
				opacity:0;
				z-index: 10;
				font-family: 'Montreal SemBd';
				width: 100%;
				transform: translate(0, -50%);
			    position: absolute;
			    bottom: 40%;
			    text-align: center;
				color: white;
				font-size:300%;

			}
			.cover {
				z-index:4;
				opacity: 1;
				position: absolute;
				bottom: 0;
				right: 0;
				left: 0;
				top: 0;
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover;
				transform: scale(1) translate3d(0,0,0);
				transition: transform 4s cubic-bezier(.455,.03,.515,.955), filter 1s ease-in-out;
				filter: grayscale(100%);
				-webkit-filter: grayscale(100%);
				&.noeffect {
					filter:inherit;
					transform:inherit;
					transition:inherit;
				}

			}
		}
	}
}

.overlay {
	opacity:1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 100;
	background:black;
}

.index {
	//width:@container;
	//margin:auto;
	overflow-x: hidden;
	header {
		.menu {
				display:none;
			}
		.mq-max(@tablet, {
			        top:0%;
			        position: inherit;
			    });
	}

	&.over {
		color:white;

		.background{
			transform: scale(1.2); 
		}
		article.claim a {
			border-bottom: 1px solid white;
		}
		a {
			color:white;
		}

		header {
			h1.logo {
				svg {
					.svg1 {
						fill: white
					}
				}

			}

		}
	}


	.background{
		opacity:0;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		z-index: 1;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		transform: scale(1) translate3d(0,0,0);
		transition: transform 7s cubic-bezier(.455,.03,.515,.955),opacity 1s ease-out;
		&.active {
			opacity:1;
			transition: transform 7s cubic-bezier(.455,.03,.515,.955),opacity 0.5s ease-out;
			z-index:2;
		}
	}

	article.claim {
		margin-top:-10px;
		opacity: 0;
		position: absolute;
		top: 46%;
		left: 10%;
		width: 80%;
		transform: translate(0, -50%);
		text-align: center;
		font-size: 25px;
		z-index: 10;
		font-family: 'Montreal SemBd';
		transition: color 0.1s ease-in-out;
		.mq-max(@tablet, {
			top:35%;
			font-size:@font-mobile;
		});
		a {
			border-bottom:1px solid black;
			padding-bottom:1px;
			&:hover {
				border-bottom:1px solid transparent;
			}
		}
	}

	.creatiflist {
		opacity: 0;
		position: absolute;
		left: 25%;
		top: 72%;
		width: 50%;
		text-align: center;
		z-index: 11;
		transform: translate(0, -50%);
		.mq-max(@tablet, {
			top:50%;
			transform:inherit;
			width:100%;
			left:0%;
		});
		ul {
			list-style: none;
			margin: 0;
			padding: 0;
			&.over {
				li { opacity:0.25; }
			}
			li {
				opacity:1;
				display: inline-block;
				padding: 12px 20px;
				transform: translate3d(0, 0, 0);
				transition: opacity 0.1s ease-in-out;
				.mq-max(@tablet, {
			        display:inherit;
			        margin-bottom:10px;
			    });
				&.over {
					opacity:1;
					small {
						opacity:1;
					}
				}
				a {	
					font-size:120%;
					text-decoration: none;
					transition: color 0.1s ease-in-out;
					small {
						opacity:0;
						font-size: 70%;
					    margin-top: 3px;
					    text-transform: uppercase;
					    position: relative;
					    display: block;
					    width: 100%;
					    text-align: center;
						.mq-max(@tablet, {
					    	opacity:1;
					    });
					}
				}
			}
		}
	}
}

footer, .creative-menu {
	visibility: hidden;
	opacity:0;
	position: fixed;
	top: 0;
	background:white;
	text-align:center;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		z-index: 1;
		transform: scale(0.9) translate3d(0,0,0);
		transition: transform 0.2s cubic-bezier(.455,.03,.515,.955),opacity 0.2s cubic-bezier(.455,.03,.515,.955);
		&.open {
			visibility: inherit;
			opacity:1;
			z-index: 1000;
			transform:scale(1);
		}
		.inner-footer {
			padding:10%;
			.mq-max(@tablet, {
					    padding-top:25%;
					    });
		}
		.bloc {
			font-size:@font-desktop;
			.mq-max(@tablet, {
					    font-size:@font-mobile;
					    });
		}
	.cross {
		cursor: pointer;
		width:40px;
		height:40px;
		right:10px;
		position: absolute;
		background-size:cover;
		top:10px;
		background-image:url(data:image/png;base64,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);
		&:hover {
			opacity:0.7;
		}
	}
}
.creative-menu {
	.inner-footer {
			//margin-top:100px;
			//
		}
		ul {
			&:hover {
				li {
					opacity:0.3;
				}
			}
		}
	ul li {
		margin-bottom:20px;
		transition:opacity 0.2s cubic-bezier(.455,.03,.515,.955);
		opacity:1;
		&:hover {
			opacity:1;
		}
		a {
			font-size:@font-desktop;

			.mq-max(@tablet, {
					    font-size:@font-mobile;
					    });
			small {
				display:none;
			}
		}
	}
}

.ghost-nav {
	position: fixed;
    bottom: 10%;
    text-align: right;
    z-index: 40;
    right: 3%;
    a {
    		font-family: 'Montreal SemBd', Arial;
    	}
    &:hover {

    	a span {
    		padding-right: 10px;
    display: inline-block;




    	}
    }
			li {
				transition:opacity 0.2s cubic-bezier(.455,.03,.515,.955);
				font-size: 150%;
				opacity:0.3;
				span {
					display: none;
				}
				&.active, &:hover {
					opacity:1;

				}
			}
}*/
.submenu ul {
  list-style: none;
}
.submenu ul:hover li.active {
  border-bottom: 0px solid black;
}
.submenu ul li {
  display: inline-block;
  margin: 0 1em;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0);
}
.submenu ul li:hover {
  border-bottom: 1px solid black;
}
.submenu ul li:hover.active {
  border-bottom: 1px solid black;
}
.submenu ul li.active {
  border-bottom: 1px solid black;
}
.container-info-tabs {
  margin-top: 2em;
  height: 300px;
  height: 50vh;
  overflow: scroll;
}
.info-tabs {
  display: none;
  font-size: 0.8em;
  text-align: justify;
  -webkit-column-count: 2;
  /* Chrome, Safari, Opera */
  -moz-column-count: 2;
  /* Firefox */
  column-count: 2;
  -moz-column-gap: 4em;
  -webkit-column-gap: 4em;
  column-gap: 4em;
}
.info-tabs.active {
  display: block;
}
.inner-overlay-content {
  width: 80%;
}
#main {
  position: inherit!important;
  overflow: inherit!important;
}
@media screen and (max-width: 767px){
  header h1{
    width: 40%;
  }
  .inner-overlay-content{
    font-size: 75%;
  }
  #main .pics{
    zoom: 0.6;
  }
  .action{
    width: 50px;
    height: 50px;
    line-height: 50px;
  }
  .inner-overlay-content{
    width: 90%;
    margin-top: 120px;
  }
}

/*# sourceMappingURL=../../../src/assets/css/main.css.map */