/* FONTS */
@font-face {
	font-family: 'Alwyn';
	src: url('fonts/Alwyn.eot?#iefix') format('embedded-opentype'),
		 url('fonts/Alwyn.woff') format('woff'),
		 url('fonts/Alwyn.ttf') format('truetype'),
		 url('fonts/Alwyn.svg#Alwyn') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'AlwynThin';
	src: url('fonts/AlwynThin.eot?#iefix') format('embedded-opentype'),
		 url('fonts/AlwynThin.woff') format('woff'),
		 url('fonts/AlwynThin.ttf') format('truetype'),
		 url('fonts/AlwynThin.svg#AlwynThin') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'AlwynBold';
	src: url('fonts/Alwyn.eot?#iefix') format('embedded-opentype'),
		 url('fonts/Alwyn.woff') format('woff'),
		 url('fonts/Alwyn.ttf') format('truetype'),
		 url('fonts/Alwyn.svg#Alwyn') format('svg');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'voeux';
	src: url('fonts/voeux.ttf?kdzcl') format('truetype'),
		 url('fonts/voeux.woff?kdzcl') format('woff'),
		 url('fonts/voeux.svg?kdzcl#voeux') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] { font-family: 'voeux' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.icon-logo-v2:before { content: "\e900"; }

/* CSS */
	/* general */
* { padding: 0; margin: 0; border: 0; outline: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
input[type=text], input[type=password], textarea { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }
html { -ms-touch-action: none; }
body { font-family: 'Alwyn', Arial, Helvetica, sans-serif; font-size: 62.5%; color: #000; background: rgb(255,255,255); -webkit-text-size-adjust: 100%; }
html, body { width: 100%; height: 100%; min-height: 100%; }
a, a:hover, a:focus { color: #000; text-decoration: underline; }
ul { list-style: none; }

/* INTERFACE */
#viz { position: relative; width: 100%; height: 100%; margin: 0 auto; pointer-events: none; overflow: hidden; }
#viz #svg { position: relative; width: 100%; height: 100%; }
#viz #mask circle { opacity: 0; -webkit-transition: all .6s ease-out; -moz-transition: all .6s ease-out; -ms-transition: all .6s ease-out; transition: all .6s ease-out; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; }
#viz #mask.on circle { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
#viz #mask.off circle { opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); transform: scale(0); }
#cursor { -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; transition: all .5s ease-out; }
#btns { position: absolute; top: 50%; right: 5%; pointer-events: auto; -webkit-transform: translate(0,-50%); -moz-transform: translate(0,-50%); -ms-transform: translate(0,-50%); transform: translate(0,-50%); }
#btns p.btn { position: relative; color: #a7a7a7; font-size: 1.1em; padding: 6px 0 6px 0; cursor: pointer; }
#btns p.btn:before { position: absolute; top: 4px; left: -24px; display: block; content: ''; width: 16px; height: 16px; border: 2px solid #a7a7a7; background: #fff; border-radius: 50%; }
#btns p.btn.on { color: #000; }
#btns p.btn.on:before { border: 2px solid #000; background: #000; }
#btns p:first-child { font-size: 1.4em; text-decoration: underline; padding-bottom: 5px; }
#btns p:first-child span { display: inline-block; text-decoration: none; -webkit-transform: translate(8px,0) rotate(90deg); -moz-transform: translate(8px,0) rotate(90deg); -ms-transform: translate(8px,0) rotate(90deg); transform: translate(8px,0) rotate(90deg); -webkit-animation: arrowB 1.4s ease-out infinite; -ms-animation: arrowB 1.4s ease-out infinite; animation: arrowB 1.4s ease-out infinite; }
#btn-enter { cursor: pointer; -webkit-animation: scale 2s ease-out infinite; -ms-animation: scale 2s ease-out infinite; animation: scale 2s ease-out infinite; -webkit-transform-origin: center 60%; -ms-transform-origin: center 60%; transform-origin: center 60%; }
#btn-enter circle { -webkit-animation: color 2s ease-in-out infinite; -ms-animation: color 2s ease-in-out infinite; animation: color 2s ease-in-out infinite; }
#btn-start { cursor: pointer; -webkit-animation: scale 2s ease-out infinite; -ms-animation: scale 2s ease-out infinite; animation: scale 2s ease-out infinite; -webkit-transform-origin: center 61%; -ms-transform-origin: center 61%; transform-origin: center 61%; }
#arrow-left { -webkit-animation: arrowL 1.4s ease-out infinite; -ms-animation: arrowL 1.4s ease-out infinite; animation: arrowL 1.4s ease-out infinite; }
#arrow-right { -webkit-animation: arrowR 1.4s ease-out infinite; -ms-animation: arrowR 1.4s ease-out infinite; animation: arrowR 1.4s ease-out infinite; }
#denis { position: absolute; bottom: 5px; left: 5px; font-size: .9em; pointer-events: auto; z-index: 50; }
#source { position: absolute; bottom: 5px; right: 5px; font-size: .9em; z-index: 50; }
#source span { padding-right: 15px; }

#page1, #page2 { pointer-events: auto; }
#page1, #page2, #page3, #cursor, #legende, #cercles, #btns, #axes, #mois, #degres, #prompt, #denis, #source { display: none; }

/* ANIMATIONS */
	/* arrow */
@keyframes arrowL {
	0% { transform: translateX(-5px); }
	40% { transform: translateX(-15px); }
	50% { transform: translateX(-10px); }
	60% { transform: translateX(-15px); }
	100% { transform: translateX(-5px); }
}
@-webkit-keyframes arrowL {
	0% { -webkit-transform: translateX(-5px); transform: translateX(-5px); }
	40% { -webkit-transform: translateX(-15px); transform: translateX(-15px); }
	50% { -webkit-transform: translateX(-10px); transform: translateX(-10px); }
	60% { -webkit-transform: translateX(-15px); transform: translateX(-15px); }
	100% { -webkit-transform: translateX(-5px); transform: translateX(-5px); }
}
@keyframes arrowR {
	0% { transform: translateX(5px); }
	40% { transform: translateX(15px); }
	50% { transform: translateX(10px); }
	60% { transform: translateX(15px); }
	100% { transform: translateX(5px); }
}
@-webkit-keyframes arrowR {
	0% { -webkit-transform: translateX(5px); transform: translateX(5px); }
	40% { -webkit-transform: translateX(15px); transform: translateX(15px); }
	50% { -webkit-transform: translateX(10px); transform: translateX(10px); }
	60% { -webkit-transform: translateX(15px); transform: translateX(15px); }
	100% { -webkit-transform: translateX(5px); transform: translateX(5px); }
}
@keyframes arrowB {
	0% { transform: translate(8px,0) rotate(90deg); }
	40% { transform: translate(8px,10px) rotate(90deg); }
	50% { transform: translate(8px,5px) rotate(90deg); }
	60% { transform: translate(8px,10px) rotate(90deg); }
	100% { transform: translate(8px,0) rotate(90deg); }
}
@-webkit-keyframes arrowB {
	0% { transform: translate(8px,0) rotate(90deg); }
	40% { transform: translate(8px,10px) rotate(90deg); }
	50% { transform: translate(8px,5px) rotate(90deg); }
	60% { transform: translate(8px,10px) rotate(90deg); }
	100% { transform: translate(8px,0) rotate(90deg); }
}
	/* pulse color */
@keyframes color {
	0% { fill: #003A99; }
	20% { fill: #4599FF; }
	40% { fill: #369600; }
	60% { fill: #2DD061; }
	80% { fill: #F89800; }
	100% { fill: #D63300; }
}
@-webkit-keyframes color {
	0% { fill: #003A99; }
	20% { fill: #4599FF; }
	40% { fill: #369600; }
	60% { fill: #2DD061; }
	80% { fill: #F89800; }
	100% { fill: #D63300; }
}
@keyframes scale {
	0% { transform: scale(1); }
	50% { transform: scale(1.3); }
	100% { transform: scale(1); }
}
@-webkit-keyframes scale {
	0% { -webkit-transform: scale(1); transform: scale(1); }
	50% { -webkit-transform: scale(1.3); transform: scale(1.3); }
	100% { -webkit-transform: scale(1); transform: scale(1); }
}

/* MEDIA QUERIES */
/* Portrait tablet to landscape and desktop */
@media (max-width: 1200px){
	#btns { right: 1%; }
}
@media (max-width: 1024px){
	#btns { top: 85%; right: 2%; }
}
@media (max-width: 767px) and (orientation: portrait){
	#btns { top: auto; right: auto; bottom: 1%; left: 50%; width: 100%; text-align: center; padding-left: 40px; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
	#btns p.btn { display: inline-block; padding-right: 40px; }
	#btns p:first-child { display: inline-block; padding-right: 60px; }
	#btns p:first-child span { -webkit-animation: arrowR 1.4s ease-out infinite; -ms-animation: arrowR 1.4s ease-out infinite; animation: arrowR 1.4s ease-out infinite; }
}
@media (max-width: 640px) and (orientation: portrait){
	#btns { bottom: 5%; }
	#btns p:first-child { display: block; }
	#btns p:first-child span { -webkit-animation: arrowB 1.4s ease-out infinite; -ms-animation: arrowB 1.4s ease-out infinite; animation: arrowB 1.4s ease-out infinite; }
}
@media (max-width: 640px) and (orientation: landscape){
	#btns { top: 80%; }
	#denis, #source { font-size: .7em; }
}
@media (max-width: 480px) and (orientation: portrait){
	#btns { bottom: 12%; width: auto; padding-left: 0; }
	#btns p:first-child { padding-right: 0; }
	#btns p.btn { padding-right: 0; }
	#denis { left: 0; right: 0; bottom: 20px; text-align: center; }
	#source { left: 0; right: 0; text-align: center; }
}