/*
Globals
*/
@font-face {
    font-family: 'ITC Avant Garde W1G Md';
    src: url('/assets/fonts/ITCAvantGardeW1G-Md.woff2') format('woff2'),
        url('/assets/fonts/ITCAvantGardeW1G-Md.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ITC Avant Garde W1G Md Bold';
    src: url('/assets/fonts/ITCAvantGardeW1G-Bold.woff2') format('woff2'),
        url('/assets/fonts/ITCAvantGardeW1G-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
html, body{
  margin: 0;
  padding: 0;
  font-family: 'ITC Avant Garde W1G Md';
}


::placeholder{
  color: #000;
}


#the-app {
	position: relative;
	width: 100%;
	height: 100%;
	max-width: 1125px;
	max-height: 2436px;
}
.backgroundImage {
	position: absolute;
	top: 0;
	left: 0;
	/*width: 100%;
	height: auto;*/
	object-fit: scale-down;
	max-width: 100%
}
.step {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.sephora1 {
	height: auto;
	width: 47.82%;
	/*157 sur 2436*/
	/* 538 sur 1125 */
	margin: 0 auto;
	margin-top: 14.7%;
}
.sephora2 {
	position:absolute;
	top:14px;
	left:17.5%;
	width:60%;
	height:auto;
	margin:0;
}
.title1 {
	margin: 0;
	padding: 0;
	/*margin-top: 14.7%;*/
	/*margin-top: 30%;*/
	margin-top: 15vh;
	font-size: 19vw;
	color: #fff;
	font-family: 'ITC Avant Garde W1G Md Bold';
	line-height: 17vw;
}
.title2 {
	margin: 0;
	padding: 0;
	margin-top: 6vh;
	font-size: 9vw;
	color: #fff;
	font-family: 'ITC Avant Garde W1G Md Bold';
	text-align: left;
	padding-left: 17.5%;
}
.title3 {
	margin: 0;
	padding: 0;
	font-size: 7vw;
	color: #fff;
	font-family: 'ITC Avant Garde W1G Md Bold';
	text-align: left;
	padding-left: 15%;
}
.blackText {
	margin: 0;
	padding: 0;
	margin-top: 4.5%;
	font-size: 4.25vw;
	color: #000;
	font-family: 'ITC Avant Garde W1G Md Bold';
}
.blackButton {
	margin: 0;
	padding: 0;
	margin-top: 2%;
	font-size: 5vw;
	color: #fff;
	background-color: #000;
	border: 0 none;
	padding: 3%;
	padding-bottom: 2%;
	min-width: 65%;
	font-family: 'ITC Avant Garde W1G Md Bold';
}

.hide {
	display: none;
}
.marginTop5 {
	margin-top: 5%;
}
.clearBoth {
	/*clear: both;
	overflow: hidden;
	width: 100%;
	padding: 0;
	margin: 0;
	margin-top: 1%;*/
	width: 100%;
	padding: 0;
	margin: 0;
	margin-top: 2vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
.left {
	width: 50%;
	float: left;
	padding: 0;
	margin: 0;
	text-align: left;
}
label {
	margin: 0;
	padding: 0;
	/*font-size: 3vw;*/
	font-size: 2.6vw;
	color: #000;
	font-family: 'ITC Avant Garde W1G Md';
	line-height: 1.4;
	display: block;
}
.checkbox-container {
    /*position: absolute;*/
    /*position: relative;
    display: inline-block;
    margin: 20px;
    width: 100px;
    height: 100px;
	left: 10%;*/
	text-align: right;
}
input[type="checkbox"] {
    width: 25px;
    height: 25px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.1);
    color:black;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    position: relative;
    left: -5px;
    /*top: -5px;*/
    top: 0;
	border: 1px solid #000;
}
input[type="checkbox"]:checked {
    background: rgba(0, 0, 0, 0.7);
}
.step2 #block1 {
	width: 15%;
}
.step2 #block2 {
	width: 80%;
	padding-top: 1.5%;
}

.step2 #block2 a{
		color:#000;
}

.step2 #block1bis {
	width: 15%;
}
.step2 #block1bis a{
	color:#000;
}

.step2 #block2bis {
	width: 80%;
}

.step2 #block2bis a{
	color:#000;
}

.step3 #recorderVideoWrapper {
	background-color: #acdcf1;
	width: 100%;
	margin-top: 10%;
	text-align: center;
    position: relative;
}

#wait{
	margin-top: 10%;
	height:4vh;
}

#wait.disabled{
	font-size:0;
}

.loading {
	width: 100%;
	position:absolute;
	top:15%;
}

.loading img{
	width: 30%;
}

.loading p{
	color:#fff;
	text-transform:uppercase;
	font-family: 'ITC Avant Garde W1G Md Bold';
}

#saving-loading{
	display:none;
}

#permissionDenied, .deniedimg{
	width: 100%;
	margin-top: 30%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.illustration1 {
	width: 100%;
	height:auto;
	margin-top: -30%;
}
.button1 {
	width: 20%;
	height: auto;
	display: block;
	margin: 0 auto;
	cursor: pointer;
}
.cursorPointer {
	cursor: pointer;
}
.step3 .title1 {
	margin-top: -51%;
}
video {
	width: 100%;
	height: 100%;
}
video::-webkit-media-controls, video::-moz-media-controls, video::-o-media-controls, video::-ms-media-controls {
	display: none !important;
}
.step3 .title1, video, .illustration1 {
	position: relative;
}
.blink {
  animation: blinker 1s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}
#elapsedTime {
	font-family: 'ITC Avant Garde W1G Md Bold';
	font-size: 4vw;
	color: #000;
	margin-top: -12%;
	position: relative;
	cursor: pointer;
}

/*
#animatedCircle {
	cursor: pointer;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
	margin:0;
	stroke:e8e8e8;
}
*/

#animatedCircle {
	cursor: pointer;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
	margin:0;
}

#animatedCircle.active circle {
	fill: transparent;
	stroke: #fff;
	stroke-width:4px;
	stroke-dasharray: 471;
	stroke-dashoffset: 471;
	transform: rotate(-90deg);
	transform-origin: center;
	animation-name: clock-animation;
	animation-timing-function: linear;
	animation-iteration-count:1;
}

@keyframes clock-animation {
  0% {
    stroke-dashoffset: 471;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.dashboard {
  display: flex;
}

svg {
  width: 114px;
  height: 114px;
  margin: 1em;
}

.bg {
  fill: none;
  stroke-width: 5px;
  stroke: #fff;
}

[class^="meter-"] {
  fill: none;
  stroke-width: 5px;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  
}

.meter-1 {
  stroke-dasharray: 360;
  stroke-dashoffset: 100;
  /*stroke: aqua;*/
  /*animation: progress-1 1s ease-out;*/
}
.meter-2 {
  stroke: lime;
  stroke-dasharray: 360;
  stroke-dashoffset: 160;
  animation: progress-2 .75s ease-out;
}
.meter-3 {
  stroke: magenta;
  stroke-dasharray: 360;
  stroke-dashoffset: 250;
  animation: progress-3 .5s ease-out;
}

@keyframes progress-1 {
    from {
        stroke-dashoffset: 360;
    }
    to {
        stroke-dashoffset: 100;
    }
}

@keyframes progress-2 {
  from {
    stroke-dashoffset: 360;
  }
  to {
    stroke-dashoffset: 160;
  }
}

@keyframes progress-3 {
  from {
    stroke-dashoffset: 360;
  }
  to {
    stroke-dashoffset: 250;
  }
}
.step3 .clearBoth {
	overflow: inherit;
}
.clearBoth.hide {
	display: none;
}
.step3 .clearBoth .left {
	width: 50%;
	text-align: center;
}
.step3 .clearBoth .left img {
	width: 46.87%;
	height: auto;
}
.step3 .clearBoth .left span {
	font-family: 'ITC Avant Garde W1G Md Bold';
	font-size: 3.75vw;
	color: #000;
	cursor: pointer;
	display: block;
	width: 65%;
	margin: 0 auto;
	text-transform:uppercase;
	color:#fff;
	background:#000;
	padding:10px 5px 7px 5px;
}

#step3-btn{
	margin-top:10vh;
}

.step3 .savingVideo {
	text-align: center;
	width: 100%;
	padding: 0;
	margin: 0;
	position: relative;
	top: 10%;
}

.step3 #recorder-play{
	font-size: 4rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
	z-index: 2000;
	cursor:pointer;	
	visibility:hidden;
	opacity:0;	
}

.step3 #recorder-play.active{
	visibility:visible;
	opacity:1;	
}



/* STEP 4 */
.step4 #code-noted{
	font-family: 'ITC Avant Garde W1G Md Bold';
	font-size: 1rem;
	cursor: pointer;
	display: block;
	margin:15px auto 0;
	text-transform:uppercase;
	color:#fff;
	background:#000;
	padding:15px 5px 10px 5px;	
	width:70%;
}

.step4 .blackText {
	text-align: left;
	padding-left: 15%;
	margin-top:3%;
	font-size: 0.8rem;
}

.step4 #code {
	font-family: 'ITC Avant Garde W1G Md Bold';
	padding:15px 10px 8px;
	font-size:1.6rem;
	text-transform:uppercase;
	width:70%;
	margin-top:10px;
	background: rgb(173,134,63);
	background: linear-gradient(135deg, rgba(235,226,179,1) 0%, rgba(173,134,63,1) 100%);
}

.step4 .card {
	display:block;
	width: 90%;
}
.step4 .buttonForText {
	width: 20%;
	height: auto;
	margin-top: -3%;
}
.step4 span.done {
	padding-top: 6.6%;
	font-family: 'ITC Avant Garde W1G Md Bold';
	font-size: 3.75vw;
	color: #000;
	cursor: pointer;
	display: block;
	width: 48.87%;
	margin: 0 auto;
	margin-top: 0px;
	display: block;
	margin-top: -20%;
}
.step4 .blackText, .step4 .title2, .step4 .title3 {
	padding-left: 11%;
}
.step6 #block5 {
	text-align: right;
	width: 70%;
}
.step6 #block6 {
	text-align: left;
	width: 30%;
}
.step6 input {
	width: 80%;
	font-size: 3.75vw;
	color: #cacaca;
	border-right: 0px solid transparent;
	border-top: 1px solid #e9d38d;
	border-bottom: 1px solid #e9d38d;
	border-left: 1px solid #e9d38d;
}
.step6 button {
	background-color: #000;
	color: #fff;
	text-transform: uppercase;
	font-size:1rem;
	border: 1px solid #000;
	cursor: pointer;
	width: 53px;
	height: 53px !important;
}
.step6 input, .step6 button {
	text-align: center;
	height: 36px;
	font-family: 'ITC Avant Garde W1G Md Bold';
	padding: 7px;
	padding-top: 11px;
}
.step6 input {
	font-size: 1.2rem;
}
.step6 .blackText, .step6 .title2, .step6 .title3 {
	padding-left: 11%;
	text-align: left;
	padding-right: 11%;
}
.step6  .clearBoth {
	margin-top: 3%;
}
#errorCode {
	font-family: 'ITC Avant Garde W1G Md Bold';
	color: red;
	font-size: 3.75vw;
	text-align: left;
	width: 80%;
	margin-top: 2%;
}
.step7 .blackText, .step7 .title2, .step7 .title3 {
	padding-left: 11%;
	text-align: left;
}

.step7 .blackText {
	margin-top:3%;
	font-size: 0.8rem;
}

.step7 .card {
	display:block;
	width: 98%;
	margin-top:5vh;
}

.step7 #code-ok{
	font-family: 'ITC Avant Garde W1G Md Bold';
	font-size: 1.2rem;
	cursor: pointer;
	display: block;
	margin:15px auto 0;
	text-transform:uppercase;
	color:#fff;
	background:#000;
	padding:15px 5px 10px 5px;	
	width:30%;
}

.step7 .buttonForText {
	width: 20%;
	height: auto;
	margin-top: -3%;
}
.step7 span.ok {
	padding-top: 6.6%;
	font-family: 'ITC Avant Garde W1G Md Bold';
	font-size: 3.75vw;
	color: #000;
	cursor: pointer;
	display: block;
	width: 48.87%;
	margin: 0 auto;
	margin-top: 0px;
	display: block;
	margin-top: -20%;
}
.step8 #player {
	background-color: #000;
	width: 100%;
	margin-top: 5vh;
	text-align: center;
	position:relative;
}
.step8 .title1 {
	margin-top: -51%;
}
.step8 .title1, video, .illustration1 {
	position: relative;
}
.step8 .buttonForText {
	width: 20%;
	height: auto;
	/*margin-top: -3%;*/
}
.step9 #replay{
	font-family: 'ITC Avant Garde W1G Md Bold';
	font-size: 1.2rem ;
	cursor: pointer;
	display: block;
	margin:4vh auto 0;
	text-transform:uppercase;
	color:#fff;
	background:#000;
	padding:15px 5px 10px 5px;	
	width:40%;
}

.step8 #watch-play{
	font-size: 4rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
	z-index: 2000;
	cursor:pointer;
}

/* ANIMATION */
@keyframes opacity{0%{opacity:0;visibility:hidden;}to{opacity:1;visibility:visible;}}
@keyframes animationTop{0%{transform:translateY(-10px);opacity:0;visibility:hidden;}to{transform:translateY(0px);opacity:1;visibility:visible;}}
@keyframes animationBottom{0%{transform:translateY(10px);opacity:0;visibility:hidden;}to{transform:translateY(0px);opacity:1;visibility:visible;}}
@keyframes animationLeft{0%{transform:translateX(-10px);opacity:0;visibility:hidden;}to{transform:translateX(0px);opacity:1;visibility:visible;}}

.animationFromTop, .sephora2, #open-lang, .blackText, .blackButton, .clearBoth, .title2, .title3, #code, .done, #replay, .ok, #open-lang,.doItAgain, .saveStream, .title1, #code-ok, #launchRecorder, #block7,.card ,#code-noted {
	animation: animationTop 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.25s;
	animation-fill-mode: none;
	animation-fill-mode: both;
}

#webCamContainer{
	background:#acdcf1;
}

.back.visible{
	animation: animationTop 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.75s;
	animation-fill-mode: none;
	animation-fill-mode: both;
}

#step2 .blacktext,  #step2 .blackButton,  #step2 .clearBoth{
	/*animation: animationBottom 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.35s;
	animation-fill-mode: none;
	animation-fill-mode: both;*/
}
input.blink  {
	border: 1px solid red;
}
label.blink  {
	color: red;
}
#launchRecorder, .buttonForText {
	margin-top: 10%;
}

#launchRecorder{
	position:relative;	
	display:none;
}

#launchRecorder.active{
	position:relative;
	display:block;
}

#launchRecorder img{
	position:relative;	
}

#launchRecorder span{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);	
	display:none;
	text-align:center;
	color:#FFF;
	font-size:0.5rem;
	cursor:pointer;
}

#launchRecorder span.active{
	display:block;
}


input:focus {
    outline: none !important;
}
#block7 {
	width: 100%;
	margin: 0 auto;
	text-align: left;
	margin-top: 50%;
	padding-left: 11%;
	cursor: pointer;
}
#block7 img {
	display: inline;
	cursor: pointer;
}
#block7 i {
	cursor: pointer;
	display: block;
	font-size: 30px;
	margin-top: -15%;
	margin-left: 6.5%;
}
#open-lang {
	position: absolute;
	z-index: 3000;
	cursor: pointer;
	right: 5px;
	top: 5px;
	width:60px;
	height:30px;
	display:flex;
	align-items:center;
	flex-direction:row;
	justify-content:center;
}


#open-lang .flag{
	width:20px;
}

#open-lang span{
	font-size:0.75rem;
	margin:0 5px;
}

#open-lang i{
	font-size:0.75rem;
}

.back {
	position: absolute;
	z-index: 3000;
	cursor: pointer;
	left: 5px;
	top: 8px;
	font-size:1.2rem;
	color:#000;
	text-decoration:none;
	font-weight:300;
	opacity:0;
	visibility:hidden;
	transition:all 0.3s ease-out;
}

.back.visible{
	opacity:1;
	visibility:visible;
}



#languages {
	background-color: rgba(255, 255, 255, 0.95);
	text-align: center;
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 4000;
}

#languages ul{
	display:flex;
	align-items:center;
	flex-direction:column;
	justify-content:center;
	height: 100%;
}

#languages ul, #languages ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#languages ul li {
	margin: bottom: 1%;
	display:block;
}
#languages ul li a {
	font-family: 'ITC Avant Garde W1G Md';
	font-size: 4vw;
	text-decoration: none;
	color: #000;
	line-height:1.5;
}

#yourCode{
	text-transform:uppercase;
}


/* LANGUE ARABE */
.lang-ar .title2{
	text-align:right;
	padding-left:0;
	padding-right:17.5%;
}

.lang-ar .title3{
	text-align:right;
	padding-left:0;
	padding-right:17.5%;
}

.lang-ar .blackText{
	text-align:right;
	padding-left:0;
	padding-right:17.5%;
}

.lang-ar #step2 .clearBoth{
	flex-direction:row-reverse;
}

.lang-ar #step2 .clearBoth #block1 {
    margin-right: 15%;
}

.lang-ar #step2 .clearBoth #block2 label {
    text-align:right;
}


.lang-ar .step6 .blackText, .lang-ar .step6 .title2, .lang-ar .step6 .title3 {
	padding-right:11%;
    text-align: right;
}

.lang-ar #step6 .clearBoth{
	flex-direction:row-reverse;
}

.lang-ar .step6 #block5{text-align:left;}

.lang-ar .step6 #block6 {text-align: right;}

.lang-ar .step7 .blackText, 
.lang-ar .step7 .title2, 
.lang-ar .step7 .title3 {
	padding-right:11%;
    text-align: right;
}

.lang-gr .title1{
	font-size: 2vw;
}
.lang-gr #replay{
	font-size: 1rem;
}


/* Pour les grands écrans on divise la taille de la police par 7.5 et on met la taille de l'iphone 5 se au cas ou en hauteur l'écran fasse moins de 600px */
@media (min-width:1025px){
	#the-app {
		max-width: 320px;
		max-height: 568px;
	}
	.title1 {
		font-size: 2.54vw;
		line-height: inherit;
	}
	.title2 {
		font-size: 1.2vw;
	}
	.title3 {
		font-size: 0.94vw;
	}
	.blackText {
		font-size: 0.57vw;
	}
	.blackButton {
		font-size: 0.67vw;
	}
	label {
		font-size: 0.4vw;
	}
	#recorderVideoWrapper {
		max-height: 350px;
	}
	#elapsedTime {
		font-size: 0.53vw;
	}
	.step3 .clearBoth .left span, .step4 span.done, span.ok, span.replay, .step8 span.replay {
		font-size: 0.5vw;
	}

	#block7 i {
		font-size: 25px;
	}
	#languages ul li a {
		font-size: 1vw;
	}
}
@media (max-height:850px){
	.illustration1 {
		margin-top: -40%;
	}
}

@media (max-width:400px) and (max-height:700px){
	.bgCode, #code, .card {
		width: 60%;
	}
	#step4 .title3 {
		font-size: 5vw;
	}
	#code {
		margin-top: -16%;
	}

	#block7 {
		margin-top: 50%;
	}
	#block7 i {
		font-size: 22px;
	}
	label {
		line-height: 1.4;
	}
}

@media (max-width:482px){
	.step8 #player{
		margin-top: 7vh;
	}
	
	.step8 #replay{
		margin:6vh auto 0;
	}
}

@media (max-width:382px){
	
	.title2{
		margin-top:10vh;
	}
	
	.step8 #player {
		margin-top: 10vh;
	}
	
	.step8 #replay{
		margin:10vh auto 0;
	}
}