/* Ma  pointure */


/* pages mesures */
.mgentete{
	margin-left: 10%;
	margin-right: 10%;
}

/* pages mesures */
.separationmesure{
	clear: both;
	width: 80%;
	margin: 0 0 1.5rem 10%;
	padding:1.5rem 0 0 0;
	border-bottom: 1px solid rgba(121,121,121,1);
}

.modeleH {
	width: 18%;
	float: left;
	margin:0 0 0 41%;
	padding: 1.5rem 0;
}
.modeleH img{
	width: 100%;	
	margin:0;
}

.modeleL {
	width: 25%;
	float: left;
	margin:0 0 0 37.5%;
	padding: 1.5rem 0;
}
.modeleL img{
	width: 100%;	
	margin:0;
}


.demoH {
	width: 18%;
	float: left;
	margin:0 0 0 10%;
}
.demoH img{
	width: 100%;	
	margin:0;
}

.textedemoH{
	width:60%;
	margin:0 0 0 2%;
	float:left;
}
.demoL {
	width: 25%;
	float: left;
	margin:0 0 0 10%;
}
.demoL img{
	width: 100%;	
	margin:0;
}

.textedemoL{
	width:53%;
	margin:0 0 0 2%;
	float:left;
}

.alerte{
	clear: both;
	width:70%;
	margin:1rem auto;
	padding:1rem;
	border: 2px solid #BC0000;
}

.boitesurinstruction{
	float:left;
	width: 90%;
	margin-left: 5%;
}
.boiteinstruction{
	float:left;
	width: 66%;
	padding-top: 2rem;
	margin:0;
}

.separationblocmesure{
	clear: both;
	width: 90%;
	padding: 2rem 0 0 0;
	margin: 0 0 2.5rem 5%;
	border-bottom: 1px solid rgba(121,121,121,1);  
}

/* 1 boite en hauteur pour les démos */
.msdemo1H{
	float:left;
	width: 30%;
	margin:0;
}
.msdemo1H img{
	width:92%;
	margin:0;
}

/* 1 boite en largeur pour les démos */
.msdemo1L{
	float:left;
	width: 40%;
	margin:0;
}
.msdemo1L img{
	width:92%;
	margin:0;
}

/* 3 boites en hauteur pour les démos */
.msdemo3H{
	float:left;
	width: 28%;
	margin:0 0 0 4%;
}
.msdemo3H img{
	width: 100%;
	margin:0;
}

/* Préférences */
form{
	width: 100%;
}

.claviercivilite{
	width: 7rem;
	margin:auto;
	padding:1.5rem 0 1.5rem 0;
}
.clavierage{
	width: 20rem;
	margin:auto;
	padding:1.5rem 0 1.5rem 0;
}
.clavierunitemesure{
	width: 13rem;
	margin:auto;
	padding:1.5rem 0 1.5rem 0;
}

.claviergrandeur{
	width: 58rem;
	margin:auto;
	padding:1.5rem 0 1.5rem 0;
}
.claviergrandeur_in{
	width: 34rem;
	margin:auto;
	padding:1.5rem 0 1.5rem 0;
}

.clavierepaisseur{
	width: 11rem;
	margin:auto;
	padding:1.5rem 0 1.5rem 0;
}

.clavierhalluxvalgus{
	width: 16rem;
	margin:auto;
	padding:1.5rem 0 1.5rem 0;
}

.clavieressayage{
	width: 46rem;
	margin:auto;
	padding:1.5rem 0 1.5rem 0;
}

.claviersysteme{
	width: 19rem;
	margin:auto;
	padding:1.5rem 0 1.5rem 0;
}

.clavierpt{
	width: 38rem;
	margin:auto;
	padding:1.5rem 0 1.5rem 0;
}
.clavierptbetween{
	width: 41rem;
	margin:auto;
	padding:1.5rem 0 1.5rem 0;
}

.clavierrecap{
	width: 20rem;
	margin:auto;
	padding:1.5rem 0 1.5rem 0;
}

.clavierpreferences{
	width: 36rem;
	margin:auto;
	padding:1.5rem 0 1.5rem 0;
}


.clavier_inch{
	width: 46rem;
	margin:auto;
	padding:1.5rem 0 1.5rem 0;
}
.clavier_inch .touche, .clavier_inch .toucheactive{
	width: 90%;
}

.clavier_millimetre{
	width: 50rem;
	margin:auto;
	padding:1.5rem 0 1.5rem 0;
}

.clavier_centimetre{
	width: 44rem;
	margin:auto;
	padding:1.5rem 0 1.5rem 0;
}
.clavier_centimetre .division10{
	width:  12.5%;
}



.clavieradmin{
	width: 100%;
}



.division1{
	width: 100%;
	float:left;
	margin:0;
}
.division2{
	width: 50%;
	float:left;
	margin:0;
}
.division3{
	width: 33.33%;
	float: left;
	margin:0;
}
.division4{
	width: 25%;
	float: left;
	margin:0;
}
.division5{
	width: 20%;
	float: left;
	margin:0;
}
.division6{
	width: 16.66%;
	float: left;
	margin:0;
}
.division8{
	width: 12.5%;
	float: left;
	margin:0;
}
.division10{
	width: 10%;
	float: left;
	margin:0;
}

.claviergauchegabarit{
	width: 18%;
	padding:0.5rem 2% 0 0;
	float:left;

}

.clavierdroitgabarit{
	width: 80%;
	float:left;
}
#content .clavierdroitgabarit li{
	margin-top: 0.9rem;
	font-size: 1.3rem;
}

.divisiongabarit{
	width: 70px;
	float: left;
	margin:0;
}



/*
.margin33{
	margin-left:33.33%;
}
*/

.touche{
	width: 80%;
	margin: 0.5rem auto;
	border: solid 1px #404040;
	padding: 0.5rem 0 0.5rem 0;
	border-radius: 5px;
	box-shadow: 6px 6px 3px rgba(0,0,0,0.2);	
}
.touche:hover{
	border: solid 1px #B69731;	
}
.touche h2{
	margin: 0;
}
.touche:hover h2{
	color: #B69731;
	margin: 0;
}

.toucheactive{
	width: 80%;
	margin: 0.5rem auto;
	border: solid 1px #B69731;
	padding: 0.5rem 0 0.5rem 0;
	border-radius: 5px;
	box-shadow: 6px 6px 3px rgba(0,0,0,0.2);	
}
.toucheactive:hover{
	border: solid 1px #404040;	
}
.toucheactive h2{
	color: #B69731;
	margin: 0;
}
.toucheactive:hover h2{
	color: #404040;
	margin: 0;
}

.toucheverte{
	width: 80%;
	margin: 0.5rem auto;
	border: solid 1px #2F9428;
	padding: 0.5rem 0 0.5rem 0;
	border-radius: 5px;
	box-shadow: 6px 6px 3px rgba(0,0,0,0.2);	
}
.toucheverte:hover{
	border: solid 1px #404040;	
}
.toucheverte h2{
	color: #2F9428;
	margin: 0;
}
.toucheverte:hover h2{
	color: #404040;
	margin: 0;
}

.toucherouge{
	width: 80%;
	margin: 0.5rem auto;
	border: solid 1px #C51919;
	padding: 0.5rem 0 0.5rem 0;
	border-radius: 5px;
	box-shadow: 6px 6px 3px rgba(0,0,0,0.2);	
}
.toucherouge:hover{
	border: solid 1px #404040;	
}
.toucherouge h2{
	color: #C51919;
	margin: 0;
}
.toucherouge:hover h2{
	color: #404040;
	margin: 0;
}

.touchebleu{
	width: 80%;
	margin: 0.5rem auto;
	border: solid 1px #3336AA;
	padding: 0.5rem 0 0.5rem 0;
	border-radius: 5px;
	box-shadow: 6px 6px 3px rgba(0,0,0,0.2);	
}
.touchebleu:hover{
	border: solid 1px #404040;	
}
.touchebleu h2{
	color: #3336AA;
	margin: 0;
}
.touchebleu:hover h2{
	color: #404040;
	margin: 0;
}


.touche2{
	width: 90%;
	margin: 0.5rem auto;
	border: solid 1px #404040;
	padding: 0.5rem 0 0.5rem 0;
	border-radius: 5px;
	box-shadow: 6px 6px 3px rgba(0,0,0,0.2);	
}
.touche2:hover{
	border: solid 1px #B69731;	
}
.touche2 h2{
	margin: 0;
}
.touche2:hover h2{
	color: #B69731;
	margin: 0;
}

.touche2active{
	width: 90%;
	margin: 0.5rem auto;
	border: solid 1px #B69731;
	padding: 0.5rem 0 0.5rem 0;
	border-radius: 5px;
	box-shadow: 6px 6px 3px rgba(0,0,0,0.2);	
}
.touche2active:hover{
	border: solid 1px #404040;	
}
.touche2active h2{
	color: #B69731;
	margin: 0;
}
.touche2active:hover h2{
	color: #404040;
	margin: 0;
}


/* Panneau masqué : Utilisation des bandes de papier */
.circonference{
	cursor: pointer;
}

.mesurecirconference {
   	max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.2s ease-out; /* Safari */
    transition: max-height 0.2s ease-out;
}


@media all and (max-width:367px) {

	/* Iphone 3 4 5 portrait 320px */

	/* pages mesures */
	.mgentete{
		margin:0 1rem 0 1rem;
	}

	.separationmesure{
		width: 90%;
		margin: 0 0 1.5rem 5%;
		padding:1.5rem 0 0 0;
	}

	.modeleH {
		width: 100%;
		margin: 0;
	}
	.modeleH img{
		width: 60%;	
		margin:0 0 0 20%;
	}

	.modeleL {
		width: 100%;
		margin: 0;
	}
	.modeleL img{
		width: 80%;	
		margin:0 0 0 10%;
	}	

	.demoH {
		width: 100%;
		float: left;
		margin:0;
	}
	.demoH img{
		width: 60%;	
		margin:0 0 0 20%;
	}

	.textedemoH{
		width:94%;
		margin-left: 3%;
	}

	.demoL {
		width: 100%;
		float: left;
		margin:0;
	}
	.demoL img{
		width: 80%;	
		margin:0 0 0 10%;
	}

	.textedemoL{
		width:94%;
		margin-left: 3%;
	}

	.alerte{
		width:90%;
		margin:0 auto;
		padding:0.5rem;
		border: 1px solid #BC0000;
	}

	.boitesurinstruction{
		float:left;
		width: 90%;
		margin-left: 5%;
	}
	.boiteinstruction{
		float:left;
		width: 100%;
		margin:0;
	}

	.separationblocmesure{
		width: 90%;
		padding: 2rem 0 0 0;
		margin: 0 0 2.5rem 5%;
	}

	.msdemo1H{
		float:left;
		width:100%;
		margin:0;
		clear:both;
	}
	.msdemo1H img{
		width:68%;
		margin:0 0 1rem 16%;
	}

	.msdemo1L{
		float:left;
		width:100%;
		margin:0;
	}
	.msdemo1L img{
		width:80%;
		margin:0 0 1rem 10%;
	}

	.msdemo3H{
		float:left;
		width: 75%;
		margin:0 12.5% 1.5rem 12.5%;
	}

	.clavierage{
		width: 17rem;
	}

	.clavierunitemesure{
		width: 10rem;
	}

	.claviergrandeur{
		width: 19rem;
	}
	.claviergrandeur .division10{
		width: 25%;
	}
	.claviergrandeur .touche, .claviergrandeur .toucheactive{
		width: 90%;
	}

	.claviergrandeur_in{
		width: 21rem;
	}
	.claviergrandeur_in .division6{
		width: 20%;
	}
	.claviergrandeur_in .touche, .claviergrandeur_in .toucheactive{
		width: 90%;
	}

	.clavierepaisseur{
		width: 9rem;
	}

	.clavierhalluxvalgus{
		width: 13rem;
	}

	.clavieressayage{
		width: 20rem;
	}
	.clavieressayage .touche, .clavieressayage .toucheactive{
		width: 90%;
	}

	.claviersysteme{
		width: 16rem;
	}

	.clavierpt{
		width: 19rem;
	}
	.clavierpt .division6{
		width: 25%;
	}
	.clavierptbetween{
		width: 18rem;
	}
	.clavierptbetween .division2{
		width: 100%;
	}

	.clavierrecap{
		width: 17rem;
	}

	.clavierpreferences{
		width: 18rem;
	}
	.clavierpreferences .touche, .clavierpreferences .toucheactive{
		width: 92%;
	}

	.clavier_inch{
		width: 18rem;
	}
	.clavier_inch .division8{
		width: 25%;
	}

	.clavier_millimetre{
		width: 19rem;
	}
	.clavier_millimetre .division10{
		width:  20%;
	}
	.clavier_millimetre .touche, .clavier_millimetre .toucheactive{
		width: 90%;
	}

	.clavier_centimetre{
		width: 19rem;
	}
	.clavier_centimetre .division10{
		width:  25%;
	}
	.clavier_centimetre .touche, .clavier_centimetre .toucheactive{
		width: 90%;
	}

	.nomob{
		display:none;
	}
	
}

@media all and (min-width:368px) and (max-width:467px){

	/* Iphone 6 portrait 375px */

	/* pages mesures */
	.mgentete{
		margin:0 1rem 0 1rem;
	}

	.separationmesure{
		width: 90%;
		margin: 0 0 1.5rem 5%;
		padding:1.5rem 0 0 0;
	}

	.modeleH {
		width: 100%;
		margin: 0;
	}
	.modeleH img{
		width: 60%;	
		margin:0 0 0 20%;
	}

	.modeleL {
		width: 100%;
		margin: 0;
	}
	.modeleL img{
		width: 80%;	
		margin:0 0 0 10%;
	}

	.demoH {
		width: 100%;
		float: left;
		margin:0;
	}
	.demoH img{
		width: 60%;	
		margin:0 0 0 20%;
	}

	.textedemoH{
		width:94%;
		margin-left: 3%;
	}

	.demoL {
		width: 100%;
		float: left;
		margin:0;
	}
	.demoL img{
		width: 80%;	
		margin:0 0 0 10%;
	}

	.textedemoL{
		width:94%;
		margin-left: 3%;
	}

	.alerte{
		width:90%;
		margin:0 auto;
		padding:0.5rem;
		border: 1px solid #BC0000;
	}

	.boitesurinstruction{
		float:left;
		width: 90%;
		margin-left: 5%;
	}
	.boiteinstruction{
		float:left;
		width:100%;
		margin:0%;
	}

	.separationblocmesure{
		width: 90%;
		padding: 2rem 0 0 0;
		margin: 0 0 2.5rem 5%;
	}

	.msdemo1H{
		float:left;
		width:100%;
		margin:0;
		clear:both;
	}
	.msdemo1H img{
		width:68%;
		margin:0 0 1rem 16%;
	}

	.msdemo1L{
		float:left;
		width:100%;
		margin:0;
	}
	.msdemo1L img{
		width:80%;
		margin:0 0 1rem 10%;
	}

	.msdemo3H{
		float:left;
		width: 75%;
		margin:0 12.5% 1.5rem 12.5%;
	}

	.clavierage{
		width: 17rem;
	}

	.clavierunitemesure{ 
		width: 10rem;
	}

	.claviergrandeur{
		width: 20rem;
	}
	.claviergrandeur .division10{
		width: 25%;
	}
	.claviergrandeur .touche, .claviergrandeur .toucheactive{
		width: 90%;
	}

	.claviergrandeur_in{
		width: 22rem;
	}
	.claviergrandeur_in .division6{
		width: 20%;
	}
	.claviergrandeur_in .touche, .claviergrandeur_in .toucheactive{
		width: 90%;
	}

	.clavierepaisseur{
		width: 9rem;
	}

	.clavierhalluxvalgus{
		width: 13rem;
	}
	
	.clavieressayage{
		width: 20rem;
	}
	.clavieressayage .touche, .clavieressayage .toucheactive{
		width: 90%;
	}


	.claviersysteme{
		width: 16rem;
	}

	.clavierpt{
		width: 20.5rem;
	}
	.clavierpt .division6{
		width: 25%;
	}
	.clavierptbetween{
		width: 18rem;
	}
	.clavierptbetween .division2{
		width: 100%;
	}

	.clavierrecap{
		width: 17rem;
	}

	.clavierpreferences{
		width: 20rem;
	}
	.clavierpreferences .touche, .clavierpreferences .toucheactive{
		width: 90%;
	}
	

	.clavier_inch{
		width: 19rem;
	}
	.clavier_inch .division8{
		width: 25%;
	}

	.clavier_millimetre{
		width: 20rem;
	}
	.clavier_millimetre .division10{
		width:  20%;
	}
	.clavier_millimetre .touche, .clavier_millimetre .toucheactive{
		width: 90%;
	}

	.clavier_centimetre{
		width: 20rem;
	}
	.clavier_centimetre .division10{
		width:  25%;
	}
	.clavier_centimetre .touche, .clavier_centimetre .toucheactive{
		width: 90%;
	}

	.nomob{
		display:none;
	}

}

@media all and (min-width:468px) and (max-width:567px){

	/* iphone 3 4 paysage 480px */

	/* pages mesures */
	.mgentete{
		margin-left: 6.5%;
		margin-left: 6.5%;
	}

	.separationmesure{
		width: 86%;
		margin: 0 0 1.5rem 7%;
		padding:1.5rem 0 0 0;
	}

	.modeleH {
		width: 100%;
		margin: 0;
	}
	.modeleH img{
		width: 40%;	
		margin:0 0 0 30%;
	}

	.modeleL {
		width: 100%;
		margin: 0;
	}
	.modeleL img{
		width: 60%;	
		margin:0 0 0 20%;
	}

	.demoH {
		width: 100%;
		float: left;
		margin:0;
	}
	.demoH img{
		width: 40%;	
		margin:0 0 0 30%;
	}

	.textedemoH{
		width:90%;
		margin-left: 5%;
	}

	.demoL {
		width: 100%;
		float: left;
		margin:0;
	}
	.demoL img{
		width: 60%;	
		margin:0 0 0 20%;
	}

	.textedemoL{
		width:90%;
		margin-left: 5%;
	}

	.alerte{
		width:90%;
		margin:0 auto;
		padding:0.5rem;
		border: 1px solid #BC0000;
	}

	.boitesurinstruction{
		float:left;
		width: 90%;
		margin-left: 5%;
	}
	.boiteinstruction{
		float:left;
		width: 100%;
		margin:0;
	}

	.separationblocmesure{
		width: 90%;
		padding: 2rem 0 0 0;
		margin: 0 0 2.5rem 5%;
	}

	.msdemo1H{
		float:left;
		width:100%;
		margin:0;
		clear:both;
	}
	.msdemo1H img{
		width:48%;
		margin:0 0 1rem 26%;
	}

	.msdemo1L{
		float:left;
		width:100%;
		margin:0;
	}
	.msdemo1L img{
		width:70%;
		margin:0 0 1rem 15%;
	}

	.msdemo3H{
		float:left;
		width: 56%;
		margin:0 22% 1.5rem 22%;
	}

	.claviergrandeur{
		width: 26rem;
	}
	.claviergrandeur .division10{
		width: 20%;
	}
	.claviergrandeur .touche, .claviergrandeur .toucheactive{
		width: 90%;
	}

	.claviergrandeur_in{
		width: 26rem;
	}
	.claviergrandeur_in .division6{
		width: 20%;
	}
	.claviergrandeur_in .touche, .claviergrandeur_in .toucheactive{
		width: 90%;
	}

	.clavierepaisseur{
		width: 9rem;
	}

	.clavierhalluxvalgus{ 
		width: 13rem;
	}

	.clavieressayage{
		width: 20rem;
	}
	.clavieressayage .touche, .clavieressayage .toucheactive{
		width: 90%;
	}

	.claviersysteme{
		width: 16rem;
	}

	.clavierpt{
		width: 24rem;
	}
	.clavierpt .division6{
		width: 25%;
	}
	.clavierptbetween{
		width: 18rem;
	}
	.clavierptbetween .division2{
		width: 100%;
	}

	.clavierrecap{
		width: 17rem;
	}

	.clavierpreferences{
		width: 27rem;
	}
	.clavierpreferences .division1{
		width: 80%;
		margin-left: 10%;
	}


	.clavier_inch{
		width: 22rem;
	}
	.clavier_inch .division8{
		width: 25%;
	}

	.clavier_millimetre{
		width: 24rem;
	}
	.clavier_millimetre .division10{
		width:  20%;
	}

	.clavier_centimetre{
		width: 26rem;
	}
	.clavier_centimetre .division10{
		width:  16.66%;
	}

	.nomob{
		display:none;
	}


}

@media all and (min-width:568px) and (max-width:667px) {

	/* iphone 5 / 7 paysage 568px */

	/* pages mesures */
	.mgentete{
		margin-left: 6.5%;
		margin-right: 6.5%;
	}

	.separationmesure{
		width: 86%;
		margin: 0 0 1.5rem 7%;
		padding:1.5rem 0 0 0;
	}

	.modeleH {
		width: 100%;
		margin: 0;
	}
	.modeleH img{
		width: 34%;	
		margin:0 0 0 33%;
	}

	.modeleL {
		width: 100%;
		margin: 0;
	}
	.modeleL img{
		width: 50%;	
		margin:0 0 0 25%;
	}

	.demoH {
		width: 100%;
		float: left;
		margin:0;
	}
	.demoH img{
		width: 34%;	
		margin:0 0 0 33%;
	}

	.textedemoH{
		width:90%;
		margin-left: 5%;
	}

	.demoL {
		width: 100%;
		float: left;
		margin:0;
	}
	.demoL img{
		width: 50%;	
		margin:0 0 0 25%;
	}

	.textedemoL{
		width:90%;
		margin-left: 5%;
	}

	.alerte{
		width:90%;
		margin:0 auto;
		padding:0;
		border: 1px solid #BC0000;
	}

	.boitesurinstruction{
		float:left;
		width: 90%;
		margin-left: 5%;
	}
	.boiteinstruction{
		float:left;
		width: 100%;
		margin:0;
	}

	.separationblocmesure{
		width: 90%;
		padding: 2rem 0 0 0;
		margin: 0 0 2.5rem 5%;
	}

	.msdemo1H{
		float:left;
		width:100%;
		margin:0;
		clear:both;
	}
	.msdemo1H img{
		width:38%;
		margin:0 0 1rem 31%;
	}

	.msdemo1L{
		float:left;
		width:100%;
		margin:0;
	}
	.msdemo1L img{
		width:70%;
		margin:0 0 1rem 15%;
	}

	.claviergrandeur{
		width: 31rem;
	}
	.claviergrandeur .division10{
		width: 20%;
	}

	.claviergrandeur_in{
		width: 31rem;
	}
	.claviergrandeur_in .touche, .claviergrandeur_in .toucheactive{
		width: 90%;
	}

	.clavierepaisseur{
		width: 9rem;
	}

	.clavierhalluxvalgus{ 
		width: 13rem;
	}

	.clavieressayage{
		width: 38rem;
	}

	.claviersysteme{
		width: 16rem;
	}

	.clavierpt{
		width: 30rem;
	}
	.clavierpt .touche, .clavierpt .toucheactive{
		width: 90%;
	}
	.clavierptbetween{
		width: 32rem;
	}
	.clavierptbetween .touche, .clavierptbetween .toucheactive{
		width: 90%;
	}

	.clavierrecap{
		width: 17rem;
	}

	.clavierpreferences{
		width: 30rem;
	}

	.clavier_inch{
		width: 22rem;
	}
	.clavier_inch .division8{
		width: 25%;
	}

	.clavier_millimetre{
		width: 26rem;
	}
	.clavier_millimetre .division10{
		width:  20%;
	}

	.clavier_centimetre{
		width: 28rem;
	}
	.clavier_centimetre .division10{
		width:  16.66%;
	}

	#separecap{
		display: none;
	}

	.nomob{
		display:none;
	}

}

@media all and (min-width:668px) and (max-width:767px) {

	/* Samsung galaxy paysage 640px iphone 6 paysage 667 */

	/* pages mesures */
	.mgentete{
		margin-left: 6.5%;
		margin-right: 6.5%;
	}

	.separationmesure{
		width: 86%;
		margin: 0 0 1.5rem 7%;
		padding:1.5rem 0 0 0;
	}

	.modeleH {
		width: 100%;
		margin: 0;
	}
	.modeleH img{
		width: 34%;	
		margin:0 0 0 33%;
	}

	.modeleL {
		width: 100%;
		margin: 0;
	}
	.modeleL img{
		width: 44%;	
		margin:0 0 0 28%;
	}

	.demoH {
		width: 100%;
		float: left;
		margin:0;
	}
	.demoH img{
		width: 34%;	
		margin:0 0 0 33%;
	}

	.textedemoH{
		width:90%;
		margin-left: 5%;
	}

	.demoL {
		width: 100%;
		float: left;
		margin:0;
	}
	.demoL img{
		width: 44%;	
		margin:0 0 0 28%;
	}

	.textedemoL{
		width:90%;
		margin-left: 5%;
	}

	.alerte{
		width:85%;
		margin:0 auto;
		padding:0.5rem;
		border: 1px solid #BC0000;
	}

	.boitesurinstruction{
		float:left;
		width: 90%;
		margin-left: 5%;
	}
	.boiteinstruction{
		float:left;
		width: 100%;
		margin:0;
	}

	.separationblocmesure{
		width: 90%;
		padding: 2rem 0 0 0;
		margin: 0 0 2.5rem 5%;
	}

	.msdemo1H{
		float:left;
		width:100%;
		margin:0;
		clear:both;
	}
	.msdemo1H img{
		width:38%;
		margin:0 0 1rem 31%;
	}

	.msdemo1L{
		float:left;
		width:100%;
		margin:0;
	}
	.msdemo1L img{
		width:64%;
		margin:0 0 1rem 18%;
	}

	.msdemo3H{
		float:left;
		width: 30%;
		margin:0 0 0 2.5%;
	}

	.claviergrandeur{
		width: 30rem;
	}
	.claviergrandeur .division10{
		width: 20%;
	}

	.clavierepaisseur{
		width: 9rem;
	}

	.clavierhalluxvalgus{
		width: 13rem;
	}

	.clavieressayage{
		width: 38rem;
	}

	.claviersysteme{ 
		width: 16rem;
	}

	.clavierpt{
		width: 35rem;
	}

	.clavierptbetween{
		width: 32rem;
	}
	.clavierptbetween .touche, .clavierptbetween .toucheactive{
		width: 90%;
	}

	.clavierrecap{
		width: 17rem;
	}

	.clavierpreferences{
		width: 30rem;
	}

	.clavier_inch{
		width: 36rem;
	}

	.clavier_millimetre{
		width: 28rem;
	}
	.clavier_millimetre .division10{
		width:  20%;
	}

	.clavier_centimetre{
		width: 30rem;
	}
	.clavier_centimetre .division10{
		width:  16.66%;
	}

	#separecap{
		display: none;
	}
	
}

/* Tablettes */

@media all and (min-width:768px) and (max-width:899px) {

	/* ipad portrait 768px Samsung Tab 800px */

	/* pages mesures */
	.mgentete{
		margin-left: 6%;
		margin-right: 6.5%;
	}

	.separationmesure{
		width: 88%;
		margin: 0 0 1.5rem 6%;
		padding:1.5rem 0 0 0;
	}

	.modeleH {
		width: 100%;
		margin: 0;
	}
	.modeleH img{
		width: 40%;	
		margin:0 0 0 30%;
	}

	.modeleL {
		width: 100%;
		margin: 0;
	}
	.modeleL img{
		width: 50%;	
		margin:0 0 0 25%;
	}

	.demoH {
		width: 100%;
		float: left;
		margin:0;
	}
	.demoH img{
		width: 40%;	
		margin:0 0 0 30%;
	}

	.textedemoH{
		width:90%;
		margin-left: 5%;
	}

	.demoL {
		width: 100%;
		float: left;
		margin:0;
	}
	.demoL img{
		width: 50%;	
		margin:0 0 0 25%;
	}

	.textedemoL{
		width:90%;
		margin-left: 5%;
	}

	.alerte{
		width:80%;
		margin:0 auto;
		padding:0.5rem;
		border: 2px solid #BC0000;
	}

	.boitesurinstruction{
		float:left;
		width: 90%;
		margin-left: 5%;
	}
	.boiteinstruction{
		float:left;
		width:100%;
		margin:0%;
	}

	.separationblocmesure{
		width: 90%;
		padding: 2rem 0 0 0;
		margin: 0 0 2.5rem 5%;
	}

	.msdemo1H{
		float:left;
		width:100%;
		margin:0;
		clear:both;
	}
	.msdemo1H img{
		width:44%;
		margin:0 0 1rem 28%;
	}

	.msdemo1L{
		float:left;
		width:100%;
		margin:0;
	}
	.msdemo1L img{
		width:54%;
		margin:0 0 1rem 23%;
	}

	.msdemo3H{
		float:left;
		width: 30%;
		margin:0 0 0 2.5%;
	}


	.claviergrandeur{
		width: 34rem;
	}
	.claviergrandeur .division10{
		width: 20%;
	}

	.clavieressayage{
		width: 40rem;
	}

	.claviersysteme{
		width: 16rem;
	}

	.clavierptbetween{  
		width: 37rem;
	}

	.clavierrecap{
		width: 18rem;
	}

	.clavierpreferences{
		width: 30rem;
	}

	.clavier_inch{
		width: 43rem;
	}

	.clavier_millimetre{
		width: 28rem;
	}
	.clavier_millimetre .division10{
		width: 20%;
	}

	.clavier_centimetre{
		width: 30rem;
	}
	.clavier_centimetre .division10{
		width:  16.66%;
	}

	#separecap{
		display: none;
	}
		
}

@media all and (min-width:900px) and (max-width:999px) {

	/* Asus LG  paysage 960px */

	/* page mesures */
	.mgentete{
		margin-left: 3%;
		margin-right: 3%;
	}

	.separationmesure{
		width: 94%;
		margin:0 0 1.5rem 3%;
		padding: 1.5rem 0 0 0;
	}

	.modeleH {
		width: 20%;
		margin: 0 0 0 40%;
	}
	.modeleH img{
		width: 100%;	
	}

	.modeleL {
		width: 30%;
		margin: 0 0 0 35%;
	}
	.modeleL img{
		width: 100%;	
	}

	.demoH {
		width: 20%;
		float: left;
		margin:0 0 0 3%;
	}
	.demoH img{
		width: 100%;	
		margin:0;
	}

	.textedemoH{
		width:72.5%;
		float:left;
		margin:0 0 0 1.5%;
	}

	.demoL {
		width: 30%;
		float: left;
		margin:0 0 0 3%;
	}
	.demoL img{
		width: 100%;	
		margin:0;
	}

	.textedemoL{
		width:62.5%;
		float:left;
		margin:0 0 0 1.5%;
	}

	.alerte{
		width:80%;
		margin:0 auto;
		padding:0.5rem;
		border: 2px solid #BC0000;
	}

	.msdemo1H{
		width: 34%;
	}
	.msdemo1H img{
		width: 90%;
		margin:0;
	}


	.claviergrandeur{
		width: 54rem;
	}

	.clavieressayage{
		width: 40rem;
	}

	.claviersysteme{
		width: 16rem;
	}

	.clavierptbetween{
		width: 37rem;
	}

	.clavierrecap{
		width: 18rem;
	}

	.clavierpreferences{
		width: 30rem;
	}

	#separecap{
		display: none;
	}


}

@media all and (min-width:1000px) and (max-width:1099px) {

	/* ipad paysage 1024 px */

	/* page mesures */
	.mgentete{
		margin-left: 3%;
		margin-right: 3%;
	}

	.separationmesure{
		width: 94%;
		margin:0 0 1.5rem 3%;
		padding: 1.5rem 0 0 0;
	}

	.modeleH {
		width: 20%;
		margin: 0 0 0 40%;
	}
	.modeleH img{
		width: 100%;	
	}

	.modeleL {
		width: 30%;
		margin: 0 0 0 35%;
	}
	.modeleL img{
		width: 100%;	
	}

	.demoH {
		width: 20%;
		float: left;
		margin:0 0 0 3%;
	}
	.demoH img{
		width: 100%;	
		margin:0;
	}

	.textedemoH{
		width:72%;
		float:left;
		margin:0 0 0 2%;
	}

	.demoL {
		width: 30%;
		float: left;
		margin:0 0 0 3%;
	}
	.demoL img{
		width: 100%;	
		margin:0;
	}

	.textedemoL{
		width:62%;
		float:left;
		margin:0 0 0 2%;
	}

	.alerte{
		width:80%;
		margin:0 auto;
		padding:0.5rem;
		border: 2px solid #BC0000;
	}

	.msdemo1H{
		width: 34%;
	}
	.msdemo1H img{
		width: 90%;
		margin:0;
	}


	.clavieressayage{
		width: 40rem;
	}

	.claviersysteme{
		width: 16rem;
	}

	.clavierptbetween{
		width: 37rem;
	}

	.clavierrecap{
		width: 18rem;
	}

	.clavierpreferences{
		width: 30rem;
	}

	#separecap{
		display: none;
	}
	
}

/* Ordinateurs */

@media all and (min-width:1100px) and (max-width:1199px) {

	#separecap{
		display: none;
	}

}

@media all and (min-width:1200px) and (max-width:1299px) {
	
	#separecap{
		display: none;
	}
	
}

@media all and (min-width:1300px) and (max-width:1399px) {

	
	.boitesurinstruction{
		float:left;
		width: 88%;
		margin-left: 6%;
	}

	.separationblocmesure{
		width: 88%;
		padding: 2rem 0 0 0;
		margin: 0 0 2.5rem 6%;
	}

	#separecap{
		display: none;
	}

}

@media all and (min-width:1400px) and (max-width:1499px) {

	.boitesurinstruction{
		float:left;
		width: 86%;
		margin-left: 7%;
	}

	.separationblocmesure{
		width: 86%;
		padding: 2rem 0 0 0;
		margin: 0 0 2.5rem 7%;
	}

	
	#separecap{
		display: none;
	}	

}

@media all and (min-width:1500px) and (max-width:1599px) {


	.boitesurinstruction{
		float:left;
		width: 84%;
		margin-left: 8%;
	}

	.separationblocmesure{
		width: 84%;
		padding: 2rem 0 0 0;
		margin: 0 0 2.5rem 8%;
	}

	#separecap{
		display: none;
	}
	
}

@media all and (min-width:1600px) and (max-width:1699px) {

	.boitesurinstruction{
		float:left;
		width: 82%;
		margin-left: 9%;
	}

	.separationblocmesure{
		width: 82%;
		padding: 2rem 0 0 0;
		margin: 0 0 2.5rem 9%;
	}

	#separecap{
		display: none;
	}

}

@media all and (min-width:1700px) and (max-width:1799px) {

	.boitesurinstruction{
		float:left;
		width: 80%;
		margin-left: 10%;
	}

	.separationblocmesure{
		width: 80%;
		padding: 2rem 0 0 0;
		margin: 0 0 2.5rem 10%;
	}

	#separecap{
		display: none;
	}
	
}

@media all and (min-width:1800px) {

	.boitesurinstruction{
		float:left;
		width: 80%;
		margin-left: 10%;
	}

	.separationblocmesure{
		width: 80%;
		padding: 2rem 0 0 0;
		margin: 0 0 2.5rem 10%;
	}

	#separecap{
		display: none;
	}
	
}