@charset "utf-8";
#bandeau{
	position:relative;
}

#contenu{
	margin-top:353px;
}
#slide{
	padding-top:4px;
	width:950px;
	height:349px;
	background-color:white;
	background-image: linear-gradient(white, #dddd);
}
#schema{
	margin-top:4px;
	width:940px;
	height:680px;
	margin-left:auto;
	margin-right:auto;
	background-color:rgb(212,212,212);
	background-image: linear-gradient(white, #dddd);
	border:2px rgb(44,113,186) solid;
	border-radius:5px;
}
#cloud{
	position:absolute;
	top:616px;/*(600+5)*/
	margin-left:375px;/*(400+5)*/
	width:255px;
	height:216px;
}
#portable{
	position:absolute;
	top:638px;/*(600+5)*/
	margin-left:50px;/*(400+5)*/
	width:160px;
	height:201px;
}
#cnxprt{
	position:absolute;
	top:640px;/*(600+5)*/
	margin-left:235px;/*(400+5)*/
	width:110px;
	height:147px;
}
#cnxprtautom{
	position:absolute;
	top:855px;/*(600+5)*/
	margin-left:125px;/*(400+5)*/
	width:105px;
	height:110px;
}

#boitiertab{
	position:absolute;
	top:982px;/*(600+5)*/
	margin-left:400px;/*(400+5)*/
	width:220px;
	height:285px;
}
#mic{
	position:absolute;
	top:1055px;/*(600+5)*/
	margin-left:237px;/*(400+5)*/
	width:143px;
	height:220px;
}
#automate{
	position:absolute;
	top:950px;/*(600+5)*/
	margin-left:155px;/*(400+5)*/
	width:140px;
	height:103px;
}
#routeur{
	position:absolute;
	top:1050px;/*(600+5)*/
	margin-left:719px;/*(400+5)*/
	width:190px;
	height:158px;
}
#switch{
	position:absolute;
	top:1035px;/*(600+5)*/
	margin-left:25px;/*(400+5)*/
	width:100px;
	height:55px;
}
#gsm{
	position:absolute;
	top:825px;/*(600+5)*/
	margin-left:580px;/*(400+5)*/
	width:105px;
	height:110px;
}
#pc{
	position:absolute;
	top:655px;/*(600+5)*/
	margin-left:655px;/*(400+5)*/
	width:280px;
	height:163px;
}
#enless{
	position:absolute;
	top:915px;/*(600+5)*/
	margin-left:800px;/*(400+5)*/
	width:150px;
	height:110px;
}

#titreschema{
	height:30px;	
	width:940px;
	margin-left:auto;
	margin-right:auto;
}
h1{
	color:rgb(44,113,186);
	font-size:18px;
	font-style:italic;
}
h2{
	font-size:15px;
	font-weight:lighter;
}
.infobulle h3{
	padding:5px;
	font-size: 12px;
	font-style:italic;
	font-weight:lighter;
	color:white;
}
.infobulle1 h3{
	padding:5px;
	font-size: 12px;
	font-style:italic;
	font-weight:lighter;
	color:white;
}
.infobulle2 h3{
	padding:5px;
	font-size: 12px;
	font-style:italic;
	font-weight:lighter;
	color:white;
}

.infobulle{
	margin-bottom:-100px;
	transform:scale(0) rotateX(-180deg);
	background-color: rgba(44,113,186,1);
	color:white;
	border-radius:5px;
	padding:8px;
	width:200px;
	height:auto;
	position: absolute;
	z-index: 100;
	bottom: 110%;
	left: 10%;
	transition:1s;
}
.infobulle::after{
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 35%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: rgba(44,113,186,1) transparent transparent transparent;
}
.infobulle1{
	margin-bottom:-100px;
	transform:scale(0) rotateX(-180deg);
	background-color: rgba(44,113,186,1);
	color:white;
	border-radius:5px;
	padding:8px;
	width:200px;
	height:auto;
	position: absolute;
	z-index: 100;
	bottom: 200%;
	/*left: 20%;*/
	transition:1s;
}
.infobulle1::after{
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 35%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: rgba(44,113,186,1) transparent transparent transparent;
}
.infobulle2{
	margin-bottom:-100px;
	transform:scale(0) rotateX(-180deg);
	background-color: rgba(44,113,186,1);
	color:white;
	border-radius:5px;
	padding:8px;
	width:200px;
	height:auto;
	position: absolute;
	z-index: 100;
	bottom: 280%;
	/*left: 20%;*/
	transition:1s;
}
.infobulle2::after{
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 35%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: rgba(44,113,186,1) transparent transparent transparent;
}

#cloud:hover >.infobulle{
	transform: scale(1) rotateX(0deg);
}
#portable:hover >.infobulle{
	transform: scale(1) rotateX(0deg);
}
#boitiertab:hover >.infobulle{
	transform: scale(1) rotateX(0deg);
}
#mic:hover >.infobulle{
	transform: scale(1) rotateX(0deg);
}
#automate:hover >.infobulle1{
	transform: scale(1) rotateX(0deg);
}
#cnxprt:hover >.infobulle{
	transform: scale(1) rotateX(0deg);
}
#cnxprtautom:hover >.infobulle1{
	transform: scale(1) rotateX(0deg);
}
#routeur:hover >.infobulle{
	transform: scale(1) rotateX(0deg);
}
#switch:hover >.infobulle2{
	transform: scale(1) rotateX(0deg);
}
#gsm:hover >.infobulle1{
	transform: scale(1) rotateX(0deg);
}
#pc:hover >.infobulle{
	transform: scale(1) rotateX(0deg);
}
#enless:hover >.infobulle1{
	transform: scale(1) rotateX(0deg);
}