@keyframes example2 {
    from {opacity:0;}
    to {opacity:1;}
}

@keyframes logo {
    from {height:0px}
    to {height:200px;}
}
@keyframes entete1 {
    from {opacity:0;}
    to {opacity:1;}
}
@keyframes entete2 {
    from {background: white;}
    to {background: #111;}
}
@keyframes clignote {
   /* from {border:2px solid white;border-color: rgba(255,255,255,0);}
    to {border:2px solide white;border-color: rgba(255,255,255,1);}*/
	 from {opacity:0;}
    to {opacity:1;}
}
@keyframes descend{
	from {top:-500px;}
	to {top:0px;}
}
@keyframes descend2{
	from {top:-500px;}
	to {top:0px;}
}

body
{
	background: black;
	width: 100%;
	margin: 0 auto;
	
}
.Centre1
{
	display:block;
	margin:0 auto;
	/*height:380px;
	width:380px;*/
	height:360px;
	width:360px;
	background:rgba(255,255,255,0.2);
	border-radius:50%;
	margin-top:-20px;
	opacity:0;
}
.Centre2
{
	position:relative;
	/*margin-left:10px;*/
	margin-left:-22px;
	/*margin-top:150px;*/
	margin-top:-20px;
}
.Contenu
{
	position: relative;
	width: 100%;
	height: 100%;
	margin: auto;
	/*background: url("../fondbleu.jpg");*/
	background: #eee; /* For Browser that not support gradient*/
}

.Entete
{
	position: relative;
	/*background: url("../fondnoir.jpg");*/
	width: 100%;
	height: 110px;
	background-color: #000;
	margin: 0 auto;  
	
	
}
.Entete:after
{
	content: "";
	position: absolute;
	z-index: +1;
	left: 0;
	bottom: 0px;
	width: 100%;
	height: 1px;
	background: white;
	box-shadow: 0 0 10px #155196, 0 0 12px #888;
}

.Pieds
{
	position: relative;
	background: url("../images/fondbleu.jpg");
	top:0px;
	width: 100%;
	height: 100px;
	/*background-color: red;*/
	margin: 0 auto;
	z-index:20;
}
.Pieds:after
{
	content: "";
	position: absolute;
	z-index: +1;
	left: 0;
	top:0px;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: white;
	box-shadow: 0 0 5px #fff, 0 0 12px #fff;
	
}

.Rond
{
	position: relative;
	/*background: url("../fondnoir.jpg");*/
	top:-48px;
	width: 1171px;
	/*max-width:690px;*/
	height: 100%;
	/*background-color: blue;*/
	margin: 0 auto;
	z-index:21;
}
.Rond ul
{
	margin: 0 auto;
	width: 100%;
	height:100%;
	padding: 0;
	/*background-color: orange;*/
	
}
.Rond li
{	
	position:absolute;
	text-decoration:none;
	display:inline-block;
	color:#fff;
	width:95px;
	height:95px;
	text-align:center;
	
	/*background-color: blue;*/
}
.Rond1
{
	left:200px;
	background: url(../images/icon-rond.png) no-repeat 0 0;
}
.Rond2
{
	left:440px;
	background: url(../images/icon-rond.png) no-repeat 0 0;
}
.Rond3
{
	left:640px;
	background: url(../images/icon-rond.png) no-repeat 0 0;
}
.Rond4
{
	left:800px;
	background: url(../images/icon-rond.png) no-repeat 0 0;
}
.Rond .Int1, .Rond .Int2, .Rond .Int3, .Rond .Int4
{
	/*background: url(../images/icon1.png) no-repeat 0 0;*/
	display: block;
    height: 75px;
    width: 75px;
	margin: 0 auto;
	padding:0;
	transition: background-position .2s ease-in;
}
.Rond .Int2
{
	background: url(../images/Contact.png) no-repeat 0 0;
	margin-top:20px;
	margin-left:24px;
}
.Rond .Int2:hover
{
	background: url(../images/Contact2.png) no-repeat 0 0;
	margin-top:20px;
	margin-left:24px;
	transition: all 0.2s ease-in-out;
}
.Rond .Int3
{
	background: url(../images/Carte.png) no-repeat 0 0;
	margin-top:20px;
	margin-left:30px;
	transition: all 0.2s ease-in-out;
}
.Rond .Int3:hover
{
	background: url(../images/Carte2.png) no-repeat 0 0;
	margin-top:20px;
	margin-left:30px;
}
.Corps
{
	position: relative;
	/*background: url("../images/fondmilieu4.jpg") no-repeat -225px 0;*/
	padding:0 0 0 0;
	top:-0px; /* 0px sans animation*/
	width: 100%;
	height: 100%;
	background-color:black;
	margin: 0 auto;
	z-index:20;
}
.CorpsEspace
{
	position: relative;
	width: 100px;
	height: 30px;
	/*background-color:red;*/
	z-index:20;
}

.Corps:after
{
	content: "";
	position: absolute;
	z-index: +1;
	left: 0;
	bottom: -2px;
	min-width:700px;
	height: 1px;
	background: white;
	box-shadow: 0 0 5px #155196, 0 0 12px #888;
	
}
.Corps .Fond
{
	position:relative;
	width:1100px;
	height:100%;
	/*margin:0 auto;*/
	margin-left:auto;
	margin-right:auto;
	background-color:black;
	background: url("../images/fondmilieu4.jpg") repeat -40px 0;
	/*background-repeat:repeat-y;*/
	display:block;
	padding:50px 0 50px 0;
}
.Corps .Fond .Espace
{
	position:relative;
	width:200px;
	height:100px;
	background-color:red;
	
}

.Menu
{
	position: relative;
	/*background: url("../fondnoir.jpg");*/
	width: 1260px;
	/*max-width:1100px;*/
	height: 100%;
	/*background-color: blue;*/
	margin: 0 auto;  
}
.Logo1
{
	position:relative;
	margin-top:-50px;
	margin-left:420px;
	opacity:0;
}
.Logo2
{
	position:absolute;
	margin-top:-400px;
	margin-left:150px;
	opacity:0;
}
.Logo3
{
	position:absolute;
	margin-top:-380px;
	margin-left:730px;
	opacity:0;
}
.Logo4
{
	position:absolute;
	margin-top:-150px;
	margin-left:80px;
	opacity:0;
}
.Logo5
{
	position:absolute;
	margin-top:-150px;
	margin-left:740px;
	opacity:0;
}
.Logo6
{
	position:relative;
	margin-top:10px;
	margin-left:510px;
	opacity:0;
}

#hex2 {
  width: 350px;
  height: 350px;
  margin:0 auto;
}
#color2 {
  background-color: rgba(255,255,255,1);
}
.hexagon-wrapper {
  text-align: center;
  margin: 20px;
  position: relative;
  display: inline-block;
}

.hexagon {
  height: 100%;
  width: calc(100% * 0.57735);
  display: inline-block;
  background:red;
}
.hexagon:before {
  position: absolute;
  top: 0;
  right: calc((100% / 2) - ((100% * 0.57735) / 2));
  background-color: inherit;
  height: inherit;
  width: inherit;
  content: '';
  transform: rotateZ(60deg);
}

.hexagon:after {
  position: absolute;
  top: 0;
  right: calc((100% / 2) - ((100% * 0.57735) / 2));
  background-color: inherit;
  height: inherit;
  width: inherit;
  content: '';
  transform: rotateZ(-60deg);
}

.LogoEmplacement
{
	position: absolute;
	display: bloc;
	width: 200px;
	margin-left: -100px;
	height: 130px;
    left: 50%;
    /*background: url("../fondbleu.jpg");*/
	background-color: #111;
	border: 2px solid white;
	border-top: 0px solid white;
	box-shadow: 0px 0px 5px grey;
    border-bottom-right-radius: 40%;
	border-bottom-left-radius: 40%;
	z-index:30;
	
	animation-name: entete2;
    animation-duration: 1s;
}

.LogoEmplacement:hover
{
	background: url("../images/fondbleuclair.jpg");
}

.LogoEmplacement img
{
	padding:10px;
	display: block;
    margin:0 auto;
}

.LogoEmplacement span
{
	display: block;
	text-align: center;
	color:#fff;
}

.Menu ul
{
	margin: 0 auto;
	width: 100%;
	height:100%;
	padding: 0;
	/*background-color: orange;*/
	
}

.Menu li
{	
	position:absolute;
	text-decoration:none;
	display:inline-block;
	color:#fff;
	/*padding:15px;*/
	padding:0;
	width:165px;
	height:60px;
	text-align:center;
	
	/*background-color: blue;*/
}

.Menu1
{
	left:0;
	height:100%;
}
.Menu2
{
	left:170px;
	height:100%;
}

.Menu3
{
	left:340px;
	height:100%;
}
.Menu4
{
	right:0;
	height:100%;
}

.Menu5
{
	right:170px;
	height:100%;
}

.Menu6
{
	right:340px;
	height:100%;
}
.Menu1Anim
{
	left:0;
	height:100%;
	animation-name: entete1;
    animation-duration: 2s;
}
.Menu2Anim
{
	left:145px;
	height:100%;
	animation-name: entete1;
    animation-duration: 4s;
}

.Menu3Anim
{
	left:285px;
	height:100%;
	animation-name: entete1;
    animation-duration: 6s;
}
.Menu4Anim
{
	right:0;
	height:100%;
	animation-name: entete1;
    animation-duration: 2s;

}

.Menu5Anim
{
	right:145px;
	height:100%;
	animation-name: entete1;
    animation-duration: 4s;
}

.Menu6Anim
{
	right:285px;
	height:100%;
	animation-name: entete1;
    animation-duration: 6s;
}
.Menu .MenuActif
{
	height: 120%;
	background: url("../images/fondbleuclair.jpg");
	box-shadow: 0px 0px 10px white;
    border-bottom-right-radius: 10%;
	border-bottom-left-radius: 10%;
}

.Menu a 
{
	text-decoration: none;
	color:#999;
}
.Menu li a
{
	display: block;
	height:100%;
	width:100%;
}
.Menu li img
{
	
	/*margin-left:-12px;*/
	margin:0 auto;
	margin-top:5px;
	
}
.Menu li .Top
{
	margin-top:18px;
}
.Menu li .SpanCentre
{
	display:block;
	margin:0 auto;
}

.Menu li:hover
{
	margin-top:0;
	height: 130px;
	/*background: url("../dpattern4.jpg");*/
	/*padding:13px;*/
	box-shadow: 0px 0px 2px #6AE1FF;
	border-left: 2px solid #155196;
	border-right:2px solid #155196;
	border-bottom:2px solid #155196;
    border-bottom-right-radius: 30%;
	border-bottom-left-radius: 30%;
	transition: height 0.25s;
	background: #fff; /* For Browser that not support gradient*/
	
	
	z-index:21;
}
.MenuDetail
{
	margin-left:220px;
	background:rgba(255,255,255,0.25);
	width:80%;
	height:100%;
	border:1px solid #aaa;
	border-radius: 10px;

}
.MenuDetailHygitek
{
	margin: 0 auto;
	/*background:rgba(255,255,255,0.25);*/
	width:963px;
	height:100%;
	/*border:1px solid #aaa;
	border-radius: 10px;*/
}
#liactive
{
	margin-top:0;
	height: 90px;
	/*background: url("../dpattern4.jpg");*/
	padding:13px;
	box-shadow: 0px 0px 2px #6AE1FF;
	border-left: 2px solid #155196;
	border-right:2px solid #155196;
	border-bottom:2px solid #155196;
    border-bottom-right-radius: 30%;
	border-bottom-left-radius: 30%;
	transition: height 0.25s;
	background: #fff; /* For Browser that not support gradient*/
	
	
	z-index:21;
}

.Login
{
	position:relative;
	/*background-color: #fff;*/
	width:100%;
	max-width:250px;
	height:350px;
	margin: 0 auto;
	top:25px;
}
.Login input
{
	width:100%;
	background: rgb(0,0,0);
	display:block;
    border: 0;
	margin-left:-50px;
    padding: 10px 50px;
	margin-top:20px;
	background-position: 15px;
    font-size: 1em;
    color: rgb(255,255,255);
	-webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 2px 2px 0 rgba(255,255,255,0.2);
    -moz-box-shadow: 2px 2px 0 rgba(255,255,255,0.2);
    box-shadow: 2px 2px 0 rgba(255,255,255,0.2);
	outline: none;
}
.Login input:focus
{
		opacity:0.9;
		border:0;
}
.Login .User
{
	background-image: url('../User.png');
    background-size: 25px 25px; 
    background-repeat: no-repeat;
	opacity:0.6;
	transition: all 0.2s ease-in-out;
}
.Login .Pwd
{
	background-image: url('../Pwd.png');
    background-size: 25px 25px; 
    background-repeat: no-repeat;
	opacity:0.6;
	transition: all 0.2s ease-in-out;
}
.Login .Titre
{
	position:relative;
	font-size: 20px;
	display:block;
	color:white;
	/*background: rgb(0,0,0);*/
	width:100%;
	margin: 0 auto;
	text-align:center;
}
.Login .Valider, .Formdroite .Valider
{
	position:relative;
	background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(rgb(13, 121, 164)), to(rgb(16, 167, 213))) rgb(20, 177, 222);
    padding: 10px;
    border-radius: 18px;
	margin:20px auto;
	width:100%;
	color:white;
	font-size: 16px;
}
.Login .Valider:hover
{
	background: #000;
	color:white;
	transition: all 0.2s ease-in-out;
	
}
.Login span
{
	position:relative;
	display:block;
	width:100%;
	text-align:center;
	color:#6AE1FF;
}
.Login .Erreur
{
	font-size: 20px;
}

.CadreContenu
{
	position:relative;
	margin: 0 auto; 
	width:960px;
	/*height:100%;*/
	background-color:rgba(150,150,150,0.25);
	border:1px solid #aaa;
	border-radius: 10px;
}
.CadreContenuSOS
{
	height:1900px;
}
.CadreContenu .Logo
{
	position:relative;
	/*background:rgba(238,238,238,0.2);
	border:2px solid rgba(238,238,238,0.2);
	border-top:none;
	border-bottom:none;*/
	margin:0 auto;
	text-align:center;
	width:905px;
}
.CadreContenu .ImgAnim
{
	animation-name: logo;
    animation-duration: 2s;
	/*animation-name: example2;
    animation-duration: 2s;*/
}

.CadreContenuHygitek
{
	position:relative;
	margin: 0 auto; 
	width:962px;
	height:100%;
	/*background-color:rgba(150,150,150,0.25);*/
	
	margin-top:80px;
	/*border:1px solid #aaa;
	border-radius: 10px;*/
	
	/*animation-name: example2;
    animation-duration: 4s;*/
}

.CadreContenu .CadreTexte
{
	position:relative;
	margin: 0px auto; 
	width:95%;
	height:100%;
	
}
.CadreContenu .CadreTexte a
{
	border:none;
	display:block;
	text-align: justify;
    text-justify: inter-word;
}

.CadreContenu .CadreTexte .TitrePartie
{
	color:#6AE1FF;
	font-size: 22px;
	width:100%;
	font-family:"Bauhaus 93";
	padding:30px 0 20px 0;
	
}
.CadreContenu .CadreTexte .SousTitre
{
	color:#2EFE2E;
	width:100%;
	font-family:"Forte";
	font-size:20px;
	padding:0px 0 10px 0;
}
.CadreContenu .CadreTexte .SousTitre2
{
	color:#2EFE2E;
	width:100%;
	font-family:"Forte";
	font-size:20px;
	padding:30px 0 10px 0;
}
.CadreContenu .CadreTexte .Texte
{
	color:white;
	width:100%;
	font-family:"Arial";
}.CadreContenu .CadreTexte .Texte2
{
	color:white;
	width:600px;
	font-family:"Arial";
	float:left;
}
.CadreContenu .CadreTexte .Gauche
{
	float:left;
	/*padding-right:40px;*/
	width:70%;
	
}
.CadreContenu .CadreTexte .Gauche2
{
	float:left;
	/*padding-right:40px;*/
	height:250px;
	
}
.CadreContenu .CadreTexte .Droite
{
	width:25%;
	margin-top:-2px;
	margin-left:40px;
}
.CadreContenu .CadreTexte .Droite2
{
	height:250px;
	margin-top:-2px;

}
.CadreContenu .CadreTexte .Centre
{
	display:block;
	margin:0 auto;
	border:1px solid white;
}
miseencouleur
{
	color:yellow;
}

.MenuPerso
{
	position:relative;
	float:left;
	/*background: rgba(105,225,255,0.1);*/
	background: url("../images/fondnoir2.jpg");
	padding:0px 0;
	/*border:1px solid #6AE100;*/
	border:1px solid #eee;
    border-radius: 10px;
	top:0px;
	height:100%;
	width:200px;
	/*
	background: -webkit-linear-gradient(left, var(--menu-perso-color1), var(--menu-perso-color2));
	background: -o-linear-gradient(right, var(--menu-perso-color1), var(--menu-perso-color2)); 
	background: -moz-linear-gradient(right, var(--menu-perso-color1), var(--menu-perso-color2));
	background: linear-gradient(to left, var(--menu-perso-color1), var(--menu-perso-color2));*/
	
	color:white
}

.MenuPerso ul
{
	margin: 10px auto;
	width: 100%;
	height:100%;
	padding: 0;
	/*background-color: orange;*/
	
}
.MenuPerso li, .MenuPerso a
{	
	
	padding:10px 20px;
	display:block;
	width:100%;
	height: 20px;
	text-decoration:none;
	color:#6AE1FF;
	text-align:left;
	font-family:"Monotype Corsiva";
	font-size:22px;
	
	/*background-color: blue;*/
}
.MenuPerso .Rouge{
	color:red;
	font-size:22px;
}
.MenuPerso .Vert{
	color:#6ae100;
	font-family:"Bauhaus 93";
	text-align:center;
	padding-left:0;
	padding-bottom:40px;
}
.MenuPerso .Vert:hover
{
	color:#6ae100;
	font-family:"Bauhaus 93";
	text-align:center;
	padding-left:0;
	padding-bottom:40px;
}
.MenuPerso a:hover
{
	color:#fff;
	margin-left:10px;
	transition: all 0.2s ease-in-out;
}
.MenuPerso img
{
	padding:10px;
	width:50%;
	display:block;
	margin: 0 auto;
}
.MenuDetail
{
	position:relative;
	margin-left:220px;
	background:rgba(255,255,255,0.25);
	width:80%;
	height:100%;
	min-height:350px;
	border:1px solid #eee;
	border-radius: 10px;
}
.Corps .Contact
{
	position:relative;
	width:1100px;
	height:350px;
	margin:0 auto;
}
.Corps .Contact .Milieu
{
	position:relative;
	display:block;
	width:350px;
	height:350px;
	margin:0 auto;
	background-image:url("../images/carte-contact.png");
	background-repeat:no-repeat;
}
.Corps .Contact .MilieuCarte
{
	position:relative;
	display:block;
	width:600px;
	height:100%;
	margin:0 auto;
	background-repeat:no-repeat;
}
.Corps .Contact .MilieuContenu
{
	position:relative;
	width:90%;
	height:100%;
	margin:0 auto;
}
.Corps .Contact .GaucheImage
{
	position:relative;
	display:block;
	width:40px;
	float:left;
}
.Corps .Contact .TexteContenu
{
	position:relative;
	display:block;
	width:200px;
	height:120px;
	top:70px;
	margin:0 auto;

}
.Corps .Contact .Texte
{
	position:relative;
	display:block;
	margin:0 auto;
	color:white;
	font-size:20px;
	text-align:center;
	padding-top:10px;
}

.Corps .Contact .Fonction
{
	color:#bff813;
}
.Corps .Contact .ContactLogo
{
	position:relative;
	display:block;
	margin:0 auto;
	width:180px;
	top:60px;
}
.Corps .Contact .T1
{
	font-size:18px;
}
.Corps .Contact .T2
{
	font-size:17px;
}

.Pieds .Copyright
{
	position:relative;
	display:block;
	padding-top:10px;
	color:white;
	margin:0 auto;
	text-align:center;
}
.Clients
{
display:block;
position:absolute;
width:200px;
height:350px;

float:left;
}
.Clients img
{
	position:relative;
	display:block;
	margin:0 auto;
	padding-bottom: 20px;
	text-align:center;
}
.Pub
{
	display:block;
	position:absolute;
	width:200px;
	height:370px;
	
	border:2px solid black;

	right:0px;
	top:50px;
	
	
}
.PubTexte
{
	position:relative;
	display:block;
	text-align:center;
	width:95%;
	color:white;
	font-family:"Monotype Corsiva";	
	font-size:22px;
	
	animation-name: clignote;
    animation-duration: 2s;
	animation-iteration-count:infinite;
}
.PubImage
{
	position:relative;
	display:block;
	margin:0 auto;

}
.Carte
{
	height:350px;
	box-shadow: 0 0 10px #fff, 0 0 12px #fff;
}

.frame
{
	overflow:hidden;
}

.youtube-player{
	position:relative;
	display:block;
    border: 1px solid #2EFE2E;
    height: 390px;
    width: 480px;
	margin:0 auto;
}