@font-face {
	font-family: 'Roboto Slab';
	src: url("fonts/RobotoSlab-Bold-webfont.eot");
	src: url("fonts/RobotoSlab-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/RobotoSlab-Bold-webfont.woff") format("woff"), url("fonts/RobotoSlab-Bold-webfont.ttf") format("truetype"), url("fonts/RobotoSlab-Bold-webfont.svg#roboto_slabbold") format("svg");
	font-weight: 800;
	font-style: normal;
}
@font-face {
	font-family: 'Roboto Slab';
	src: url("fonts/RobotoSlab-Light-webfont.eot");
	src: url("fonts/RobotoSlab-Light-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/RobotoSlab-Light-webfont.woff") format("woff"), url("fonts/RobotoSlab-Light-webfont.ttf") format("truetype"), url("fonts/RobotoSlab-Light-webfont.svg#roboto_slablight") format("svg");
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'Roboto Slab';
	src: url("fonts/RobotoSlab-Regular-webfont.eot");
	src: url("fonts/RobotoSlab-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/RobotoSlab-Regular-webfont.woff") format("woff"), url("fonts/RobotoSlab-Regular-webfont.ttf") format("truetype"), url("fonts/RobotoSlab-Regular-webfont.svg#roboto_slabregular") format("svg");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Roboto Slab';
	src: url("fonts/RobotoSlab-Thin-webfont.eot");
	src: url("fonts/RobotoSlab-Thin-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/RobotoSlab-Thin-webfont.woff") format("woff"), url("fonts/RobotoSlab-Thin-webfont.ttf") format("truetype"), url("fonts/RobotoSlab-Thin-webfont.svg#roboto_slabthin") format("svg");
	font-weight: 100;
	font-style: normal;
}
@font-face {
	font-family: 'Roboto';
	src: url("fonts/Roboto-BoldItalic-webfont.eot");
	src: url("fonts/Roboto-BoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/Roboto-BoldItalic-webfont.woff") format("woff"), url("fonts/Roboto-BoldItalic-webfont.ttf") format("truetype"), url("fonts/Roboto-BoldItalic-webfont.svg#robotobold_italic") format("svg");
	font-weight: 800;
	font-style: italic;
}
@font-face {
	font-family: 'Roboto';
	src: url("fonts/Roboto-Italic-webfont.eot");
	src: url("fonts/Roboto-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/Roboto-Italic-webfont.woff") format("woff"), url("fonts/Roboto-Italic-webfont.ttf") format("truetype"), url("fonts/Roboto-Italic-webfont.svg#robotoitalic") format("svg");
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'Roboto';
	src: url("fonts/Roboto-Light-webfont.eot");
	src: url("fonts/Roboto-Light-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/Roboto-Light-webfont.woff") format("woff"), url("fonts/Roboto-Light-webfont.ttf") format("truetype"), url("fonts/Roboto-Light-webfont.svg#robotolight") format("svg");
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'Roboto';
	src: url("fonts/Roboto-LightItalic-webfont.eot");
	src: url("fonts/Roboto-LightItalic-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/Roboto-LightItalic-webfont.woff") format("woff"), url("fonts/Roboto-LightItalic-webfont.ttf") format("truetype"), url("fonts/Roboto-LightItalic-webfont.svg#robotolight_italic") format("svg");
	font-weight: 300;
	font-style: italic;
}
@font-face {
	font-family: 'Roboto';
	src: url("fonts/Roboto-Medium-webfont.eot");
	src: url("fonts/Roboto-Medium-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/Roboto-Medium-webfont.woff") format("woff"), url("fonts/Roboto-Medium-webfont.ttf") format("truetype"), url("fonts/Roboto-Medium-webfont.svg#robotomedium") format("svg");
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'Roboto';
	src: url("fonts/Roboto-MediumItalic-webfont.eot");
	src: url("fonts/Roboto-MediumItalic-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/Roboto-MediumItalic-webfont.woff") format("woff"), url("fonts/Roboto-MediumItalic-webfont.ttf") format("truetype"), url("fonts/Roboto-MediumItalic-webfont.svg#robotomedium_italic") format("svg");
	font-weight: 700;
	font-style: italic;
}
@font-face {
	font-family: 'Roboto';
	src: url("fonts/Roboto-Regular-webfont.eot");
	src: url("fonts/Roboto-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/Roboto-Regular-webfont.woff") format("woff"), url("fonts/Roboto-Regular-webfont.ttf") format("truetype"), url("fonts/Roboto-Regular-webfont.svg#robotoregular") format("svg");
	font-weight: normal;
	font-style: normal;
}
body{
	animation-name: paysage;
	-o-animation-name: paysage;
	-ms-animation-name: paysage;
	-moz-animation-name: paysage;
	-webkit-animation-name: paysage;
}

@media (orientation: portrait){
	body{
		animation-name: portrait;
		-o-animation-name: portrait;
		-ms-animation-name: portrait;
		-moz-animation-name: portrait;
		-webkit-animation-name: portrait;

	}
}
@keyframes portrait {

}
@keyframes paysage {

}

html
{

	margin:0;padding:0;border:0
}
body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,codelicence,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,nav,section
{
	margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline
}
div
{
	border:0px solid
}
article,aside,details,figcaption,figure,dialog,footer,header,hgroup,menu,nav,section
{
	display:block
}
body
{
	line-height:1.5;background:transparent
}

table
{
	border-collapse:separate;border-spacing:0
}
caption,th,td
{
	text-align:left;font-weight:normal;float:none !important
}
table,th,td
{
	vertical-align:middle
}
blockquote:before,blockquote:after,q:before,q:after
{
	content:''
}
blockquote,q
{
	quotes:"" ""
}
a img
{
	border:none
}
:focus
{
	outline:0
}
#ContentArticleContent_1 li
{
	margin-left:15px
}
body,html
{
	background-color: #454E53!important;
	height:100%;
	padding:0;margin:0
}

body
{
	background-color:white;font-family:"Roboto";color:#fff
}


/*<!-------------------------------------------------------------------------fonts------------------------------------------------------------------------------------->*/

.roboto_slab_normal{

	font-family:"Roboto Slab";font-weight:400;font-size:5vh;
}

.roboto_slab_light{

	font-family:"Roboto Slab";font-weight:300;font-size:5vh;
}
.roboto_slab_bold{

	font-family:"Roboto Slab";font-weight:700;
}

.roboto_slab_medium{

	font-family:"Roboto Slab";font-weight:500;
}
.roboto_normal{

	font-family:"Roboto";font-weight:400;font-size:5vh;
}

.roboto_light{

	font-family:"Roboto";font-weight:300;font-size:5vh;
}
.roboto_bold{

	font-family:"Roboto";font-weight:700;
}

.roboto_medium{

	font-family:"Roboto";font-weight:500;
}

/*-------------------------------------------------------------------------cadre1-------------------------------------------------------------------------------------*/

.cadre{position:absolute;
	width:100%;
	top:59px;
}
.cadre1{
	height: calc(100vh - 60px);
	display: block;
	background-color: #454E53;
}

@media (orientation: portrait){
	.cadre1{
		height: calc(100vh - 60px);
		display: block;
		background-color: #454E53;
	}

}
.cadre1_1{
	height: 100%;
	width: 100vh;
	margin:auto;
	border-top: 1px;
	border-style: solid;
	border-color: black;
	position:relative;
}
@media (orientation: portrait){
	.cadre1_1{
		height: 100vh;
		width: 100%;
		margin:auto;
	}
}
/*-----------------------------------contenu-------------------------------------------*/
.connexionClick{
	height: 9.26vh;
	width:9.26vh;
	background: red;
	position: absolute;
	z-index: 1;
	cursor: pointer;
	opacity: 0;
}

@media (orientation: portrait){
	.connexionClick{
		height: 6vh;
		width:6vh;
	}

}

.connexion{
	height: 9.26vh;
	width:12vh;
	z-index:1;
	margin: 6vh auto 0 auto;
	position: relative;
	left: 37.5vh;
	/*margin:6vh 5vh 0 85vh; */
}

@media (orientation: portrait){
	.connexion{
		height: 5.70vh;
		width:7vh;
		left: 19vh;
		position: relative;
	}
}
.basse{
	width: 2.27vh;
	height: 2.95vh;
	background: #818388;
	display: inline-block;
	border-radius: 0.93vh  0.93vh  0.93vh  0.93vh;
	position: relative;
	margin-right: 0.85vh;
}

@media (orientation: portrait){
	.basse{
		height: 2.4vh;
		width: 1.40vh;
		border-radius: 0.65vh  0.65vh  0.65vh  0.65vh;
		margin-right: 0.50vh;

	}

}
.moyenne{
	width: 2.27vh;
	height: 6.39vh;
	background: #818388;
	display: inline-block;
	border-radius: 0.93vh  0.93vh  0.93vh  0.93vh;
	position: relative;
	margin-right: 0.85vh;
}

@media (orientation: portrait){
	.moyenne{
		height: 3.86vh;
		width: 1.40vh;
		border-radius: 0.65vh  0.65vh  0.65vh  0.65vh;
		margin-right: 0.50vh;
	}

}
.haute{
	width: 2.27vh;
	height: 9.26vh;
	background: #818388;
	display: inline-block;
	border-radius: 0.93vh  0.93vh  0.93vh  0.93vh;
	position: relative;
	cursor:pointer;

}

@media (orientation: portrait){
	.haute{
		height: 5.70vh;
		width: 1.40vh;
		border-radius: 0.65vh  0.65vh  0.65vh  0.65vh;
	}

}

.blockMenu{
	position: relative;
	float: right;
	top:4vh;
	display: none;
}



.webinar{
	position: relative;
	float: left;
	top: 4vh;
	height: 8vh;
	width: 30vh;
	background: #ffce00;
	position: absolute;
	z-index: 1;
	left: -26.1vh;/*-26vh*/
	border-top-left-radius:0vh;
	border-top-right-radius:1.06vh;
	border-bottom-right-radius:1.06vh;
	border-bottom-left-radius:0vh;
	transition-duration: 0.5s;
	transition-property: left;
	cursor: pointer;

}

.webinarphoto{
	height: 7.12vh;
	width: 7.12vh;
	top: 0.44vh;
	left: 0.44vh;
	position: absolute;
	border-radius:100%;
	background-image:url("../images/louise.jpg");
	background-size: 100%;
}
.webinartxt{
	position: absolute;
	left: 8vh;
	top:1.7vh;
	font-family: 'Roboto';
	font-weight: 700;
	font-style: normal;
	font-size: 1.51vh;
	text-align: center;
	-moz-user-select: none; /* Firefox */
	-webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
	-ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
	user-select: none; /* Propriété standard */
}

.webinartxtinscrip{
	height: 7.9vh;
	width: 3.9vh;
	font-family: 'Roboto';
	font-weight: 700;
	font-style: normal;
	font-size: 1.2vh;

	right:0.1vh;
	position: absolute;
	border-top-left-radius:1.06vh;
	border-top-right-radius:0vh;
	border-bottom-right-radius:0vh;
	border-bottom-left-radius:1.06vh;
	border-right: 0.1vh solid white ;
	text-align: center;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180eg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	-moz-user-select: none; /* Firefox */
	-webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
	-ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
	user-select: none; /* Propriété standard */
}
.acceder{
	height: 8vh;
	width: 28vh;
	background: #ffce00;
	position: relative;
	z-index: 1;
	/*border-radius: 1.06vh;
	-webkit-border-radius:1.06vh;
	-o-border-radius:1.06vh;
	-moz-border-radius:1.06vh;
	*/
	border-top-left-radius:1.06vh;
	border-top-right-radius:0vh;
	border-bottom-right-radius:0vh;
	border-bottom-left-radius:1.06vh;

}

.activeBordure{
	border-bottom-right-radius:1.06vh;
	border-bottom-left-radius:1.06vh;
}

.solidCadre1 {
	height:4.16vh;
	width:4.16vh;
	border-style:solid;
	border-width:0.22vh;
	border-radius:1.25vh;
	top: 1.72vh;
	left: 1.8vh;
	position: relative;
	cursor: pointer;
	display: inline-block;
}

.solidCadre1::after {
	content: "";
	height:2.5vh;
	display:block;
	width:0.45vh;
	border-width:0.9vh;
	background-color:#FFFFFF;
	border-radius:0.5vh;
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	left:1.1vh;
	top:1.25vh;
	position:absolute;
	animation:bounce-45 2s infinite ease-in-out;
	-webkit-animation:bounce-45 2s infinite ease-in-out;
}

.solidCadre1:hover:after{
	background: #fff;
}
.solidCadre1::before {
	content: "";
	height:2.5vh;
	display:block;
	width:0.45vh;
	border-width:0.9vh;
	background-color:black;
	border-radius:0.5vh;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	left:2.7vh;
	top:1.25vh;
	background: #fff;
	position:absolute;
	animation:bounce45 2s infinite ease-in-out;
	-webkit-animation:bounce45 2s infinite ease-in-out;
}

.solidCadre1:hover:before{
	background: #fff;
}


.solid1Cadre1 {
	height:4.16vh;
	width:4.16vh;
	border-style:solid;
	border-width:0.22vh;
	border-radius:1.25vh;
	top: 1.72vh;
	left: 1.8vh;
	position: relative;
	cursor: pointer;
	display: none;
}

.solid1Cadre1::after {
	content: "";
	height:2.5vh;
	display:block;
	width:0.45vh;
	border-width:0.9vh;
	background-color:#FFFFFF;
	border-radius:0.5vh;
	-ms-transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
	left:1.1vh;
	top:0.85vh;
	position:absolute;
}

.solid1Cadre1:hover:after{
	background: #fff;
}
.solid1Cadre1::before {
	content: "";
	height:2.5vh;
	display:block;
	width:0.45vh;
	border-width:0.9vh;
	background-color:black;
	border-radius:0.5vh;
	-ms-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	left:2.7vh;
	top:0.85vh;
	background: #fff;
	position:absolute;

}

.solid1Cadre1:hover:before{
	background: #fff;
}

.txt-acceder{
	width: 20vh;
	position: relative;
	top: 1.3vh;
	right: -2.7vh;
	font-size: 1.7vh;
	text-align: center;
	font-family: 'Roboto';
	font-weight: 700;
	font-style: normal;
	display: inline-block;
}
.menuMedias{
	height: 72vh;
	width: 28vh;
	background: #fff;
	position: absolute;
	border-radius:0vh 0vh 0vh 1.06vh;
	display: none;
}

.savoirPlus{
	margin: 2.5vh 2.77vh 0 5.56vh;
	width: 17vh;
	height: 4.2vh;
	border-radius: 0.86vh;
	background: #ffce00;
	font-size: 1.7vh;
	line-height: 4vh;
	text-align: center;
	font-family: 'Roboto';
	font-weight: 700;
	font-style: normal;
	cursor: pointer;
}
.principalAppliCadre1{
	height: auto;
	width: 17vh;
	margin: 1.5vh 2.77vh 0 5.56vh;
	position: relative;
	display: block;
	border-radius: 1.6vh;
	background-image:linear-gradient(#FFF 50%, #DADAD9);
	border: solid;
	border-width: 1px;
	border-color: #DADAD9;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	overflow: hidden;
}
.supportCadre1{
	height: 24vh; /*37.04vh;*/
	width: 17vh;
	overflow: hidden;
}

.appliCadre1{
	width: 15vh;
	height: 6vh;
	margin: 1.90vh auto 2vh auto;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
}

.tabletteCadre1{
	width: 11.4vh;
	height: 8.6vh;
	margin: 0 auto 1.4vh auto;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
}

.wifiCadre1{
	width: 5.1vh;
	height: 3.1vh;
	margin:auto;
	left:4.2vh;
	top:-3vh;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
}
.AndroidAppleWindowsCadre1{
	width: 8.5vh;
	height: 2.3vh;
	margin: 0.3vh auto 1.2vh auto;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
}

.installerCadre1{
	height: 6.1vh; /* 11.11vh;*/
	width: 17vh;
}
.instaClickCadre1{
	width: 9.8vh;
	height: 4.2vh;
	font-size: 1.5vh;
	background-color: #dadad9;
	margin: auto;
	text-align: center;
	border-radius: 0.56vh;
	line-height: 4.3vh;
	cursor: default;
}

.dispoCadre1{
	height: 0;
	width: 26vh;
	margin: auto;
	text-align: center;
	color: black;
	font-size: 1vh;
}

.principalLogicielCadre1{
	height: auto;
	width: 17vh;
	margin: 2vh 2.77vh 0 5.56vh;
	position: relative;
	display: block;
	border-radius: 1.6vh;
	border: solid;
	border-width: 1px;
	border-color: #DADAD9;
	background-image:linear-gradient(#FFF 50%, #DADAD9);
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	overflow: hidden;
}

.logiCadre1{
	width: 15vh;
	height: 6vh;
	margin: 2.3vh auto 2.9vh auto;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
}
.ecrans-ordi-portableCadre1{
	width: 13.3vh;
	height: 8.20vh;
	margin: 0 auto 5.7vh auto;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
}

.AndroidAppleWindowsCadre1_2{
	width: 8.5vh;
	height: 2.3vh;
	margin: -5.1vh auto 1.2vh auto;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
}

.wifi1Cadre1{
	width: 5.1vh;
	height: 3.1vh;
	margin:auto;
	left:4.2vh;
	top:-7.4vh;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
}

.logiPcMacCadre1{
	height: 4.2vh;
	width: 17vh;
	text-align: center;
}

.pcCadre1{
	height: 4.2vh;
	width: 4.2vh;
	display: inline-block;
	font-size: 1.5vh;
	background-color: #dadad9;
	margin: auto;
	text-align: center;
	border-radius: 0.56vh;
	line-height: 4.3vh;
	margin: auto 1.3vh auto auto;
	cursor: default;
}

.macCadre1{
	height: 4.2vh;
	width: 4.2vh;
	display: inline-block;
	font-size: 1.5vh;
	background-color: #dadad9;
	margin: auto;
	text-align: center;
	border-radius: 0.56vh;
	line-height: 4.3vh;
	cursor: default;
}



#popupMenu{
	width:45.5vh;
	height: 36.82vh;
	padding:0;
	margin: 0;
	background: #818388;
	-webkit-box-shadow: 0 0 2vw rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 0 2vw rgba(0, 0, 0, 0.4);
	box-shadow: 0 0 2vw rgba(0, 0, 0, 0.4);
	display: none;
	z-index: 99999999;
	border-radius: 0.93vh;
}
#popupMenu:after{
	content: "";
	display:block;
	position:absolute;
	right:5.7vh;
	top:-3vh;
	width: 0;
	height: 0;
	border-left: 2vh solid transparent;
	border-right: 2vh solid transparent;
	border-bottom: 3.5vh solid #818388;


}
#popupcontent{
	margin-top:0;
}

.qualite_text{
	width: 40.97vh;
	height: 10.65vh;
	margin:3.24vh auto 3.24vh auto;
	font-size:2.90vh!important;
	line-height: 3.09vh;
	text-align: center;
}

.qualite_choix{
	width: 41vh;
	height: 11.02vh;
	position:relative;
	margin: 0 2.25vh;
	border-radius: 0.93vh;
	background: #454e53;
	text-align: center;
	display:block;
	padding:0;

}
.qualite_text2{
	width: 48vh;
	height: 6vh;

	margin: auto;
	position: relative;
}

.basse_text,.moyenne_text,.haute_text{
	top: -0.5vh;
	width: 13.5vh;
	display: inline-block;
	font-size: 3.09vh;
	/* line-height: 3vh; */
	position: relative;
	margin: 0 2.3vh 0 0vh;
	text-align: center;
}
.barre1{
	width: 39%;
	height: 0.78vh;
	background: #818388;
	display: block;
	margin-top: 5.1vh;
	position: absolute;
	left:0;
	margin-left: 11%;

}
.barre2{
	width: 39%;
	height: 0.78vh;
	background: #818388;
	display: block;
	margin-top: 5.1vh;
	position: absolute;
	right:0;
	margin-right: 11%;
}

.rond1{
	height: 3vh;
	width: 3vh;
	border-radius: 3vh;
	position: absolute;
	margin-left: 7.5%;
	top: 4vh;
	background: #ffce00;
	z-index: 3;

}

.rond2{
	height: 3vh;
	width: 3vh;
	border-radius: 3vh;
	position: absolute;
	margin-left: 46.5%;
	top: 4vh;
	background: #818388;
	z-index: 3;
}

.rond3{
	height: 3vh;
	width: 3vh;
	border-radius: 3vh;
	position: absolute;
	right: 0;
	margin-right: 7.5%;
	top: 4vh;
	background: #818388;
	z-index: 3;

}

input[type=range] {
	-webkit-appearance: none;
	width: 39vh;
	height:11vh;
	margin: auto;
	position: relative;
	z-index:9999999;
	display: block;
	background: rgba(255, 255, 255, 0);


}
input[type=range]:focus {
	outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
	width: 31.68vh;
	height: 11vh;
	cursor: pointer;

}
input[type=range]::-webkit-slider-thumb {
	height: 8vh;
	width: 8vh;
	border-radius: 4vh;
	background: #ffce00;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: 1.5vh;


}
input[type=range]:focus::-webkit-slider-runnable-track {
	background: rgba(255, 255, 255, 0);
}
input[type=range]::-moz-range-track {
	width: 31.68vh;
	height: 11vh;
	cursor: pointer;
	background: rgba(255, 255, 255, 0);
}
input[type=range]::-moz-range-thumb {
	border: 0px solid #000000;
	height: 8vh;
	width: 8vh;
	border-radius: 4vh;
	background: #ffce00;
	cursor: pointer;
	margin-top: 1.5vh;
}

input[type=range]::-ms-track {
	width: 31.68vh;
	height: 30px;
	cursor: pointer;
	border-color: transparent;
	color: transparent;
}
input[type=range]::-ms-fill-lower {
	background: rgba(242, 242, 242, 0);
	border: 0px solid rgba(1, 1, 1, 0);
	border-radius: 0px;

}
input[type=range]::-ms-fill-upper {
	background: rgba(255, 255, 255, 0);
	border: 0px solid rgba(1, 1, 1, 0);
	border-radius: 0px;

}
input[type=range]::-ms-thumb {

	border: 0px solid #000000;
	height: 50px;
	width: 50px;
	border-radius: 50px;
	background: #ffce00;
	cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
	background: rgba(255, 255, 255, 0);
}
input[type=range]:focus::-ms-fill-upper {
	background: rgba(255, 255, 255, 0);
}

.logo{
	width: 78.19vh;
	height: 19.52vh;
	margin: 0 auto 3vh auto;
	left: 0vh;
	position: relative;
	color: #fff;
	font-size:15.25vh!important;
	line-height: 21vh;
	background-image: url(../images/difuzz.svg);
	background-position: center;
	background-repeat: no-repeat;

}
.logo_eo{
	margin-left: 1.5vh;
	color: #454E53;
	font-size: 15.25vh;
}

@media (orientation: portrait){
	.logo{
		width: 47.74vh;
		height: 12.2vh;
		margin: 0 auto 3vh auto;
		left: 0vh;
		position: relative;
		color: #fff;
		font-size:9.53vh!important;
		line-height: 13.125vh;
		 background-image: url(../images/difuzz.svg);
		 		background-position: center;
		background-repeat: no-repeat;

	}

	.logo_eo{
		margin-left: 1vh;
		color: #454E53;
		font-size: 9.44vh!important;


	}
}

.espace{
	height:5.80vh;
	width: auto;
	margin: -1vh auto 8.83vh auto;
	text-align: center;
	position: relative;
	font-size:5.54vh!important;
	color:#ffce00;
}
@media (orientation: portrait){
	.espace{
		height:3.62vh;
		margin: -0.625vh auto 5.52vh auto;
		font-size:3.45vh!important;
	}
}
main{
	width: 100%;
	height: auto;
	display: inline-block;
	margin: 0 auto 10vh auto;
}

@media (orientation: portrait){
	main{
		margin: 0 0 10vh 0;
	}
}
.code {
	width: 62.56vh;
	position: relative;
	margin: auto;
	opacity: 0;
}
.codelicence {
	top: 3vh;
	width: 82.56vh;
	position: relative;
	margin: 8vh auto 0 auto;
	opacity: 1;
}
@media (orientation: portrait){
	.code {
		width: 39.24vh;
	}
	.codelicence {
		width: 39.24vh;
	}
}


div.testconnexion {

	position: relative;
	top: -25vh;
	width: 80vh;
	height: 0vh;
	left: 0;
	text-align: center;
	font-size: 1em;
	font-family:"Roboto";
	font-weight:300;
	margin: 0 auto;
}
div.testconnexion a {

	color: #ffce00;
	text-decoration: underline;

}
div.testencours {

	width: 80%;
	padding-left:10%;
	margin-top:0;
	font-size: 2em;
	font-family:"Roboto Slab";
	font-weight:500;
	color:#ffce00;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	animation-iteration-count: infinite;

}


@media (orientation: portrait){

	div.testconnexion {
		top: -25vh;
		width: 100vw;
		font-size: 0.7em;
	}


}

.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	50% {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}

	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@keyframes pulse {
	0% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
	}

	50% {
		-webkit-transform: scale(1.1);
		-ms-transform: scale(1.1);
		transform: scale(1.1);
	}

	100% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
	}
}

.pulse {
	-webkit-animation-name: pulse;
	animation-name: pulse;
}

#incompatible{
	text-align:center;
	margin-top:5%;
}


#input{
	height: 10.24vh;
	width: 48.87vh;
	display: inline-block;
	border-radius: 0.93vh  0 0 0.93vh;
	border: solid;
	margin: 0 auto 0 auto;
	vertical-align:top!important;
	font-size:5.87vh;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border: 0;
	z-index: 3;
	position: relative;
	background: transparent;
	padding-left: 3vh;
}

.textInput{
	content: "";
	height: 10.24vh;
	width: 48.87vh;
	display: inline-block;
	border-radius: 0.93vh  0 0 0.93vh;
	border: solid;
	margin: 0 auto 0 auto;
	vertical-align:top!important;
	font-size:5.87vh;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border: 0;
	z-index: 1;
	position: absolute;
	background: white;
}
.textCode{
	height: 10.24vh;
	width: 42.87vh;
	display: inline-block;
	text-align: center;
	margin: 0 3vh 0 3vh;
	font-size:2.67vh;
	position: absolute;
	line-height: 10.24vh;
	color: #818388;
	z-index: 2;
	-moz-user-select: -moz-none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.ok{
	height: 10.24vh;
	width: 13.69vh;
	cursor:pointer;
	display: inline-block;
	background-color:#ffce00;
	border-radius:0 0.93vh 0.93vh 0;
	color: #fff;
	position: absolute;
	font-size:5.87vh!important;
	padding: 0 1.40vh;
	margin: 0;
	border: 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.ok:hover{
	color:#454E53;
}

#inputLicence{
	height: 10.24vh;
	width: 68.87vh;
	display: inline-block;
	border-radius: 0.93vh  0 0 0.93vh;
	border: solid;
	margin: 0 auto 0 auto;
	vertical-align:top!important;
	font-size:5.87vh;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border: 0;
	z-index: 3;
	position: relative;
	background: transparent;
	padding-left: 3vh;
}

.textInputLicence{
	content: "";
	height: 10.24vh;
	width: 68.87vh;
	display: inline-block;
	border-radius: 0.93vh  0 0 0.93vh;
	border: solid;
	margin: 0 auto 0 auto;
	vertical-align:top!important;
	font-size:5.87vh;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border: 0;
	z-index: 1;
	position: absolute;
	background: white;
}
.textCodeLicence{
	height: 10.24vh;
	width: 62.87vh;
	display: inline-block;
	text-align: center;
	margin: 0 3vh 0 3vh;
	font-size:2.67vh;
	position: absolute;
	line-height: 10.24vh;
	color: #818388;
	z-index: 2;
	-moz-user-select: -moz-none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.okLicence{
	height: 10.24vh;
	width: 13.69vh;
	cursor:pointer;
	display: inline-block;
	background-color:#ffce00;
	border-radius:0 0.93vh 0.93vh 0;
	color: #fff;
	position: absolute;
	font-size:5.87vh!important;
	padding: 0 1.40vh;
	margin: 0;
	border: 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.okLicence:hover{
	color:#454E53;
}
.infoUserLicence{
	line-height: 4vh;
	padding-left: 2.5vh;
}
.lineLicence{
    font-size: 3vh;
    position: relative;
    display: inline-block;
}
#lineNomEtabInput{
	border-radius: 0.5vh;
    padding: 0.4vh 1vh;
    border: 0;
    font-size: 3vh;
    width: 46.5vh;
    height: 3vh;
    margin-left: 1vh;
    margin-bottom: 1vh;
    position: relative;
    display: inline-block;
}
#lineCpInput{
		border-radius:0.5vh;
	padding:0.4vh 1vh;
	border: 0;
    width: 17vh;
    height: 3vh;
    margin-left: 1vh;
    margin-bottom: 1vh;
    font-size: 3vh;
    position: relative;
    display: inline-block;
    margin-right: 2vh;
}
#lineVilleInput{
    border-radius: 0.5vh;
    padding: 0.4vh 1vh;
    border: 0;
    height: 3vh;
    margin-left: 1.7vh;
    width: 31.3vh;
    margin-bottom: 1vh;
    font-size: 3vh;
    position: relative;
    display: inline-block;
    margin-right: 2vh;
}
#linePrenomInput{   
	border-radius:0.5vh;
	padding:0.4vh 1vh; 
	border: 0;
	width: 22.5vh;
    height: 3vh;
    margin-left: 1vh;
    margin-bottom: 1vh;
    font-size: 3vh;
    position: relative;
    display: inline-block;
    margin-right: 2vh;
}
#lineNomInput{   
    border-radius: 0.5vh;
    padding: 0.4vh 1vh;
    border: 0;
    width: 31vh;
    height: 3vh;
    margin-left: 1.3vh;
    margin-bottom: 1vh;
    font-size: 3vh;
    position: relative;
    display: inline-block;
    margin-right: 2vh;
}
#lineFonctionInput{
	border-radius: 0.5vh;
    padding: 0.4vh 1vh;
    border: 0;
    width: 57.5vh;
    height: 3vh;
    margin-left: 1vh;
    margin-bottom: 1vh;
    font-size: 3vh;
    position: relative;
    display: inline-block;
    margin-right: 2vh;
}
#lineMailInput{
    border-radius: 0.5vh;
    padding: 0.4vh 1vh;
    border: 0;
    width: 72.5vh;
    height: 3vh;
    margin-left: 1vh;
    margin-bottom: 1vh;
    font-size: 3vh;
    position: relative;
    display: inline-block;
    margin-right: 2vh;
}
@media (orientation: portrait){
	#lineNomEtabInput,#lineCpInput,#lineVilleInput,#linePrenomInput,#lineNomInput,#lineMailInput,#lineFonctionInput{
		font-size:2vh;
	}
}
.mainlicence{
	margin: 0 auto 0vh auto;
}
/* .checkBoxInput{    
    margin-top: 1.7vh;
    margin-right: 2vh;
    margin-left: 2vh;
    width: 4vh;
    height: 4vh;
	cursor: pointer;
} */
.checkBoxInput{    
    margin-top: 3.5vh;
    margin-left: 3vh;
    width: 2.5vh;
    height: 3.5vh;
    cursor: pointer;
    position: absolute;
    left: 1vh;
}
/* .checkBoxText{
    display: inline-block;
    position: relative;
    font-size: 2.2vh;
    top: 1vh;
    cursor: pointer;
    width: 65vh;
    text-align: center;
} */
.checkBoxText{
    display: inline-block;
    position: absolute;
    font-size: 2vh;
    bottom: 4vh;
    cursor: pointer;
    width: 80vh;
    left: 8vh;
    text-align: center;
}
.okInfo {
    right: 2vh;
    margin-top: 2.2vh;
    position: absolute;
    display: block;
    height: 6.24vh;
    width: 8.69vh;
    cursor: pointer;
    display: inline-block;
    background-color: #ffce00;
    border-radius: 0.93vh;
    color: #fff;
    position: absolute;
    font-size: 3.87vh!important;
    padding: 0 1.4vh;
    border: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
/* .okInfo{    
	right: 8.7vh;
	margin-top: 2.2vh;
    position: absolute;
    display: block;
    height: 6.24vh;
    width: 8.69vh;
    cursor: pointer;
    display: inline-block;
    background-color: #ffce00;
    border-radius: 0.93vh;
    color: #fff;
    position: absolute;
    font-size: 3.87vh!important;
    padding: 0 1.4vh;
    border: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
} */
.errorInfo{
    text-align: center;
    background-color: red;
    color: #fff;
    padding: 0 .3em;
    border: 1px solid #fff;
    left: -0.5vh;
    position: absolute;
    top: 3vh;
    width: 100vh;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

@media (orientation: portrait){
	#input{
		height: 7.11vh;
		width: 30.52vh;
		border-radius: 0.65vh  0 0 0.65vh;
		font-size:4.1vh;
		margin:auto;
	}

	.textInput{
		height: 7.11vh;
		width: 30.52vh;
		border-radius: 0.65vh  0 0 0.65vh;
	}

	.textCode{
		height: 7.11vh;
		width: 30.52vh;
		font-size:1.67vh;
		margin: 0;
		line-height: 7.11vh;
	}
	.ok{
		height: 7.11vh;
		width: 8.59vh;
		border-radius:0 0.65vh 0.65vh 0;
		font-size:4.07vh!important;
		text-align: center;
		margin: auto;
	}
	#inputLicence{
		height: 7.11vh;
		width: 30.52vh;
		border-radius: 0.65vh  0 0 0.65vh;
		font-size:4.1vh;
		margin:auto;
	}

	.textInputLicence{
		height: 7.11vh;
		width: 30.52vh;
		border-radius: 0.65vh  0 0 0.65vh;
	}

	.textCodeLicence{
		height: 7.11vh;
		width: 30.52vh;
		font-size:1.67vh;
		margin: 0;
		line-height: 7.11vh;
	}
	.okLicence{
		height: 7.11vh;
		width: 8.59vh;
		border-radius:0 0.65vh 0.65vh 0;
		font-size:4.07vh!important;
		text-align: center;
		margin: auto;
	}
	.lineLicence{
		font-size: 2vh;
	}
	#lineNomEtabInput{    
		width: 32.1vh;
    	height: 2vh;
	}
	#lineCpInput{
		width: 8vh;
    	height: 2vh;
	}
	#lineVilleInput{
		width: 23.8vh;
		height: 2vh;
		margin-left: 1vh;
	}
	#linePrenomInput{        
		width: 11.8vh;
    	height: 2vh;
	}
	#lineNomInput{    
		width: 23.2vh;
		height: 2vh;
		margin-left: 1vh;
	}
	#lineFonctionInput{
		width: 39.1vh;
    	height: 2vh;
	}
	#lineMailInput{
    	width: 49.1vh;
    	height: 2vh;
	}
	.mainlicence{
		margin: 0 auto 0vh auto;
	}
	.checkBoxInput{      
		width: 3vh;
		height: 3vh;
		margin-left: 0;
	}
	.checkBoxText{    
		font-size: 2vh;
    	bottom: 0.2vh;
    	width: 42.5vh;
	}
	.okInfo{
		right: unset;
		height: 4.24vh;
		width: 5.69vh;
		font-size: 1.87vh!important;
		margin-left: 4vh;
	}
	.errorInfo{
	    width: 62vh;
		left: -4vh;
		right: 0;
		margin: 10vh auto;
		bottom: unset;
	}
	.infoUserLicence{
		width: 60vh;
		right: 0;
		left: 0;
		margin: auto;
	}
}


a{ color: #fff; }


.solid {
	height:9.26vh;
	width:9.26vh;
	border-style:solid;
	border-width:0.22vh;
	border-radius:2.5vh;
	margin-left: calc(50% - 9.26vh/2);
	position: absolute;
	cursor: pointer;
	bottom: 9vh;
}

.solid:hover {
	border-color:#ffce00;
}

@media (orientation: portrait){
	.solid {
		height:5.69vh;
		width:5.69vh;
		border-radius:1.6vh;
		margin-left: calc(50% - 5.69vh/2);
		bottom: 15vh;
	}
}

.solid::after {
	content: "";
	height:5vh;
	display:block;
	width:0.9vh;
	border-width:0.9vh;
	background-color:#FFFFFF;
	border-radius:1vh;
	-ms-transform: rotate(-45deg); /* IE 9 */
	-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
	transform: rotate(-45deg);
	left:2.6vh;
	top:2.5vh;
	position:absolute;
	animation:bounce-45 2s infinite ease-in-out;
	-webkit-animation:bounce-45 2s infinite ease-in-out;
}

.solid:hover:after{
	background: #ffce00;
}
@media (orientation: portrait){
	.solid::after {
		height:3.07vh;
		width:0.55vh;
		left:1.5976vh;
		top:1.536177vh;
	}
}

.solid::before {
	content: "";
	height:5vh;
	display:block;
	width:0.9vh;
	border-width:0.9vh;
	background-color:black;
	border-radius:1vh;
	-ms-transform: rotate(45deg); /* IE 9 */
	-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
	transform: rotate(45deg);
	left:5.6vh;
	top:2.5vh;
	background: #fff;
	position:absolute;
	animation:bounce45 2s infinite ease-in-out;
	-webkit-animation:bounce45 2s infinite ease-in-out;
}

.solid:hover:before{
	background: #ffce00;
}
@media (orientation: portrait){
	.solid::before {
		height:3.07vh;
		width:0.55vh;
		left:3.4410367vh;
		top:1.536177vh;
	}
}

@-webkit-keyframes bounce45 {
	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0) rotate(45deg);}
	40% {-webkit-transform: translateY(-30%) rotate(45deg);}
	60% {-webkit-transform: translateY(-15%) rotate(45deg);}

}

@-moz-keyframes bounce45 {
	0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0) rotate(45deg);}
	40% {-moz-transform: translateY(-30%) rotate(45deg);}
	60% {-moz-transform: translateY(-15%) rotate(45deg);}
}

@-o-keyframes bounce45 {
	0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0) rotate(45deg);}
	40% {-o-transform: translateY(-30%) rotate(45deg);}
	60% {-o-transform: translateY(-15%) rotate(45deg);}
}
@keyframes bounce45 {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0) rotate(45deg);}
	40% {transform: translateY(-30%) rotate(45deg);}
	60% {transform: translateY(-15%) rotate(45deg);}
}



@-webkit-keyframes bounce-45 {
	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0) rotate(-45deg);}
	40% {-webkit-transform: translateY(-30%) rotate(-45deg);}
	60% {-webkit-transform: translateY(-15%) rotate(-45deg);}

}

@-moz-keyframes bounce-45 {
	0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0) rotate(-45deg);}
	40% {-moz-transform: translateY(-30%) rotate(-45deg);}
	60% {-moz-transform: translateY(-15%) rotate(-45deg);}
}

@-o-keyframes bounce-45 {
	0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0) rotate(-45deg);}
	40% {-o-transform: translateY(-30%) rotate(-45deg);}
	60% {-o-transform: translateY(-15%) rotate(-45deg);}
}
@keyframes bounce-45 {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0) rotate(-45deg);}
	40% {transform: translateY(-30%) rotate(-45deg);}
	60% {transform: translateY(-15%) rotate(-45deg);}
}

/*-------------------------------------------------------------------------cadre2-------------------------------------------------------------------------------------*/

.cadre2{
	height: 100vh;
	background: #fff;
	display: block;
}

@media (orientation: portrait){
	.cadre2{
		height: 100vh;
		background-image:linear-gradient(#FFF 50%, #DADAD9);
		display: block;
	}
}


.cadre2_1{
	height: 100%;
	width: 100vh;
	border: 0px;
	border-style: solid;
	border-color: black;
	overflow: hidden;
	margin:auto;
}
@media (orientation: portrait){
	.cadre2_1{
		height: 100vh;/*100%*/
		width: 100%;
		margin:auto;
	}
}
/*-----------------------------------contenu-------------------------------------------*/
.media{
	height: 9.26vh;
	width: 100%;
	margin:  9.26vh 0 9.26vh 0;
	text-align: center;
	color:#454E53;
}

@media (orientation: portrait){
	.media{
		height: 11.50vh;
		width: 50vh;
		margin:  5vh auto 4vh auto;
		color:#454E53;
		font-size: 4.23vh!important;
		line-height: 5.75vh;
		padding-right: 1vh;
	}
}
.text1{
	font-size: 6.20vh;
	display: inline-block;
}

.text2{
	font-size: 5.4vh;
	display: inline-block;
}

.text3{
	font-size: 5.4vh;
	display: inline-block;
}

@media (orientation: portrait){
	.text1{
		font-size: 6.1vh;
		display: inline-block;
	}

	.text2{
		font-size: 4.23vh;
		display: inline-block;
	}

	.text3{
		font-size: 4.23vh;
		display: inline-block;
	}


}

.peripherique{
	height: auto;
	width: 100%;
	display: inline-block;

}

.principalAppli{
	height: auto;
	width: 27.78vh;
	margin: 0 2.77vh 0 5.56vh;
	position: absolute;
	display: inline-block;
	border-radius: 2.68vh;
	background-image:linear-gradient(#FFF 50%, #DADAD9);
	border: solid;
	border-width: 1px;
	border-color: #DADAD9;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	overflow: hidden;
}

.appli{
	width: 22.40vh;
	height: 10.1vh;
	margin: 3.11vh auto 3.38vh auto;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
}
@media (orientation: portrait){
	.appli{
		width: 30vh;
		height: 15vh;
		margin: 1.43vh auto 2.69vh auto;
		position: relative;
		background-repeat: no-repeat;
		background-size: 100%;
		display: block;
	}
}
.tablette{
	width: 18.63vh;
	height: 14.1vh;
	margin: 0 auto 2.37vh auto;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
}

.wifi{
	width: 8.37vh;
	height: 5.13vh;
	margin:auto;
	left:7vh;
	top:-5vh;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
}
.AndroidAppleWindows{
	width: 13.88vh;
	height: 3.80vh;
	margin:-4.5vh auto 2.10vh auto;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
}

.instaClick{
	width: 16.02vh;
	height: 6.86vh;
	font-size: 2.48vh;
	background-color: #dadad9;
	margin: auto;
	text-align: center;
	border-radius: 0.93vh;
	line-height: 7.1vh;
	cursor: default;
}


.boutonAccueil{
	width: 16.02vh;
	height: 6.86vh;
	font-size: 2.48vh;
	background-color:#454E53;
	margin: auto;
	text-align: center;
	border-radius: 0.93vh;
	line-height: 7.1vh;
	cursor: pointer;

}

.boutonAccueil:hover{
	color:#ffce00;
}
@media (orientation: portrait){
	.principalAppli{
		height: 18vh ;
		width: 38.17vh;
		margin: 0 auto 2.65vh auto;
		display: block;
		background-image:none;
		position: relative;
	}
	.bouton4, .bouton5, .bouton6{
		width: 7vh;
		height: 7vh;
		border-style: solid;
		border-radius: 4.31vh;
		margin: auto;
		position: relative;
		top: -4vh;
		background-color:#ffce00;
		cursor: pointer;
	}

	.bouton4::after, .bouton5::after, .bouton6::after {
		content: "";
		height:4vh;
		display:block;
		width:0.7vh;
		left:3.1vh;
		top:1.5vh;
		background: #fff;
		position:absolute;
	}

	.bouton4:hover:after, .bouton5:hover:after, .bouton6:hover:after{
		background: #454E53;
	}
	.bouton4::before,.bouton5::before,.bouton6::before {
		content: "";
		height:4vh;
		display:block;
		width:0.7vh;
		-ms-transform: rotate(90deg); /* IE 9 */
		-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
		transform: rotate(90deg);
		left:3.1vh;
		top:1.5vh;
		background: #fff;
		position:absolute;
	}
	.bouton4:hover:before,.bouton5:hover:before,.bouton6:hover:before {
		background: #454E53;
	}
}


.principalLogiciel{
	height: auto;
	width: 27.78vh;
	margin: 0 2.77vh 0 36vh;
	position: absolute;
	display: inline-block;
	border-radius: 2.68vh;
	border: solid;
	border-width: 1px;
	border-color: #DADAD9;
	background-image:linear-gradient(#FFF 50%, #DADAD9);
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	overflow: hidden;
}

@media (orientation: portrait){
	.principalLogiciel{
		height: 17.32vh;
		width: 38.17vh;
		margin: 0 auto 2.65vh auto;
		display: block;
		background-image:none;
		background-color: #FFFFFF;
		position: relative;
	}
}

.principalSite{
	height: auto;
	width: 27.78vh;
	margin: 0 2.77vh 0 67vh;
	position: absolute;
	display: inline-block;
	border-radius: 2.68vh;
	border: solid;
	border-width: 1px;
	border-color: #DADAD9;
	background-image:linear-gradient(#FFF 50%, #DADAD9);
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	overflow: hidden;
}

@media (orientation: portrait){
	.principalSite{
		height: 15.35vh;
		width: 38.17vh;
		margin: 0 auto 2.65vh auto;
		display: block;
		background-image:none;
		background-color: #FFFFFF;
		position: relative;
	}
}
/*<------------------------------------------------------------------------------>*/
.support{
	height: 40vh; /*37.04vh;*/
	width: 27.78vh;
	overflow: hidden;
}

@media (orientation: portrait){
	.support{
		height: 18vh;
		width: auto;
	}
}
.cacher{
	height: 0vh;
	width: 27.78vh;
	overflow: hidden;
}

.cacher_text{
	height: auto;
	width: 22.36vh;
	margin: auto auto 3.41vh auto;
	font-size: 2.08vh;
	text-align: center;
	color: #454E53;
}
.vert{
	color:#ffce00;
}
.rouge{
	color: red;
	margin: auto auto 2.87vh auto; /*mettre la valeur exact*/
	display: block;
}
.gris{
	font-size: 1.78vh;
	color: #454E53;
	margin: auto auto 5.06vh auto; /*mettre la valeur exact*/
	display: block;
}
.vert_petit{
	color:#ffce00;
	display: block;
	margin: auto auto 1.52vh auto; /*mettre la valeur exact*/
}
.gris_petit{
	font-size: 1.52vh;
	color: #454E53;
	margin: auto auto 8.49vh auto; /*mettre la valeur exact*/
	display: block;
}
.point{
	text-align: center;
	color: black;
	margin: auto auto 5.06vh auto;
	width:20vh;
	height:1px;
	background-color: #454E53;
}

.outilsAppli{
	width: 7.70vh;
	margin:auto auto 4.42vh auto;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
}
.logi{
	width: 22.40vh;
	height: 8.26vh;
	margin: 3.87vh auto 4.89vh auto;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
}

@media (orientation: portrait){
	.logi{
		width: 30vh;
		height: 15vh;
		margin: 2.69vh auto 3.30vh auto;
		position: relative;
		background-repeat: no-repeat;
		background-size: 100%;
		display: block;
	}
}

.ecrans-ordi-portable{
	width: 21.80vh;
	height: 13.40vh;
	margin: 0 auto 9.33vh auto;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
}

.wifi1{
	width: 8.37vh;
	height: 5.13vh;
	margin:auto;
	left:7vh;
	top:-12.2vh;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
}
.outilsLogi{
	width: 22vh;
	margin:auto auto 4.42vh auto;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
}
.installer{
	height: 10.11vh; /* 11.11vh;*/
	width: 27.78vh;
}
.text_logi{
	width: 22.41vh;
	height: auto;
	display: block;
	margin:auto auto 6.31vh auto;
	font-size: 2.08vh;
}

.grisLogi{
	font-size: 2.07vh;
	color: #454E53;
	margin: auto auto 2.25vh auto; /*mettre la valeur exact*/
	display: block;
}

.logiPcMac{
	height: 6.86vh;
	width: 27.78vh;
	text-align: center;
}
.pc{
	height: 6.86vh;
	width: 6.86vh;
	display: inline-block;
	font-size: 2.48vh;
	background-color: #dadad9;
	margin: auto;
	text-align: center;
	border-radius: 0.93vh;
	line-height: 7.1vh;
	margin: auto 2.18vh auto auto;
	cursor: default;
}

.mac{
	height: 6.86vh;
	width: 6.86vh;
	display: inline-block;
	font-size: 2.48vh;
	background-color: #dadad9;
	margin: auto;
	text-align: center;
	border-radius: 0.93vh;
	line-height: 7.1vh;
	cursor: default;
}

.site{
	width: 22.03vh;
	height: 6.20vh;
	margin: 3.87vh auto 6.9vh auto;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
}

@media (orientation: portrait){
	.site{
		width: 30vh;
		height: 15vh;
		top: -4.9vh;
		position: relative;
		background-repeat: no-repeat;
		background-size: 100%;
		display: block;
	}
}

.ecrans-ordi{
	width: 18.33vh;
	height: 16.34vh;
	margin: 0 auto 16.36vh auto;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
}

.wifi2{
	width: 4.74vh;
	height: 4.74vh;
	margin:auto;
	left:8vh;
	top:-21.4vh;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
}

.margeSite{
	margin-top: 19.4vh;
}
.outilsSite{
	width: 22vh;
	margin:auto auto 4.40vh auto;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
}
/*<------------------------------------------------------------------------------>*/
.bouton2{
	width: 8.62vh;
	height: 8.62vh;
	border-style: solid;
	border-radius: 4.31vh;
	margin: auto;
	position: relative;
	top: 54vh;
	background-color:#ffce00;
	cursor: pointer;
}

.bouton2::after {

	content: "";
	height:4.93vh;
	display:block;
	width:0.86vh;
	left:3.81vh;
	top:1.85vh;
	background: #fff;
	position:absolute;
}

.bouton2:hover:after {
	background: #454E53;
}
.bouton2::before {
	content: "";
	width:4.93vh;
	display:block;
	height:0.86vh;
	top:3.81vh;
	left:1.85vh;
	background: #fff;
	position:absolute;

}
.bouton2:hover:before {
	background: #454E53;
}



@media (orientation: portrait){
	.bouton2{
		visibility: hidden;
	}
}

.bouton3{
	width: 8.62vh;
	height: 8.62vh;
	border-style: solid;
	border-radius: 4.31vh;
	margin: auto;
	position: relative;
	top: 131.23vh;
	background-color:#ffce00;
	cursor: pointer;
}


.bouton3::after {
	content: "";
	height:4vh;
	display:block;
	width:0.9vh;
	border-width:0.9vh;
	background-color:black;
	border-radius:1vh;
	-ms-transform: rotate(40deg); /* IE 9 */
	-webkit-transform: rotate(40deg); /* Chrome, Safari, Opera */
	transform: rotate(40deg);
	left:2.8vh;
	top:2vh;
	background: #fff;
	position:absolute;
}
.bouton3:hover:after {
	background: #454E53;
}
.bouton3::before {
	content: "";
	height:4vh;
	display:block;
	width:0.9vh;
	border-width:0.9vh;
	background-color:black;
	border-radius:1vh;
	-ms-transform: rotate(-40deg); /* IE 9 */
	-webkit-transform: rotate(-40deg); /* Chrome, Safari, Opera */
	transform: rotate(-40deg);
	left:4.9vh;
	top:2vh;
	background: #fff;
	position:absolute;
}
.bouton3:hover:before {
	background: #454E53;
}
/*<------------------------------------------------------------------------------>*/
.cadre2bis,.cadre2ter,.cadre2x{
	height: 0;
	background: #fff;
	display: block;
}

@media (orientation: portrait){
	.cadre2bis,.cadre2ter, .cadre2x{
		background-image:linear-gradient(#FFF, #DADAD9);
		display: block;
	}
}

.cadre2_1bis,.cadre2_1ter,.cadre2_1x{
	height:0%;
	width: 100vh;
	background-image:linear-gradient( #fff, #DADAD9);
	margin:auto;
	overflow: hidden;
	display: block;
}

@media (orientation: portrait){
	.cadre2_1bis,.cadre2_1ter,.cadre2_1x{
		height: 100%;
		width: 100%;
	}
}

@media (orientation: portrait){
	.principalMobile{
		height: auto;
		width: auto;
		margin: 0 auto;
		position: relative;
		display: block;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		overflow: hidden;
	}

	.supportMobile{
		height: auto; /*37.04vh;*/
		width: auto;
		overflow: hidden;
	}

	.appliMobile{
		height: 14.12vh;
		width: auto;
		margin: 5.49vh auto 2.40vh auto;
		position: relative;
		background-repeat: no-repeat;
		background-size: 100%;
		display: block;
	}

	.tabletteMobile{
		height: 17.42vh;
		width: auto;
		margin: 0 auto;
		position: relative;
		background-repeat: no-repeat;
		background-size: 100%;
		display: block;
	}

	.wifiMobile{
		width: auto;
		height: 6.59vh;
		margin:auto;
		left:10.5vh;
		margin-top:-3.7vh;
		margin-bottom: 2vh;
		position: relative;
		background-repeat: no-repeat;
		background-size: 100%;
		display: block;
	}

	.AndroidAppleWindowsMobile{
		width: auto;
		height: 4.87vh;
		position: relative;
		background-repeat: no-repeat;
		background-size: 100%;
		display: block;
		margin: 0 auto 2.56vh auto;
		display: block;
	}


	.cacher_textMobile{
		height: auto;
		width: auto;
		margin: auto auto 2vh auto;
		font-size: 1.97vh;
		text-align: center;
		color: #454E53;
		line-height: 2.40vh;
	}
	.rougeMobile{
		color: red;
	}

}
.grisMobile{
	color: #454E53;
	margin: 2vh auto 2vh auto; /*mettre la valeur exact*/
	display: block;
}

.pointMobile{
	text-align: center;
	color: black;
	margin: auto auto 2vh auto;
	width:15vh;
	height:1px;
	background-color: #454E53;
}

.vert_petitMobile{
	color:#ffce00;
	margin: auto auto 1.52vh auto; /*mettre la valeur exact*/
}

.gris_petitMobile{
	font-size: 1.55vh;
	color: #454E53;
	margin: 1vh auto 1.22vh auto; /*mettre la valeur exact*/
	display: block;
}

.outilsAppliMobile{
	width: 7.70vh;
	margin:auto auto 1.52vh auto;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
}

.installerMobile{
	height: 6.71vh; /* 11.11vh;*/
	width: auto;
	margin: 0 auto 2.4vh auto;
}

.instaClickMobile{
	width: 17.30vh;
	height: 6.71vh;
	font-size: 2.68vh;
	background-color: #DADAD9;
	margin: 0 auto;
	text-align: center;
	line-height: 6.71vh;
	border-radius: 0.4vh;
	cursor: default;
}


.bouton7{
	width: 6.69vh;
	height: 6.69vh;
	border-style: solid;
	border-radius: 4.31vh;
	margin: auto;
	position: relative;
	background-color:#ffce00;
	cursor: pointer;
}


.bouton7::after {
	content: "";
	height:3vh;
	display:block;
	width:0.8vh;
	border-width:0.8vh;
	border-radius:1vh;
	-ms-transform: rotate(40deg); /* IE 9 */
	-webkit-transform: rotate(40deg); /* Chrome, Safari, Opera */
	transform: rotate(40deg);
	left:2.1vh;
	top:1.5vh;
	background: #fff;
	position:absolute;
}

.bouton7:hover:after {background:#454E53;}


.bouton7::before {
	content: "";
	height:3vh;
	display:block;
	width:0.8vh;
	border-width:0.8vh;
	border-radius:1vh;
	-ms-transform: rotate(-40deg); /* IE 9 */
	-webkit-transform: rotate(-40deg); /* Chrome, Safari, Opera */
	transform: rotate(-40deg);
	left:3.7vh;
	top:1.5vh;
	background: #fff;
	position:absolute;
}
.bouton7:hover:before {background:#454E53;}

@media (orientation: portrait){
	.logiMobile{
		height: 12.20vh;
		width: auto;
		margin: 7.25vh auto 2.50vh auto;
		position: relative;
		background-repeat: no-repeat;
		background-size: 100%;
		display: block;
	}

	.ecrans-ordi-portableMobile{
		height: 17.19vh;
		width: auto;
		margin: 0 auto;
		position: relative;
		background-repeat: no-repeat;
		background-size: 100%;
		display: block;
	}

	.wifi1Mobile{
		width: auto;
		height: 6.59vh;
		margin:auto;
		left:10.5vh;
		margin-top:-3.7vh;
		margin-bottom: 2vh;
		position: relative;
		background-repeat: no-repeat;
		background-size: 100%;
		display: block;
	}

	.outilsLogiMobile{
		width: auto;
		height: 4.87vh;
		position: relative;
		background-repeat: no-repeat;
		background-size: 100%;
		display: block;
		margin: 0 auto 2.40vh auto;
		display: block;
	}




}
.grisMobileLogi{
	color: #454E53;
	margin: 2.10vh auto 3.10vh auto; /*mettre la valeur exact*/
	display: block;
}

.grisLogiMobile{
	color: #454E53;
	margin: 3.84vh auto 2.09vh auto; /*mettre la valeur exact*/
	display: block;
	font-size: 2.68vh;
}

.pointLogiMobile{
	text-align: center;
	color: black;
	margin: auto auto 3.37vh auto;
	width:15vh;
	height:1px;
	background-color: #454E53;
}



.logiPcMac{
	height: 6.71vh;
	width: auto;
	text-align: center;
}
.pcLogi{
	height: 6.71vh;
	width: 6.71vh;
	display: inline-block;
	font-size: 2.70vh;
	background-color: #DADAD9;
	margin: auto;
	text-align: center;
	border-radius: 0.93vh;
	line-height: 7.1vh;
	margin: auto 2.18vh auto auto;
	cursor: default;
}

.macLogi{
	height: 6.71vh;
	width: 6.71vh;
	display: inline-block;
	font-size: 2.70vh;
	background-color:#DADAD9;
	margin: auto;
	text-align: center;
	border-radius: 0.93vh;
	line-height: 7.1vh;
	cursor: default;
}




.bouton8{
	width: 6.69vh;
	height: 6.69vh;
	border-style: solid;
	border-radius: 4.31vh;
	margin: auto;
	position: relative;
	background-color:#ffce00;
	cursor: pointer;
}


.bouton8::after {
	content: "";
	height:3vh;
	display:block;
	width:0.8vh;
	border-width:0.8vh;
	border-radius:1vh;
	-ms-transform: rotate(40deg); /* IE 9 */
	-webkit-transform: rotate(40deg); /* Chrome, Safari, Opera */
	transform: rotate(40deg);
	left:2.1vh;
	top:1.5vh;
	background: #fff;
	position:absolute;
}
.bouton8:hover:after {background:#454E53;}

.bouton8::before {
	content: "";
	height:3vh;
	display:block;
	width:0.8vh;
	border-width:0.8vh;
	background-color:black;
	border-radius:1vh;
	-ms-transform: rotate(-40deg); /* IE 9 */
	-webkit-transform: rotate(-40deg); /* Chrome, Safari, Opera */
	transform: rotate(-40deg);
	left:3.7vh;
	top:1.5vh;
	background: #fff;
	position:absolute;
}

.bouton8:hover:before {background:#454E53;}


@media (orientation: portrait){
	.siteMobile{
		height: 8.50vh;
		width: auto;
		margin: 7.25vh auto 5.06vh auto;
		position: relative;
		background-repeat: no-repeat;
		background-size: 100%;
		display: block;
	}

	.ecrans-ordiMobile{
		height: 20.66vh;
		width: auto;
		margin: 0 auto;
		position: relative;
		background-repeat: no-repeat;
		background-size: 100%;
		display: block;
	}

	.wifi2Mobile{
		width: auto;
		height: 6vh;
		margin:auto;
		left:10.5vh;
		margin-top:-8vh;
		margin-bottom: 6.89vh;
		position: relative;
		background-repeat: no-repeat;
		background-size: 100%;
		display: block;
	}

	.outilsSiteMobile{
		width: auto;
		height: 3.57vh;
		position: relative;
		background-repeat: no-repeat;
		background-size: 100%;
		margin: 0 auto 2.26vh auto;
		display: block;
	}
}


.pointSiteMobile{
	text-align: center;
	color: black;
	margin: 4.08vh auto 6vh auto;
	width:15vh;
	height:1px;
	background-color: #454E53;
}

.installerSiteMobile{
	height: 6.71vh; /* 11.11vh;*/
	width: auto;
	margin:8.86vh auto 2.87vh auto;
}

.instaClickSiteMobile{
	width: 17.30vh;
	height: 6.71vh;
	font-size: 2.68vh;
	color: #FFFFFF;
	background-color:#454E53;
	margin: 0 auto;
	text-align: center;
	line-height: 6.71vh;
	border-radius: 0.4vh;
	cursor: pointer;
}
.instaClickSiteMobile:hover{color: #ffce00}

.bouton9{
	width: 6.69vh;
	height: 6.69vh;
	border-style: solid;
	border-radius: 4.31vh;
	margin: auto;
	position: relative;
	background-color:#ffce00;
	cursor: pointer;
}


.bouton9::after {
	content: "";
	height:3vh;
	display:block;
	width:0.8vh;
	border-width:0.8vh;
	border-radius:1vh;
	-ms-transform: rotate(40deg); /* IE 9 */
	-webkit-transform: rotate(40deg); /* Chrome, Safari, Opera */
	transform: rotate(40deg);
	left:2.1vh;
	top:1.5vh;
	background: #fff;
	position:absolute;
}

.bouton9:hover:after {background: #454E53}

.bouton9::before {
	content: "";
	height:3vh;
	display:block;
	width:0.8vh;
	border-width:0.8vh;
	background-color:black;
	border-radius:1vh;
	-ms-transform: rotate(-40deg); /* IE 9 */
	-webkit-transform: rotate(-40deg); /* Chrome, Safari, Opera */
	transform: rotate(-40deg);
	left:3.7vh;
	top:1.5vh;
	background: #fff;
	position:absolute;
}

.bouton9:hover:before {background: #454E53 }
/*------------------------------------------------------------------------- cadre3-------------------------------------------------------------------------------------*/
.cadre3 {
	height: 196vh;
	background: #454E53;
	display: block;
}


@media (orientation: portrait){
	.cadre3{
		height: 165vh;
	}
}

.cadre3_1{
	height: 100%;
	width: 100vh;
	border: 0px;
	border-style: solid;
	border-color: black;
	overflow: hidden;
	margin:auto;
}

@media (orientation: portrait){
	.cadre3_1{
		height: 160vh;/*100%*/
		width: 100%;
	}
}
/*-----------------------------------contenu-------------------------------------------*/
.source{
	width: 89vh;
	height: 50.0625vh;
	display: block;
}

.blockIframe{
	width: 89vh;
	height: 50.0625vh;
	margin: 10.76vh auto 7vh auto;
	box-shadow:0 0 5vh rgba(0, 0, 0, 0.5);
}

@media (orientation: portrait){
	.source{
		width: 45.80vh;
		height: 25.7625vh;
	}
	.blockIframe{
		width: 45.80vh;
		height: 25.7625vh;
		margin: 7.19vh auto 5vh auto;
	}
}

.notice{
	width: 46vh;
	height: 9.26vh;
	margin: 0 auto 16vh auto;
	display: block;
	border-radius: 0.93vh;
	background-color:white;
	text-align: center;
	position:relative;

}

@media (orientation: portrait){
	.notice{
		width: 28.88vh;
		height: 5.81vh;
		margin: 0 auto 12vh auto;
	}
}

.telecharger2{
	width: 9.26vh;
	height: 9.26vh;
	position: absolute;
	background-image: url("/images/telecharger2.svg");
	background-size: 100% 200%;
	cursor: pointer;
	top: 0;
	display: block;
}

@media (orientation: portrait){
	.telecharger2{
		width: 5.81vh;
		height: 5.81vh;
	}
}
.notice:hover {
	background-color:#ffce00;
}
.notice:hover .telecharger2{
	background-position: 0 -100%;
}

.notice:hover .telechargerNotice{
	color: #fff;
}

.telechargerNotice{
	height: 9.26vh;
	width: 36.74vh;
	cursor: pointer;
	top: 0;
	left: 9.26vh;
	color: #ffce00;
	font-size: 3.35vh;
	line-height: 9.26vh;
	position: absolute;
}

@media (orientation: portrait){
	.telechargerNotice{
		height: auto;
		width: 20.47vh;
		left: 6.81vh;
		font-size: 2.10vh;
		line-height: 5.81vh
	}
}
.choisir{
	width: 89.07vh;
	height: 8.37vh;
	margin: 0 auto 5.53vh auto ;
	position: relative;

}

@media (orientation: portrait){
	.choisir{
		width: 45.80vh;
		height: 5.49vh;
		margin: 0 auto 4.10vh auto ;

	}
}

.un{
	font-size: 12.05vh;
	position: absolute;
	left:2vh;
	top:-5.3vh;
}

.deuxTrois{
	font-size: 12.05vh;
	position: absolute;
	left:1.2vh;
	top:-5.3vh;
}

@media (orientation: portrait){
	.un{
		font-size: 8.89vh;
		left:1.7vh;
		top:-4.5vh;
	}

	.deuxTrois{
		font-size: 8.89vh;
		left:0.9vh;
		top:-4.5vh;
	}
}



.mode{
	height: 8.37vh;
	width: 76vh;
	display: block;
	background: #ffce00;
	position: absolute;
	font-size: 5.19vh;
	color: #fff;
	padding: 0 0 0 1.97vh;
	right:0;
	top:0;
	box-shadow:1.02vh 1.02vh 0.74vh rgba(0, 0, 0, 0.11);
}

@media (orientation: portrait){
	.mode{
		height: 5.49vh;
		width: 35.62vh;
		font-size: 2.97vh;
		line-height: 5vh;
	}
}
.choisir_image{
	height:7.80vh;
	width:67.90vh;
	margin: 0 0 7.28vh 21.65vh;
}

@media (orientation: portrait){
	.choisir_image{
		height:5.37vh;
		width:42.57vh;
		margin: 0 auto 3.83vh auto;
	}
}
.choisirClapeofr{
	width: 19.63vh;
	height: 6.43vh;
	margin: 0 3vh 0 0;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: inline-block;
}

@media (orientation: portrait){
	.choisirClapeofr{
		width: 11.81vh;
		height: 3.32vh;
		margin: 0 3vh 0 0.5vh;
		top: -0.5vh;
	}
}
.choisirAplli{
	width: 15.28vh;
	height: 6.43vh;
	margin: 0 3vh 0 3vh;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: inline-block;
}

@media (orientation: portrait){
	.choisirAplli{
		width: 9.59vh;
		height: 4.77vh;
		margin: 0 3vh 0 1vh;
		top:1vh;
	}
}

.choisirLogi{
	width: 16.63vh;
	height: 5.76vh;
	margin: 0 0 0 2vh;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: inline-block;
}
@media (orientation: portrait){
	.choisirLogi{
		width: 10.30vh;
		height: 3.97vh;
		margin: 0 0 0 0;
	}
}
.ligne {
	width:1vh;
	height:7.80vh;
	border-left:1px solid;
	border-color: #DADAD9;
	display: inline-block;
}

@media (orientation: portrait){
	.ligne {
		height:4.37vh;
	}
}
.choisir_image_media{
	height: 15.90vh;
	width:67.90vh;
	margin: 0 0 7.28vh 21.65vh;
	position: relative;
}

@media (orientation: portrait){
	.choisir_image_media{
		height: 45.81vh;
		width: 27.25vh;
		margin: 0 auto 4.73vh auto;
		overflow: hidden;
	}
}

.choisirLivre{

	width: 13.55vh;
	height: 7.90vh;
	margin: 0 5.47vh 0 1vh;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: inline-block;
}

@media (orientation: portrait){
	.choisirLivre{
		width: 16.42vh;
		height: 9.57vh;
		margin: 5.32vh auto 5.41vh auto;
		display: block;
	}
}

.choisirCode{
	width: 18.71vh;
	height: 6.36vh;
	margin: 0 5.5vh 0 0;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: inline-block;
}

@media (orientation: portrait){
	.choisirCode{
		width: 22.66vh;
		height: 7.71vh;
		margin: 0 auto 4.41vh auto;
		display: block;
	}
}


.choisirCode2{
	width: 23.66vh;
	height: 11.58vh;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: inline-block;
	top:4vh;

}

@media (orientation: portrait){
	.choisirCode2{
		width: 27.25vh;
		height: 12.25vh;
		margin: 0 auto 0 auto;
		position: relative;
		display: block;
		top:0;

	}
}
.code_ouvrage{
	height: 3.96vh;
	width: 42.33vh;
	font-size: 2.96vh;
	color: #fff;
	position: relative;

}

@media (orientation: portrait){

	.code_ouvrage{
		height: 2.09vh;
		width: 26vh;
		font-size: 1.91vh;
		margin: 0 auto 0 auto;
		line-height: 2.09vh;
		top: -44vh;
	}
}

.rondLivre{
	width: 2.22vh;
	height: 2.22vh;
	border-style: solid;
	border-radius: 1.11vh;
	margin: auto;
	position: absolute;
	top: 7vh;
	border-width: 1px;
	border-color: #454E53;
	left: 8vh;

}
.fleche1{
	height: 0.2vh;
	width: 7.3vh;
	background: #ffce00;
	position: absolute;
	top: 7.7vh;
	left: 10.4vh;
}

.triangle1{
	content: "";
	display: block;
	position: absolute;
	top: 7.1vh;
	left: 18vh;
	width: 0;
	height: 0;
	border-left: 0.5vh solid transparent;
	border-right: 0.5vh solid transparent;
	border-bottom: 1.5vh solid #ffce00;
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

.fleche2{
	height: 0.2vh;
	width: 11.8vh;
	background: #ffce00;
	position: absolute;
	top: 7.7vh;
	left: 40vh;
}

.triangle2{
	content: "";
	display: block;
	position: absolute;
	top: 7.1vh;
	left: 52vh;
	width: 0;
	height: 0;
	border-left: 0.5vh solid transparent;
	border-right: 0.5vh solid transparent;
	border-bottom: 1.5vh solid #ffce00;
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

@media (orientation: portrait){
	.rondLivre{
		width: 3.22vh;
		height: 3.22vh;
		border-radius: 1.62vh;
		top: 9.5vh;
		left: 14vh;
	}

	.fleche1{
		height: 0.2vh;
		width: 5.3vh;
		top: 15.22vh;
		left: 13.1vh;
		-ms-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.triangle1{
		top: 17.8vh;
		left: 15.3vh;
		-ms-transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	.fleche2{
		height: 0.2vh;
		width: 2.8vh;
		top: 29.5vh;
		left: 15.1vh;
		-ms-transform: rotate(85deg);
		-webkit-transform: rotate(85deg);
		transform: rotate(85deg);
	}
	.triangle2{
		top: 30.9vh;
		left: 16.2vh;
		-ms-transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
		transform: rotate(175deg);
	}

}

.choisir_image_phone{
	width: 32.78vh;
	height: 17.14vh;
	margin: 0 0 7.28vh 38.65vh;
}

@media (orientation: portrait){
	.choisir_image_phone{
		width: 30.52vh;
		height: 15.96vh;
		margin: 0 auto 7.28vh auto;
	}
}

.choisirphone{
	width: 32.78vh;
	height: 17.14vh;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	margin: 0 auto 0 auto;
}

@media (orientation: portrait){
	.choisirphone{
		width: 30.52vh;
		height: 15.96vh;
		position: relative;
		background-repeat: no-repeat;
		background-size: 100%;
	}

}
.pointtxtMedia{
	width: 0.8vh;
	height: 0.8vh;
	background-color: white;
	border-radius: 100%;
	bottom : 0;
	left : 8vh;
	position:absolute;
}

@media (orientation: portrait){
	.pointtxtMedia{
		width: 0.7vh;
		height: 0.7vh;
		left : 6.2vh;
	}
}
/*---------------------------------------------------------------------Détection bouton-------------------------------------------------------------------------------------*/

.boutonActiver{
	background:#454E53;
	cursor: pointer;
}

.boutonActiver:hover{
	color:#ffce00
}


/*-------------------------------------------------------------------------cadre4-------------------------------------------------------------------------------------*/
.cadre4 {
	height: 26vh;
	background: #fff;
	display: block;
}

.cadre4_1{
	height: 100%;
	width: 100vh;
	border: 0px;
	border-style: solid;
	border-color: black;
	overflow: hidden;
	margin:auto;
	background: #FFFFFF;
	text-align: center
}

@media (orientation: portrait){
	.cadre4_1{
		height: 100%; /*100%*/
		width: 100%;
	}
}
/*-----------------------------------contenu-------------------------------------------*/

.logo_footer {
	height: 12vh;
	width: auto;
	margin: 3vh auto -1vh auto;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: inline-block;
}

@media (orientation: portrait){
	.logo_footer {
		height: 7.50vh;
		margin: 2vh auto 2vh auto;
		display: block;
	}
}

.referencement {
	height: auto;
	width: 56vh;
	margin: 0 0 3vh 6vh;
	font-size: 1.9vh;
	color: #818388;
	text-align: center;
	display: inline-block;
	text-align: left;
}

@media (orientation: portrait){
	.referencement {
		height: auto;
		width: 44vh;
		font-size: 1.4vh;
		display: block;
		margin: 0vh auto 2vh auto;
		text-align: center;
	}
}

.footer{
	height: 5.01vh;
	width: 100vh;
	color: #ffce00;
	margin: 0 auto;
	font-size: 4.5vh;
	text-align: center;
	line-height: 5.01vh;
}

@media (orientation: portrait){
	.footer{
		height: 1.71vh;
		width: 50.48vh;
		font-size: 1.92vh;
		display: block;
		line-height: 1.71vh;
	}
}

.txtinlineblock{
	display: inline-block;
}

a{color:#ffce00;text-decoration:none;}

/*-------------------------------------------------------------------------cadre6-------------------------------------------------------------------------------------*/

.cadre6{
	height: auto;
	background: #fff;
	display: block;
}

@media (orientation: portrait){
	.cadre6{
		height: auto;
		display: block;
	}
}

.cadre6_1{
	height: auto;
	width: 90vh;
	border: 0px;
	border-style: solid;
	border-color: black;
	overflow: hidden;
	margin: 0 auto 5vh auto;

}
@media (orientation: portrait){
	.cadre6_1{
		height: auto;/*100%*/
		width: 100%;

	}
}

.cadre6M{
	height: auto;
	background: #fff;
	display: block;
}

@media (orientation: portrait){
	.cadre6M{
		height: auto;
		display: block;
	}
}


.cadre6_1M{
	height: auto;
	width: 90vh;
	border: 0px;
	border-style: solid;
	border-color: black;
	overflow: hidden;
	margin: 0 auto 5vh auto;
}
@media (orientation: portrait){
	.cadre6_1M{
		height: auto;
		width: 100%;
	}
}
/*-----------------------------------contenu-------------------------------------------*/
.titreGeneral{
	height: 5.63vh;
	width: auto;
	color: #454E53;
	margin: 0 auto 2.18vh 0;
	font-size: 5.37vh;
}
.titreGeneral2{
	height: 5.63vh;
	width: auto;
	color: #FFF;
    margin: 0 auto 0.18vh 0;
	font-size: 3.8vh;
}
.ligneVertical {
	text-align: center;
	color: black;
	margin: 0 auto 1vh 0;
	width: 90vh;
	height: 0.2vh;
	background-color:#DADAD9;
}

.textCgu{
	height: auto;
	width: 90vh;
	background: #FFFFFF;
	color: #454E53;
	text-align: justify;
	font-size: 2.04vh;
}
.textPara{
	font-size: 1.8vh;
	color: #454E53;
}

h2{
	font-size: 2.5vh;
}


li {list-style-type: none;text-indent: -2vh; margin-left:6vh;}
li:before {
	content: "-"; /* on affiche une chaîne de caractère */
	margin: 0 1.4vh 0 0;
}


table{
	border:1px solid;
	border-color: #454E53;
	font-size: 1.5vh;
}
th{
	border: 1px solid; /* auront une bordure de 1px */
	width: 100vh;
	text-align: center;
}

td{
	border: 1px solid; /* auront une bordure de 1px */
	width: 100vh;
	text-align: center;
}

@media (orientation: portrait){
	.titreGeneral{
		height: auto;
		width: 47.20vh;
		margin: 3.29vh auto 2.01vh auto;
		font-size: 4.65vh;
	}
	.titreGeneral2{
		height: auto;
		width: 47.20vh;
		margin: 3.29vh auto 2.01vh auto;
		font-size: 4vh;
	}
	.ligneVertical {
		width: 50vh;
		margin: 0 auto 4.02vh auto;


	}

	.textCgu{
		width: 50vh;
		margin: 0 auto 0 auto;
		font-size: 1.97vh;
	}
}



/*-------------------------------------------------------------------------cadre7-------------------------------------------------------------------------------------*/
.cadre7{
	height: auto;
	background: #fff;
	display: block;
}

@media (orientation: portrait){
	.cadre7{
		height: auto;
		display: block;
	}
}


.cadre7_1{
	height: auto;
	width: 100vh;
	border: 0px;
	border-style: solid;
	border-color: black;
	overflow: hidden;
	margin: 0 auto 2.8vh auto;

}
@media (orientation: portrait){
	.cadre7_1{
		height: auto;/*100%*/
		width: 100%;
	}

	h2{
		font-size: 2vh;
	}
}
/*-----------------------------------contenu-------------------------------------------*/

.pointLi {
	width: 1.8vh;
	height: 1.8vh;
	background-color: #ffce00;
	border-radius: 100%;
	display: inline-block;
	margin: 0 0 0 2vh;
}
.para1 {
	width: auto;
	display: block;
	margin: -3.5vh 0 2.20vh 7.41vh;
	font-size: 2.04vh;
}

@media (orientation: portrait){
	.pointLi {
		width: 1.10vh;
		height: 1.10vh;
		margin: 0;
	}
	.para1 {
		width: auto;
		display: block;
		font-size: 2.04vh;
		margin: -3vh 0 2.20vh 3.20vh;
	}
}


/*-------------------------------------------------------------------------cadre8-------------------------------------------------------------------------------------*/
.cadre8{
	height: auto;
	background: #fff;
	display: block;
}

@media (orientation: portrait){
	.cadre8{
		height: auto;
		display: block;
	}
}


.cadre8_1{
	height: auto;
	width: 90vh;
	border: 0px;
	border-style: solid;
	border-color: black;
	overflow: hidden;
	margin: 0 auto 0 auto;
}
@media (orientation: portrait){
	.cadre8_1{
		height: auto;/*100%*/
		width: 100%;
	}
}
/*-----------------------------------contenu-------------------------------------------*/

.formulaireCgu
{
	display: inline-block;
	width: 40vh;
	font-size: 2.5vh;
	color: #454E53;
}

.formulaireCguM{
	text-align: center;
	font-size: 3vh;
	color: #454E53;
	margin: 0 auto 1.5vh auto;

}

.inputFormulaireCgu{
	height: 3.7vh;
	width: 50vh;
	border-radius: 0.93vh;
	border: 1px solid;
	border-color: #454E53;
	margin: 0 auto 1.5vh auto;
	font-size: 3vh;
	color: #454E53;
	padding:  0 2vh;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;

}

.textarea{
	height: 20vh;
	width: 90vh;
	border-radius: 0.93vh;
	border:1px solid;
	font-size: 3vh;
	resize:none;
	padding: 2vh;
	color: #454E53;
	margin: 0 0 1.5vh 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.valider{
	height: 10.24vh;
	width: 25vh;
	cursor: pointer;
	background-color: #ffce00;
	border-radius: 0.93vh;
	color: #fff;
	font-size: 5.87vh;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-webkit-appearance: none;
	margin: 0 auto 0 auto;
	border: 0;
	display: block;
	/*padding: 1vh;*/


}
.valider:hover{
	color:#454E53;
}
@media (orientation: portrait){
	.textarea{
		height: 30vh;
		width: 50vh;
	}

	.valider{
		height: 5.12vh;
		width: 15vh;
		border-radius: 0.46vh;
		color: #fff;
		font-size: 2.93vh;
		padding-bottom: 0.5vh;
	}
}

.alert{
	background: red;
	color: #FFFFFF;
	font-size: 2vh;
	position: absolute;
	top: 10.5vh;
	width: 90vh;
	max-height: 4.8vh;
	text-align: center;
	overflow: hidden;
	line-height: 4.8vh;
	border-radius: 0.93vh;
}

.succes{
	background: #ffce00;
	color: #FFFFFF;
	font-size: 2vh;
	position: absolute;
	top: 10.5vh;
	width: 90vh;
	max-height: 4.8vh;
	text-align: center;
	overflow: hidden;
	line-height: 4.8vh;
	border-radius: 0.93vh;
}
@media (orientation: portrait){
	.alert{
		background: red;
		color: #FFFFFF;
		font-size: 2.5vh;
		position: absolute;
		top: 15vh;
		width: 50vh;
		max-height: 3vh;
		text-align: center;
		overflow: hidden;
		line-height: 3vh;;
	}

	.succes{
		background: #ffce00;
		color: #FFFFFF;
		font-size: 2.5vh;
		position: absolute;
		top: 15vh;
		width: 50vh;
		max-height: 3vh;
		text-align: center;
		overflow: hidden;
		line-height: 3vh;
	}

}
/*-------------------------------------------------------------------------footer cgu-------------------------------------------------------------------------------------*/

.cadre_footer {
	height: 26vh;
	background: #454E53;
	display: block;
}
@media (orientation: portrait){
	.cadre_footer {
		height: 16vh;
	}
}
.cadre_footer1{
	height: auto;
	width: 100vh;
	border: 0px;
	border-style: solid;
	border-color: black;
	overflow: hidden;
	margin:auto;
	text-align: center;
}

@media (orientation: portrait){
	.cadre_footer1{
		height: 100%;
		width: 100%;
	}
}

/*-----------------------------------contenu-------------------------------------------*/

.logoCgufooter{
	width: auto;
	height: 12vh;
	margin: 3vh auto 1vh auto;
	background: #454E53;
	text-align: center;
	position: relative;
	opacity: 0.3;
}

@media (orientation: portrait){
	.logoCgufooter{
		height: 7.50vh;
		width: auto;
		margin: 2vh auto 2vh auto;
		background: #454E53;
		text-align: center;
		position: relative;
		opacity: 0.3;
	}

}



.popup_block{
	display: none; /*--masqué par défaut--*/
	height: 81vh;
	width: 100vh;
	top:10vh;
	overflow-x:  hidden;
	overflow-y:auto;
	background: #fff;
	padding: 1.85vh;
	border: 2vh solid #dadad9;
	/*float: left;*/
	position: fixed;
	z-index: 9999;
	/*--Les différentes définitions de Box Shadow en CSS3--*/
	-webkit-box-shadow: 0 0 1.85vh #000;
	-moz-box-shadow: 0px 0px 1.85 #000;
	box-shadow: 0 0 1.85vh #000;
	/*--Coins arrondis en CSS3--*/
	border-radius: 0.93vh;
	-webkit-border-radius: 0.93vh;
	-moz-border-radius: 0.93vh;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.popup_licence{
	display: none; /*--masqué par défaut--*/
	height: 45vh;
	width: 100vh;
	top:10vh;
	overflow-x:  hidden;
	overflow-y:auto;
	background: #454E53;
    padding: 1.85vh 5vh;
	/*border: 2vh solid #dadad9;*/
	/*float: left;*/
	position: fixed;
	z-index: 9999;
	/*--Les différentes définitions de Box Shadow en CSS3--*/
	-webkit-box-shadow: 0 0 1.85vh #000;
	-moz-box-shadow: 0px 0px 1.85 #000;
	box-shadow: 0 0 1.85vh #000;
	/*--Coins arrondis en CSS3--*/
	border-radius: 0.93vh;
	-webkit-border-radius: 0.93vh;
	-moz-border-radius: 0.93vh;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

@media (orientation: portrait){
	.popup_block {
		display: none;
		height: 100vh;
		width: 100%;
		top: 0vh;
		border: 0;
		border-radius: 0;
	}
	.popup_licence {
		display: none;
		height: 100vh;
		width: 100%;
		top: 0vh;
		border: 0;
		border-radius: 0;
	}
}


.cguClass,.cguContact,.cguMentions,.cguFaq{
	display: inline-block;
	cursor: pointer;
}


#fade { /*--Masque opaque noir de fond--*/
	display: none; /*--masqué par défaut--*/
	background: #000;
	position: fixed; left: 0; top: 0;
	width: 100%;
	height: 100%;
	opacity: .80;
	z-index: 999;
}

.btn_close {
	display:none;
	position: fixed;
	top: 8vh;
	margin-left: 98vh;
	width: 4vh;
	height: 4vh;
	background-image: url(../images/close.svg);
	background-size: 100% 200%;
	border-radius: 10%;
	z-index: 99999999;
	cursor: pointer;
}

.btn_close:hover
{
	background-position: 0% -100%;
}
@media (orientation: portrait){
	.btn_close {
		top: 2vh;
		margin-left: 90vw;
		width: 6vh;
		right: 2vh;
		height: 6vh;


	}

}

.dispo{
	height: 0;
	width: 26vh;
	margin: auto;
	text-align: center;
	color: black;
	font-size: 1vh;
}

@media (orientation: portrait){
	.dispo{
		height: 0;
		width: 30vh;
		margin: auto;
		text-align: center;
		color: black;
		font-size: 1vh;
	}

}



main form.code label
{
	display:block;font-size:1.2em;margin-top:.3em
}
main form.code label.error
{
	text-align:center;
	background-color:red;color:#fff;padding:0 .3em;border:1px solid #fff
}

main form.codelicence label
{
	display:block;font-size:1.2em;margin-top:.3em
}
main form.codelicence label.error
{
	text-align:center;
	background-color:red;color:#fff;padding:0 .3em;border:1px solid #fff
}

.Clapeofr{
	width: 20vh;
	height: 7vh;
	/* background: red;*/
	margin: 0 auto 3vh auto;
}


.ClapeofrFaq{
	width: 19.63vh;
	height: 6.43vh;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: inline-block;
}

.clapeologiApli{
	width: 41.4vh;
	height: 8vh;
	/*background: red;*/
	margin: 0 auto 4.5vh auto;
	text-align: center;
}

.ClapeoLogiFaq{
	width: 19.63vh;
	height: 6.43vh;
	margin: 0 0 0 2vh;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: inline-block;
}

.ClapeoAppliFaq{
	width: 15.63vh;
	height: 6.43vh;
	margin: 0 3vh 0 0;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	display: inline-block;
}

.ligneFaq {
	width: 1vh;
	height: 7.80vh;
	border-left: 1px solid;
	border-color: #454E53;;
	display: inline-block;
}