/**
 * HTML + Body
 */

html,
body {
	background-color: #aeaeae;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100vh;
}



/**
 * Canvas
 */

#canvas {
	display: block;
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	z-index: 2000;
}
#canvas-ambient {
	display: block;
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	z-index: 2000;
}



/**
 * Logo McCord
 */

.mccord-logo {
	position: fixed;
	right: 0;
	top: 5%;
	width: 120px;
	z-index: 1500;
}
.mccord-logo img {
	height: auto;
	width: 100%;
}



/**
 * Call To Action
 */

.call-to-action-fr {
	left: 50%;
	margin-left: -220px;
	margin-top: -33px;
	position: fixed;
	top: 50%;
	z-index: 1600;
}
.call-to-action-fr img {
	width: 440px;
}
.call-to-action-en {
	left: 50%;
	margin-left: -220px;
	margin-top: 33px;
	position: fixed;
	top: 50%;
	z-index: 1600;
}
.call-to-action-en img {
	width: 440px;
}



/**
 * Exhibition Information
 */

.exhibition-information {
	display: none;
	left: 50%;
	position: fixed;
	top: 5%;
	z-index: 1700;
	-moz-transform: translateX(-250%);
	-ms-transform: translateX(-250%);
	-webkit-transform: translateX(-250%);
	transform: translateX(-250%);
}
.exhibition-information-bloc img {
	height: auto;
	max-width: 170px;
	width: calc(7vw + 7vh);
}
.exhibition-information-bloc img:hover {
	opacity: .25;
}



/**
 * Yeti
 */
 
.yeti {
	bottom: 0;
	left: 50%;
	height: 100vh;
	position: fixed;
	z-index: 1000;
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.yeti img {
	height: 100%;
	width: auto;
}
.yeti-and-text {
	bottom: 0;
	display: none;
	left: 50%;
	height: 100vh;
	position: fixed;
	z-index: 1200;
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.yeti-and-text img {
	height: 100%;
	width: auto;
}



/**
 * Show/Hide Mobile
 */

.show-mobile {
	display: none;
}



/**
 **************************************************
 * Mobile
 */

@media (max-width: 768px) {
	
	.show-mobile {
		display: block;
	}
	.hide-mobile {
		display: none;
	}
	
	.mccord-logo {
		width: 60px;
		top: 10px;
	}
	
	.exhibition-information {
		left: 10px;
		top: 10px;
		-moz-transform: translateX(-0%);
		-ms-transform: translateX(-0%);
		-webkit-transform: translateX(-0%);
		transform: translateX(-0%);
	}
	.exhibition-information-bloc img {
		max-width: none;
		width: calc(11vw + 11vh);
	}
	
	.call-to-action-fr {
		margin-left: -110px;
	}
	.call-to-action-fr img {
		width: 220px;
	}
	.call-to-action-en {
		margin-left: -110px;
	}
	.call-to-action-en img {
		width: 220px;
	}
	
	.yeti,
	.yeti-and-text {
		height: 80vh;
	}
	
}



/**
 *************************************************
 * Animation
 */

.shake-cta {
	animation-duration: 3s;
	-webkit-animation-duration: 3s;
	-moz-animation-duration: 3s;
	-ms-animation-duration: 3s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
}

.wobble {
	-webkit-animation-name: wobble;
	-moz-animation-name: wobble;
	-ms-animation-name: wobble;
	animation-name: wobble;
}
.wobble-delay {
	-webkit-animation-name: wobble-delay;
	-moz-animation-name: wobble-delay;
	-ms-animation-name: wobble-delay;
	animation-name: wobble-delay;
}

.animated {
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	-ms-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-fill-mode: both;
	-moz-fill-mode: both;
	-ms-fill-mode: both;
	animation-fill-mode: both;
}
.animated.infinite {
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

@-webkit-keyframes wobble {
	from {
		-webkit-transform: none;
		-moz-transform: none;
		-ms-transform: none;
		transform: none;
	}
	3% {
		-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
		-moz-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
		-ms-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
		transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
	}
	6% {
		-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
		-moz-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
		-ms-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
		transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
	}
	9% {
		-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
		-moz-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
		-ms-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
		transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
	}
	12% {
		-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
		-moz-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
		-ms-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
		transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
	}
	15% {
		-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
		-moz-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
		-ms-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
		transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
	}
	20% {
		-webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0);
		-moz-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0);
		-ms-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0);
		transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0);
	}
	to {
		-webkit-transform: none;
		-moz-transform: none;
		-ms-transform: none;
		transform: none;
	}
}

@-webkit-keyframes wobble-delay {
	from {
		-webkit-transform: none;
		-moz-transform: none;
		-ms-transform: none;
		transform: none;
	}
	0% {
		-webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0);
		-moz-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0);
		-ms-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0);
		transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0);
	}
	50% {
		-webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0);
		-moz-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0);
		-ms-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0);
		transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0);
	}
	53% {
		-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
		-moz-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
		-ms-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
		transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
	}
	56% {
		-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
		-moz-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
		-ms-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
		transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
	}
	59% {
		-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
		-moz-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
		-ms-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
		transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
	}
	62% {
		-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
		-moz-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
		-ms-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
		transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
	}
	65% {
		-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
		-moz-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
		-ms-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
		transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
	}
	70% {
		-webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0);
		-moz-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0);
		-ms-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0);
		transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0);
	}
	to {
		-webkit-transform: none;
		-moz-transform: none;
		-ms-transform: none;
		transform: none;
	}
}