:root {
	/* ÉLÉMENTS FIXES */
	--main-content: 164px;
	--icones-top-container: 200px;
	--bottom-navbar: 1070px;
	--submit-button: 976px;
	--skip-tutorial-button: 1138px;
	--main-container: 846px;

	/* ÉLÉMENTS RELATIFS */
	--position-toolbar: 126px;

	/* GRADIENTT */
	--degrade: linear-gradient(321.8deg, #E9485D 4.07%, #D98E3E 29.33%, #C8B500 55.12%, #65A76E 79.05%, #00A9B9 95.96%);
}

* {
	outline: none;
}
*:hover {
	outline: none;
}

*::-webkit-scrollbar {
	display: none;
}

::selection {
	background: transparent;
}

::-webkit-scrollbar {
	display: none;
}

#curtain {
	opacity: 1;
	background: #000;
	position: fixed;
	top: 0;
	left:0;
	width: 100vw;
	height: 100vh;
	z-index: 500;
}

h2 {
	padding: 200px 50px 0;
	text-align: center;
	font-size: 60px;
}

p,
div,
body,
span,
img,
canvas,
.noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html {
	width: 1024px;
	height: 1346px;
}

body {
	width: 1024px;
	height: 1346px;
	background: #000;
	color: #fff;
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-family: 'Gotham';
	zoom: 100% !important;
	touch-action: manipulation;
}

.center {
	text-align: center;
}

div.canvas-container {
	background: linear-gradient(0deg, #555 0%, #888 50%, #555 100%);
	width: 1024px;
	height: 846px;
	position: fixed !important;
	top: var(--main-content);
	left: 0;
	z-index: 10;
}

.upper-canvas {
	width: 1024px;
	height: 846px;
	z-index: +3;
}

#curatedlayer {
	position: absolute;
	top: 6px;
	left: 0;
	width: 1024px;
	height: 846px;
	background-size: 130px auto;
	background-repeat: no-repeat;
	background-position: center center;
}

body.back #curatedlayer {
	display:none;
}

#popup {
	width: 100%;
	display: none;
	top: var(--main-content);
	z-index: 99;
	background: rgba(0,0,0,.85);
	height: 1200px;
	position: fixed;
}

#popup div.page {
	display: none;
	top: 50px;
	left: 111px;
	z-index: 100;
	height: 950px;
	width: 720px;
	position: absolute;
	text-align: center;
	padding: 0 40px;
	background: transparent;
}

#popup div.page.border {
	background: #222;
	border: 1px solid #fff;
	border-radius: 8px;
}

#popup div.page span.close {
	position: absolute;
	top: -42px;
	right: -42px;
	width: 34px;
	height: 34px;
	background: transparent url(../img/icons_v2/close.svg?a2) center center no-repeat;
	z-index: +1;
}

#popup div.page div.scroll {
	overflow-y: scroll;
	height: 80%;
	margin-top: 10%;
	text-align: left;
}

/* width */
#popup div.page div.scroll::-webkit-scrollbar {
	width: 5px;
	display: block;
}

/* Track */
#popup div.page div.scroll::-webkit-scrollbar-track {
	background: transparent;
}

/* Handle */
#popup div.page div.scroll::-webkit-scrollbar-thumb {
	border-radius: 5px;
	background: linear-gradient(#E9485C 0%, #D98E3E 25%, #C8B500 50%, #65A76E 75%, #00A9B9 100%);
	background: var(--degrade);
}


#popup div.page  span.elements {
	width: 130px;
	height: 80px;
	display: inline-block;
	vertical-align: middle;
	margin: 20px 0;
	padding: 0;
	overflow: hidden;
}

#popup div.page img {
	filter: invert(1);
	width: 100%;
	max-width: 70px;
	max-height: 70px;
}

#popupFonts div.txt span {
	width: 200px;
	height: 80px;
	display: inline-block;
	vertical-align: middle;
	font-size: 60px;
	margin: 10px 12px;
	padding: 20px 0;
	text-align: center;
	color: #999;
	background-color: #222;
	border-radius: 22px;
	transform: scale(.85);
	transition: all 300ms;
	overflow: hidden;
}

#popupFonts span.active {
	transform: scale(1);
	color: #fff;
	text-shadow: 3px 3px 5px #000;
}


#terms {
	display: none;
	top: 0;
	z-index: 99;
	background: rgba(0,0,0,.85);
	height: 100vh;
	width: 100vw;
	position: fixed;
}

#pickcustomization,
#pickdevice {
	display: none;
	top: var(--main-content);
	z-index: 98;
	background: #000;
	background: radial-gradient(#555, #000 75%);
	height: 886px;
	width: 1024px;
	position: fixed;
	text-align: center;
	overflow: hidden;
}

.homedevice {
	width: 210px;
	height: 816px;
	font-weight: 700;
	font-size: 24px;
	text-align: center;
	display: inline-block;
	position: relative;
	transition: all 500ms;
	margin: 30px 80px 0;
	background: transparent url(../img/vusepro/black.png) center center/auto 750px no-repeat;
}

#pickcustomization .homedevice {
	margin: 30px 0 0;
	transform: scale(.8);
	filter: blur(1px);
	width: 210px;
	transition: all 400ms;
}

#pickcustomization .homedevice.active {
	transform: scale(1);
	opacity: 1;
	filter: blur(0);
	transition: all 900ms;
}

#pickvusepro {
	text-transform: uppercase;
}


.homedevice.vusepro {
	background: transparent url(../img/vusepro/black.png) center center/auto 750px no-repeat;
}

h3 {
	position: absolute;
	left: 50px;
	top: 812px;
	font-weight: 700;
	font-size: 36px;
	line-height: 34px;
	padding: 0;
	margin: 0;
	color: #fff;
	text-align: left;
}

h3 span {
	background: linear-gradient(-47deg, #E9485C 0%, #D98E3E 25%, #C8B500 50%, #65A76E 75%, #00A9B9 100%);
	background: var(--degrade);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#skiptutorial {
	font-size: 16px;
	color: #fff;
	position: fixed;
	left:50%;
	transform: translateX(-50%);
	top: var(--skip-tutorial-button);
	padding: 20px 50px;
	border: 2px solid #fff;
	border-radius: 50px;
	text-transform: uppercase;
	font-weight: 700;
	z-index: 101;
}

#terms div.page {
	display: none;
	top: 0;
	z-index: 100;
	height: calc(var(--main-content) + var(--main-container));
	width: 1024px;
	position: absolute;;
}

#terms div.page2 {
	background: rgba(0,0,0,.6);
}

#terms div.page span.tutimage {
	width:82px;
	height: 82px;
	position: absolute;
}

#terms div.legende {
	position: absolute;
	color: #fff;
	font-size: 18px;
	font-weight: 400;
	line-height: 22px;
	text-align: left;
}

#terms div.legende p {
	font-size: 36px;
	display: block;
	font-weight: 700;
	text-align: left;
	padding: 0;
	margin: 0 0 22px;
}

#terms div.popupTerms {
	width: 60%;
	background: #fff;
	box-shadow: 10px 10px 20px #000;
	color: #000;
	font-size: 14px;
	padding: 40px;
	border-radius: 16px;
	margin-left: 50%;
	margin-top: 50%;
	transform: translate(-50%);
}

#terms div.popupTerms h4 {
	text-align: center;
	padding: 0;
	margin: 0 0 30px;
	font-size: 18px;
	font-weight: 700;
}

#terms div.popupTerms p {
	color: #000;
	font-weight: 300;
	font-size: 14px;
	line-height: 17px;
	text-align: justify;
}

div.popupLangue {
	background: transparent url(../img/logo_V3.svg) center 40px/88px 88px no-repeat;
	padding-top: 420px;
	width: 100vw;
	position: relative;
	text-align: center;
}

div.popupLangue h2 {
	font-weight: 900;
	font-size: 100px;
	color: #fff;
	line-height: 90px;
	padding: 50px 0 40px;
	text-align: center;
	margin:0;
}

div.popupLangue h2 b {
	-webkit-text-stroke: 2px transparent;
	font-weight: 900;
	background: var(--degrade);
	-webkit-background-clip: text;
	-webkit-text-fill-color: #000;
}

div.popupLangue h4 {
	padding: 50px 0 0;
	font-size: 24px;
}

div.popupLangue .bt {
	border-color: #fff;
}

#render {
	top: var(--main-content) !important;
	left: 0;
	width: 1024px;
	height: 846px;
	position: fixed;
	background: #000;
	z-index: 50;
	opacity: 0;
	display: none;
}

#thanks,
#laststeps {
	top: var(--main-content) !important;
	left: 0;
	width: 1024px;
	height: 1063px;
	position: fixed;
	text-align: center;
	background: #000;
	z-index: 70;
	opacity: 0;
	display: none;
}

#thanks {
	z-index: 71;
}

p {
	color: #fff;
	font-weight: 700;
	font-size: 20px;
	line-height:24px;
	text-align: center;
}

#laststeps input {
	border: 1px solid #fff;
	color: #000;
	background: #fff;
	border-radius: 50px;
	font-size: 20px;
	width: 350px;
	padding: 20px 60px;
	font-weight: 700;
	text-align: left;
	outline: none;
	margin: 30px 0 20px;
}

span.bts {
	display: inline-block;
	text-align: center;
	padding: 21px;
	min-width:185px;
	background: linear-gradient(321.8deg, #E9485D 4.07%, #D98E3E 29.33%, #C8B500 55.12%, #65A76E 79.05%, #00A9B9 95.96%);
	background: var(--degrade);
	border-radius: 100px;
	color: #fff;
	font-weight: 700;
	margin: 10px;
}

#thanks span.bts {
	margin-top: 35px;
	padding: 21px 35px;
}

span.cancel {
	display: inline-block;
	text-align: center;
	padding: 20px;
	width:185px;
	border: 1px solid #fff;
	background: #000;
	color: #fff;
	border-radius: 100px;
	margin: 10px;
}

#epodColours {
	text-align: center;
	margin-top: 20px;
}

#epodColours span {
	width: 60px;
	height: 60px;
	border-radius: 100px;
	background-color: transparent;
	margin: 0 8px;
	background-size: 220px auto;
	background-position: 141px 309px;
	display: inline-block;
	border: 2px solid #fff;
	transition: all 350ms;
	transform: scale(.8);
	opacity: .77;
}

#epodColours span.active {
	transform: scale(1.2);
	opacity: 1;
}

#epodColours span::before {
	content:"";
	position: absolute;
	left:-15px;
	top: 74px;
	width: 0px;
	height: 4px;
	background: var(--degrade);
	opacity: 0;
	transition: all 250ms 0ms;
}

#epodColours span.active::before {
	opacity:1;
	width: 90px;
	transition: all 500ms 100ms;
}

#epod2finish {
	top: 220px;
	left:362px;
	width: 300px;
	height: 846px;
	position: absolute;
	background: transparent url(../img/epod2/graphite.png) center center/auto 800px no-repeat;
	z-index: 50;
}

#backboutonfinish {
	font-size: 18px;
	position: absolute;
	top: 93px;
	left: 30px;
	font-weight: 400;
	opacity: 0;
}

#backboutonfinish img {
	vertical-align: text-bottom;
}

#epod2 {
	top: 0;
	left:362px;
	width: 300px;
	height: 846px;
	position: absolute;
	background: transparent url(../img/epod2/silver.png) center center/auto 800px no-repeat;
	z-index: 50;
}

.generatedDesign {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 846px;
	text-align: center;
	overflow: hidden;
}

.generatedDesign img {
	filter: invert(1) brightness(2);
	mix-blend-mode: soft-light;
	height: 642px;
	width: 112px;
	margin: 147px auto 0;
}

body.curateddesigns .generatedDesign img {
	height: 580px;
	width: 112px;
	margin: 154px auto 0;
}


/* ECRAN D'INTRO */
.homedevice .generatedDesign img {
	height: 572px;
	width: 112px;
	margin: 162px auto 0;
}

#devicebackground {
	position: absolute;
	top: 0;
	left: 0;
	width: 1024px;
	height: 846px;
	z-index: -2;
	background: transparent url(../img/dot-20.png) top left/40px 40px repeat;
}

#deviceartboard {
	position: absolute;
	top: 0;
	left: 0;
	width: 1024px;
	height: 846px;
	z-index: -1;
	background: transparent url(../img/device-artboard-vusepro.svg?ref2) center center/130px auto no-repeat;
}

#header {
	width: 1024px;
	height: var(--main-content);
	background: #000 url(../img/creativelab.svg) center 40px/248px auto no-repeat;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 11;
	font-size: 14px;
	color: #fff;
	overflow: hidden;
}

#header span {
	display: inline-block;
	margin-right:20px;
	font-weight: 300;
}

#header span b {
	font-weight: 400;
}

#customname {
	top:62px;
	position:absolute;
	right:30px;
	font-weight: 400;
}

#header span img {
	width:auto;
	height: 20px;
	margin-right: 8px;
	vertical-align: middle;
}

#navigationZoom {
	position: fixed;
	width: 30px;
	right: 28px;
	top: 530px;
	z-index: 50;
	opacity: 0;
	display: none;
	padding: 15px;
	background: #fff;
	border: 2px solid #000;
	border-radius: 50px;
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
	transition: all 250ms;
}

#navigationZoom.hide {
	left: 1024px;
}

#navigationZoom span {
	width: 30px;
	height: auto;
	margin: 10px 0;
	display: inline-block;
	text-align: center;
}

#navigationZoom span.middle {
	margin: 10px 0;
}

#navigationZoom span img {
	width: 100%;
}

#navigationZoom span.middle img {
	width: 10px;
	padding: 10px;
}

#deviceSide {
	position: fixed;
	width: auto;

	top: var(--icones-top-container);
	right: 10px;

	z-index: 51;
	transition: all 185ms ease-out;
}

#deviceSide.hide {
	opacity: 0;
}

#toolbar {
	position: fixed;
	width: 78px;
	left: 20px;
	top: 290px;
	top:  calc(var(--main-content) + var(--position-toolbar));
	z-index: 50;
	transition: all 185ms ease-out;
}

#toolbar.hide {
	opacity: 0;
}

#deviceSide span.r,
#toolbar span {
	width: 70px;
	height: 70px;
	margin: 0 0 10px;
	background-color: #ccc;
	box-shadow: 2px 2px 5px rgba(0,0,0,.2);
	border-radius: 200px;
	background-repeat: no-repeat;
	background-position: center center;
	display: block;
	transition: all 200ms;
}

#deviceSide span.r {
	display: inline-block;
	margin: 0 10px;
}

#deviceSide span.r div {
	position: absolute;
	width: 70px;
	top: 80px;
	font-size: 16px;
	color: #000;
	font-weight: 700;
	text-align: center;
}

.preview #deviceSide span.r div {
	color: #fff;
}

#deviceSide span.r.active,
#toolbar span.r.active {
	background-color: #000;
	box-shadow: 3px 3px 8px rgba(0,0,0,.4);
}

#drawIcon { background-image:url(../img/icons_v2/draw.svg); }
#eraserIcon { background-image:url(../img/icons_v2/eraser.svg); }
#moveIcon { background-image:url(../img/icons_v2/move.svg); }
#zoomIcon { background-image:url(../img/icons_v2/zoom.svg); }
#undoIcon { background-image:url(../img/icons_v2/undo.svg); }
#trashIcon { background-image:url(../img/icons_v2/trash.svg); }
#switchIcon { background-image:url(../img/icons_v2/front.svg); }

#drawIcon.active{ background-image:url(../img/icons_v2/brush.active.svg); }
#eraserIcon.active { background-image:url(../img/icons_v2/eraser.active.svg); }
#moveIcon.active { background-image:url(../img/icons_v2/move.active.svg); }
#zoomIcon.active { background-image:url(../img/icons_v2/zoom.active.svg); }
#undoIcon.active { background-image:url(../img/icons_v2/undo.active.svg); }
#trashIcon.active { background-image:url(../img/icons_v2/trash.svg); }
#switchIcon.active { background-image:url(../img/icons_v2/rotate.active.svg); }


body.preview #iconDesign.r { display: none; }
body.design #iconDesign.r { display: inline-block; }
body.preview #iconPreview.r { display: inline-block; }
body.design #iconPreview.r { display: none; }

#titlebottom {
	position: fixed;
	left: 0;
	top: calc(var(--bottom-navbar) - 60px);
	width: 1024px;
	height: 42px;
	padding-top: 24px;
	overflow: hidden;
	background: #000;
	z-index: 11;

	font-weight: bold;
	text-align: center;
	color: #fff;
	text-transform: uppercase;
	font-size: 16px;
}

#bottom {
	position: fixed;
	left: 0;
	top: var(--bottom-navbar);
	width: 1024px;
	height: 182px;
	background: #000;
	z-index: 11;
}

#bottom::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 3px;
	left: 0;
	background: linear-gradient(to left, #e9485d 4.07%, #d98e3e 29.33%, #c8b500 55.12%, #65a76e 79.05%, #00a9b9 95.96%);
	background: var(--degrade);
}

#bottom span.rond {
	position: absolute;
	top: -20px;
	width: 40px;
	height: 40px;
	left: 40px;
	background: #000 url(../img/line-arrow.svg?a2) center center/14px 7px no-repeat;
	border: 3px solid #26A498;
	border-radius: 200px;
	display: block;
}

#terms div.bottom::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 3px;
	left: 0;
	background: linear-gradient(to left, #e9485d 4.07%, #d98e3e 29.33%, #c8b500 55.12%, #65a76e 79.05%, #00a9b9 95.96%);
	background: var(--degrade);
}


#terms div.bottom {
	position: fixed;
	left: 0;
	top: var(--bottom-navbar);
	width: 1024px;
	height: 146px;
	background: #000;
	z-index: 107;
}

nav {
	padding: 14px 0 0;
	font-size: 16px;
	font-weight: 700;
	color: #c4c4c4;
	background: #000;
	text-align: center;

}

nav span {
	display: inline-block;
	padding: 8px 20px;
	margin: 0 15px;
	transition: all 250ms;
	display: inline-block;
	position: relative;
	border-radius: 50px;
	border: 1px solid transparent;
}

nav span.white {
	color: #fff;
}

nav span.active {
	color: #fff;
	/*background: linear-gradient(#000, #000) padding-box, linear-gradient(to left, #e9485d 4.07%, #d98e3e 29.33%, #c8b500 55.12%, #65a76e 79.05%, #00a9b9 95.96%) border-box;*/

	background: linear-gradient(#000, #000) padding-box, var(--degrade) border-box;
}



#bottom .start {
	padding-left: 40px;
	width: 265px;
}

#bottom .bloque {
	display: block;
}

#bottom .bloque div.scroll {
	overflow-x: scroll;
	overflow-y: hidden;
	width: 904px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

#bottom .bloque div.scroll .more {
	position: absolute;
	right: 0;
	width: 120px;
	height: 100px;
	border-left:1px solid #fff;
	box-shadow: -8px 0 15px #000;
	background: #000 url(../img/icons_v2/more.svg) center center/50px auto no-repeat;
	z-index: +1;
	margin: 0;
	padding: 0;
}

#bottom .bloque div.scroll span.pattern {
	width: 90px;
	height: 90px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	filter: invert(1);
	display: inline-block;
	margin-top: 5px;
	margin-right: 40px;
}

#bottom .bloque div.scroll::-webkit-scrollbar {
	display: none;
}

#bottom .bloque div.scroll div.container {
	padding-left: 180px;
	width: -webkit-max-content;
}

#bottom .bloque div.scroll div.container.txt span {
	display: inline-block;
	width: 200px;
	text-align: center;
	font-size: 50px;
	line-height: 108px;
	vertical-align: bottom;
	position: relative;
	transform: scale(.9);
	transition: all 300ms;
}

#popupFonts div.txt span:before,
#bottom .bloque div.scroll div.container.txt span:before {
	content: "";
	height: 2px;
	width: 0;
	left: 0;
	background: #000;
	transition: all 200ms;
}

#popupFonts div.txt span.active,
#bottom .bloque div.scroll div.container.txt span.active {
	color: #fff;
	transform: scale(1);
}

#popupFonts div.txt span.active:before,
#bottom .bloque div.scroll div.container.txt span.active:before {
	content: "";
	height: 4px;
	width: 170px;
	left: 15px;
	bottom: 0;
	position: absolute;
	background: linear-gradient(270deg, rgba(233, 72, 93, 0.85) 0%, rgba(217, 142, 62, 0.85) 27.49%, rgba(200, 181, 0, 0.85) 55.56%, rgba(101, 167, 110, 0.85) 81.6%, rgba(0, 169, 185, 0.85) 100%);
	background: var(--degrade);
	display: block;
}

#bottom .bloque label {
	font-size: 18px;
	font-weight: 700;
	display: inline-block;
	margin-bottom: 25px;
}

#bottom .bloque label span {
	margin-left: 192px;
}

#bottom .bloque label span {
	margin-left: 0;
}

#bottom .bloque img.ic {
	vertical-align: middle;
	margin: 0 5px 0 15px;
	height: 28px;
}

#bottom .bloque .line {
	margin-left: 40px;
	border-left: 1px solid #fff;
	padding-left: 40px;
}

#bottom .bloque .brushSelector {
	float: left;
}

#bottom .bloque .widthSelector {
	float: left;
}

#bottom .bloque .small {
	padding: 40px 0 0 0;
	text-align: center;
}

#bottom .bloque .brushSelector span.Pencil,
#bottom .bloque .brushSelector span.Spray {
	display: inline-block;
	color: #999;
	padding: 12px 0 12px 38px;
	background: url(../img/icons_v2/pencil.svg) left center/28px 28px no-repeat;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
}

#bottom .bloque .brushSelector span.Spray {
	background: url(../img/icons_v2/brush.svg) left center/28px 28px no-repeat;
}

#bottom .bloque .brushSelector span.Spray.active {
	background: url(../img/icons_v2/brush.active.svg) left center/28px 28px no-repeat;
	color: #fff;
}

#bottom .bloque .brushSelector span.Pencil.active {
	background: url(../img/icons_v2/pencil.active.svg) left center/28px 28px no-repeat;
	color: #fff;
}

#bottom .bloque.customizationdevice  {
	padding: 35px 0 0;
	text-align: center;
}

#bottom .bloque.customizationdevice  div span.choices {
	display: inline-block;
	width: 250px;
	vertical-align: middle;
	font-size: 24px;
	text-align: center;
	position: relative;
	opacity: .65;
	transform: scale(.75);
	transition: all 250ms;
}

#bottom .bloque.customizationdevice  div span.choices img {
	height: 40px;
	vertical-align: middle;
	margin-right: 10px;
	margin-top: -4px;
}

#bottom .bloque.customizationdevice  div span.active.choices {
	opacity: 1;
	transform: scale(1);
}

input[type='range'] {
	width: 410px;
	margin: 0;
	background-color: transparent;
	-webkit-appearance: none;
	padding: 25px 0 15px;
}

input[type='range']::-webkit-slider-runnable-track {
	background: #999;
	border: 1px solid #999;
	width: 100%;
	height: 1px;
	cursor: pointer;
}

input[type='range']::-webkit-slider-thumb {
	margin-top: -12.5px;
	width: 24px;
	height: 24px;
	background: #fff linear-gradient(321.8deg, #e9485d 4.07%, #d98e3e 29.33%, #c8b500 55.12%, #65a76e 79.05%, #00a9b9 95.96%);
	background: var(--degrade);
	border: 2px solid #fff;
	border-radius: 36px;
	cursor: pointer;
	-webkit-appearance: none;
}

input[type='range']:focus::-webkit-slider-runnable-track {
	background: #fff;
}

#undoIcon,
#redoIcon,
#trashIcon {
	opacity: 0.2;
}

#legal {
	position: fixed;
	display: block;
	bottom: 0;
	font-size: 18px;
	font-weight: 300;
	color: #fff;
	text-align: justify;
	background: #000 url('../img/ageless.svg?u') 20px 25px / auto 60px no-repeat;
	z-index: 200;
	height: 60px;
	padding: 40px 20px 10px 110px;
	width: 100%;
	border-top: 1px solid #fff;
}

.boutonblanc {
	position: absolute;
	top: 920px;
	left: 420px;
	display: inline-block;
	padding: 20px 35px;
	border-radius: 50px;
	color: #000;
	background: #fff;
	font-size: 18px;
	font-weight: 700;
}

.bouton {
	display: inline-block;
	padding: 20px 35px;
	border-radius: 50px;
	color: #bbb;
	background: #fff;
	font-size: 18px;
	font-weight: 700;
	box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.2);
	transition: all 150ms;
}

.bouton.gradient {
	background: #fff linear-gradient(321.8deg, #e9485d 4.07%, #d98e3e 29.33%, #c8b500 55.12%, #65a76e 79.05%, #00a9b9 95.96%);
	background: var(--degrade);
	color: #fff;
	box-shadow: 6px 6px 8px rgba(0, 0, 0, .5);
}

#submitbutton {
	position: fixed;
	z-index: 60;
	top: var(--submit-button);
	right: 40px;
}

#submitbutton2 {
	position: fixed;
	z-index: 860;
	top: var(--submit-button);
	right: 40px;
}

.submitbutton {
	position: fixed;
	top: var(--submit-button);
	right: 40px;
}

#submitbutton.hide {
	opacity: 0;
}

.navbutton {
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	border: 2px solid #fff;
	padding: 10px 30px;
	background: #000;
	display: inline-block;
	transition: all 300ms;
	border-radius: 5px;
	margin-right: 8px;
}

.navbutton.active {
	background: #fff;
	color: #000;
}

.navbutton.canv.large {
	width: 196px;
	margin-bottom: 15px;
}

.design .navbutton.large.design { display:none; }
.preview .navbutton.large.design { display:inline-block; color: #000; background: #fff;border-color: #fff; }
.preview .navbutton.large.preview { display:none; }


.navbutton.canv {
	background: transparent;
	border-color: #000;
	color: #000;
	width: 60px;
	text-align: center;
}

.navbutton.canv.active {
	color: #dfdfdf;
	background: #000;
}

.preview .navbutton.canv {
	background: transparent;
	border-color: #fff;
	color: #fff;
}

.preview .navbutton.canv.active {
	color: #000;
	background: #fff;
	border-color: #fff;
}



.elements .scroll span {
	width: 120px;
	height: 80px;
	text-align: center;
	margin: 10px 35px 0 0;
	display: inline-flex;
}

.elements .scroll span img {
	filter: invert(1);
	width: 100%;
	max-width: 120px;
	max-height: 80px;
	vertical-align: middle;
}

#screensaver {
	opacity: 1;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 1024px;
	height: 1366px;
	background: #000;
	z-index: 199;
	overflow: hidden;
}

span.bt {
	font-size: 16px;
	display: inline-block;
	font-weight: 700;
	padding: 15px 25px;
	margin: 0 15px;
	color: #fff;
	background: #000;
	border: 1px solid #000;
	border-radius: 25px;
	box-shadow: 5px 5px 10px rgba(0,0,0,.2);
}

span.bt.blanc {
	color: #000;
	background: #fff;
	box-shadow: none;
}

#terms p {
	line-height: 18px;
	margin-block: 45px;
}

#finish {
	opacity: 0;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: #000;
	z-index: 100;
}

#finish .logoVXU {
	width: 220px;
	height: 74px;
	position: fixed;
	top: 70px;
	right: 50px;
	background: transparent url(../img/vuseXu.svg) center center/220px auto no-repeat;
	display: block;
}

#finish .complete {
	font-weight: 700;
	font-size: 24px;
	position: fixed;
	top: 1120px;
	right: 50px;
	display: inline-block;
}

.generatedDesignLaser {
	position: absolute;
	top: 0;
	left: 25%;
	width: 50%;
	height: 3px;
	background: #fff;
	box-shadow: 0 0 25px #0f0, 0 0 10px #fff;
}

.trim span {
	font-weight: 900;
	line-height: 74px;
	font-size: 84px;
	position: fixed;
	border: 5px solid #000;;
}

#yourStroke span {
	color: #000;
	-webkit-text-stroke: 2px #fff;
	top: 510px;
	text-align: right;
	left: 42px;
}

#ofGenius span {
	top: 580px;
	text-align: left;
	left: 615px;
	background: var(--degrade);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

h1 {
	font-weight: 900;
	line-height: 65px;
	font-size: 80px;
	color: #fff;
	padding: 0;
	margin: 200px auto 0;
	text-align: center;
}

#screensaver h1 {
	position: absolute;
	text-transform: uppercase;
	font-size: 65px;
	left: 140px;
	top: 460px;margin: 0;
	color: #fff;
}

#screensaver h1 span {
	color: #000;
	-webkit-text-stroke: 1px #fff;
}

#screensaver p {
	position: absolute;
	top: 560px;
	width: 700px;
	left: 140px;
	font-weight: 300;
	font-size: 28px;
	margin: 0;
	padding: 0;
	text-align: left;
	line-height: 36px;
}

h1 span.grad {
	background: var(--degrade);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

h1.sub {
	width: 50%;
	margin-top: 245px;
	padding-bottom:20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #fff;
}

/* On affiche ou cache le contenu spécifique au modèle de ePod choisi */
body.curateddesigns .showcurated { display: block!important; }
body.curateddesigns .showcreateyourown { display: none!important; }
body.createyourown .showcurated { display: none!important; }
body.createyourown .showcreateyourown { display: block!important; }

#bottom .hide { display: none!important; }

#popup span.pattern {
	width: 75px;
	height: 300px;
	border-radius: 15px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #e1e1e1;
	filter: invert(1);
	margin: 30px 30px;
	display: inline-block;
}

#popup div.alerte {
	display: block;
	position: relative;
	top:50%;
	transform: translateY(-50%);
}

#popup div.alerte p {
	font-size: 16px;
	text-align: center;
	margin: 12px auto;
	font-weight: 400;
}

#popup div.alerte h4 {
	font-size: 24px;
	text-align: center;
	margin: 0 0 20px;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
}

#popup div.alerte span.bouton {
	font-size: 14px;
	color: #fff;
	padding: 10px 25px;
	margin: 0 20px;
	border: 2px solid #fff;
	background: transparent;
	border-radius: 50px;
	text-transform: uppercase;
	font-weight: 700;
}

#popup div.alerte span.bouton.blanc {
	color: #000;
	background: #fff;
}

body.back .curated .patterns,
body.back .curated .icons {
	display: none;
}