/*-------------Général------------------------------*/
/*--------------------------------------------------*/

body{
    font-family: "calibri";
    background: #000;
    color: #aa3e03;
    overflow-y: scroll;
    overflow-x: hidden;
    color: transparent;
    margin: 0px;
	overflow:visible;

}

h1{
	font-family: "calibri"; 
	margin: 0; 
	padding: 0; 
	background-color:#003d73; 
	font-size: 20px;
	

}

h2 {
	margin-bottom: 40px;
	font-family: "calibri"; 
	color: white; 
	text-align: center;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;

}

h3 {
	margin-left: 20px;
	font-family: "calibri"; 
	color: white; 
	font-size: 16px; 
	text-decoration: underline;
		font-weight: normal;

}

h4 {
	font-family: "calibri"; 
	margin: 0; 
	padding: 0; 
	font-size: 20px;
	font-style: normal;
	font-weight: normal;


}

a:link {
	text-decoration: none; 
	color: #FFA500;
}

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

p {
	font-family: "calibri"; 
	margin: 0; 
	padding:0; 
	text-align: justify;
}

ul {
	margin: 0px; 
	padding: 0px;
}

/*-------------Fin-----------------------------------*/
/*--------------------------------------------------*/

/*-------------orange---------------------------*/
/*-------------------------------------------------*/

.orange p {
	color: orange;
	text-align: center;
	padding: 20px;
}

.orange a {
	color: orange;
	text-align: center;

}

/*-------------Fin--------------------------------*/
/*-------------------------------------------------*/


/*-------------Liens-----------------------------------*/
/*--------------------------------------------------*/

 #utile a {
 		margin-right: 20px;
 		margin-left: 20px;
 			font-family: "calibri"; 
		color: orange; 
		font-size: 16px; 

 }


/*-------------Fin-----------------------------------*/
/*--------------------------------------------------*/

/*------------Corps---------------------------------------*/
/*-------------------------------------------------------*/

#conteneur{
	position: relative;
	width: 980px; 
	margin: auto;
	background: rgba(34, 66, 124, .7);

}

#contenu{
	width:940px; 
	margin-top: 20px;
	padding: 20px; 

}

#contenu p{
	color: white; 
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 10px;

}



#contenu h1{
	color: white; 
	text-align:center; 
	padding: 10px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	background-color:black;
	border: 1px solid white;	
}

/*-------------Fin---------------------------------------*/
/*-------------------------------------------------------*/


/*------------Fond d'écran---------------------------*/
/*--------------------------------------------------*/

.bg-slideshow, .bg-slideshow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}

.bg-slideshow:after { 
    content: '';
}

.bg-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s; 
}

.bg-slideshow li div { 
    z-index: 1;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    -webkit-animation: titleAnimation 36s linear infinite 0s;
    -moz-animation: titleAnimation 36s linear infinite 0s;
    -o-animation: titleAnimation 36s linear infinite 0s;
    -ms-animation: titleAnimation 36s linear infinite 0s;
    animation: titleAnimation 36s linear infinite 0s; 
}

.bg-slideshow li:nth-child(1) span { 
    background-image: url(Fond/1.jpg) 
}

.bg-slideshow li:nth-child(2) span { 
    background-image: url(Fond/2.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}

.bg-slideshow li:nth-child(3) span { 
    background-image: url(Fond/3.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}

.bg-slideshow li:nth-child(4) span { 
    background-image: url(Fond/4.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}

.bg-slideshow li:nth-child(5) span { 
    background-image: url(Fond/5.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}

.bg-slideshow li:nth-child(6) span { 
    background-image: url(Fond/6.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}

@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

.no-cssanimations .bg-slideshow li span{
	opacity: 1;
}

/*-------------Fin---------------------------------------*/
/*------------------------------------------------------*/


/*-------------Index-----------------------------------*/
/*----------------------------------------------------*/

#autom {
z-index: 9999999999999;
border: 1px solid white;
margin-top: 8%;
position: relative;
background: rgba(0, 0, 0, 0.5); 
width: 980px;

}
#autom p {
	color: white;
	text-align: center;
	font-size: 35px;
	margin-top: 20px;
	font-style: bold;
}
 #automa {
	width: 500px;	
	margin: 40px;
	margin-bottom: 20px;
 }

#garde {
    padding-top: 5%;
    margin: auto;
    text-align: center;
    height: 450px;
    position: relative;
	border: 1px solid red;
}


.flag{
	border: 1px solid white;
	position: relative;
	opacity: 0.6;
	margin: 20px;
	margin-top: 40px;
	width: 100px; 
	height: 60px;
	display: inline-block; 
	transition: all .2s ease-in; 
	-webkit-transition: all .2s ease-in; 
	-moz-transition: all .2s ease-in; 
	-o-transition: all .2s ease-in;
}

#fr{
	background: url(Divers/drapeau_fr.png) 0 0 no-repeat;
}

#fr:hover{
	background: url(Divers/drapeau_fr.png) 0 -60px no-repeat;
	opacity: 1;
}

#en{
	background: url(Divers/drapeau_en.png) 0 0 no-repeat;
}

#en:hover{
	background: url(Divers/drapeau_en.png) 0 -60px no-repeat;
	opacity: 1;
}

#drap{
	width: 100%; 
	height: auto; 
	text-align: center;
}

#contact{
	color: white;
	font-family: "calibri";
	font-size: 18px;
	font-style: bold;
}

#go{
	position: relative;
	padding-right: 30px;
	text-align: left;
	margin: 20px;

}

#send{
	position: relative;
	text-align: left;
	margin: 20px;
}

/*-------------Fin------------------------------------*/
/*----------------------------------------------------*/


/*--------Logo tête de corps-------------------------*/
/*---------------------------------------------------*/

#image{
	width: 100%; 
	height: 249px;
	text-align: center;

}

.logo2{
	margin-top: 60px;
	width: 250px; 
	height: 206px;   
	display: inline-block; 
	transition: all .2s ease-in; 
	-webkit-transition: all .2s ease-in; 
	-moz-transition: all .2s ease-in; 
	-o-transition: all .2s ease-in;
}

#isa{
	background: url(Divers/logo_isartec2.png) 0 0 no-repeat;
}

#isa:hover{
	background: url(Divers/logo_isartec2.png) 0 -42px no-repeat;
}

/*-------------Fin-----------------------------------*/
/*---------------------------------------------------*/


/*----------Barre de nav-----------------------------*/
/*--------------------------------------------------*/

#menu{
	height: 76px; 
	background-color: black;  
	text-align: center; 
	margin-bottom: 0px;
	position: fixed;
	width: 100%;
	z-index: 2;
} 

#menu li{
	list-style-type: none; 
	display: inline-block;  
	padding: 10px; 
	text-align: center;
	width: auto;
}

#menu ul{
	margin-left: 25px;
} 

#lang_fr{
	border: 1px solid white;
	width: 25px; 
	height: 14px;
	position: absolute;
	bottom: 18px;
	right: 18px;
	background: url(Divers/lang_fr.png) 0 0 no-repeat;
}

#lang_fr:hover{
	background: url(Divers/lang_fr.png) -25px 0 no-repeat;
}

#lang_en{
	border: 1px solid white;
	width: 25px; 
	height: 14px;
	position: absolute;
	top: 18px;
	right: 18px;
	background: url(Divers/lang_en.png) 0 0 no-repeat;
}

#lang_en:hover{
	background: url(Divers/lang_en.png) -25px 0   no-repeat;
}

.logo{
	width: 55px; 
	height: 55px;   
	list-style-type: none; 
	display: inline-block;   
	transition: all .2s ease-in; 
	-webkit-transition: all .2s ease-in; 
	-moz-transition: all .2s ease-in; 
	-o-transition: all .2s ease-in;
}



#start{
	position: absolute;
	top: 10px;
	left: 10px;
	background: url(Logo/start.png) 0 0 no-repeat;
}

#start:hover{
	background: url(Logo/start.png) 0 -55px no-repeat;
}

#outils{
	background: url(Logo/outils.png) 0 0 no-repeat;
}

#outils:hover{
	background: url(Logo/outils.png) 0 -55px no-repeat;
}

#plan{
	background: url(Logo/plan.png) 0 0 no-repeat;
}

#plan:hover{
	background: url(Logo/plan.png) 0 -55px no-repeat;
}

#competences{
	background: url(Logo/competences.png) 0 0 no-repeat;
}

#competences:hover{
	background: url(Logo/competences.png) 0 -55px no-repeat;
}

#recrutements{
	background: url(Logo/recrutements.png) 0 0 no-repeat;
}

#recrutements:hover{
	background: url(Logo/recrutements.png) 0 -55px no-repeat;
}

#liens{

	background: url(Logo/liens.png) 0 0 no-repeat;
}

#liens:hover{
	background: url(Logo/liens.png) 0 -55px no-repeat;
}

#actualites{
	background: url(Logo/actualites.png) 0 0 no-repeat;
}

#actualites:hover{
	background: url(Logo/actualites.png) 0 -55px no-repeat;
}

#galerie{
	background: url(Logo/galerie.png) 0 0 no-repeat;
}

#galerie:hover{
	background: url(Logo/galerie.png) 0 -55px no-repeat;
}

#connexion{
	background: url(Logo/connexion.png) 0 0 no-repeat;
}

#connexion:hover{
	background: url(Logo/connexion.png) 0 -55px no-repeat;
}

/*-------------Fin-------------------------------------*/
/*-----------------------------------------------------*/


/*------------Légende------------------------------------*/
/*------------------------------------------------------*/

#pictures{
	list-style: none outside none;
	padding: 0;
	height: 500px; 
	overflow: hidden;
	position: relative;
	width: 800px;	
	border: 1px white solid;
}

#pictures li img {
	z-index: 99;
}
 
#pictures li span {
	background: rgba(0, 0, 0, 0.5); 
	color: white;
	height: 60px;
	left: 0;
	padding: 0px;
	position: absolute;
	width: 800px;
	z-index: 150;
}

#pictures li.legende span {
	bottom: -60px;
	transition: bottom 0.4s ease-in-out;
	-moz-transition: bottom 0.4s ease-in-out;
	-o-transition: bottom 0.4s ease-in-out;
	-webkit-transition: bottom 0.4s ease-in-out;
}

#pictures li.legende:hover span {
	bottom: 0;
}

.legende p {
 	color: white;
 	padding: 0px;
 	margin-top: 20px;
}

/*-------------Fin----------------------------------------*/
/*-------------------------------------------------------*/


/*-------------Footer------------------------------------*/
/*------------------------------------------------------*/

#pied{
	width:940px; 
	background-color: black; 
	color: white; 
	height: 30px; 
	margin-bottom: 40px;
	padding:20px; 
	font-family: "calibri"; 
}

#back{
 	position: absolute;
 	right: 8px;
 	bottom: 8px;
	background: url(Logo/arrow.png) 0 0 no-repeat;
}

#back:hover{
	background: url(Logo/arrow.png) 0 -55px no-repeat;
}

/*-------------Fin-------------------------------------*/
/*----------------------------------------------------*/


/*------------Plan------------------------------------*/
/*----------------------------------------------------*/

#target{
	margin:0px;
	margin-top:40px;
	height: auto; 
	text-align: center; 
	}

#target p {
	color: orange;
	text-align: center; 
	}

#target li{
	list-style-type: none; 
	display: inline-block;  
	padding: 10px; 
	text-align: center;
}

.ico{
	border: 1px solid white;
	margin-left: 0px;
	width: 45px; 
	height: 45px;   
	list-style-type: none; 
	display: inline-block;   
	transition: all .2s ease-in; 
	-webkit-transition: all .2s ease-in; 
	-moz-transition: all .2s ease-in; 
	-o-transition: all .2s ease-in;
}

.ico:hover {
	opacity: 1;
}

#gmaps{
	background: url(Divers/gmaps.png) 0 0 no-repeat;
}

#gmaps:hover{
	background: url(Divers/gmaps.png) 0 -45px no-repeat;
}

#mail{
	background: url(Divers/mail.png) 0 0 no-repeat;
}

#mail:hover{
	background: url(Divers/mail.png) 0 -45px no-repeat;
}

#pagesj{
	background: url(Divers/pagesjaunes.png) 0 0 no-repeat;
}

#pagesj:hover{
	background: url(Divers/pagesjaunes.png) 0 -45px no-repeat;
}

#dynamap{
	margin: 20px;
	width:800px;
	 height:500px; 
	 border:1px solid white;	
}

/*-------------Fin------------------------------------*/
/*----------------------------------------------------*/


/*-----------Recrutements-----------------------------*/
/*----------------------------------------------------*/

#metier{
	text-align: center;
}

#metier td {
	text-align: center;
	vertical-align:top;
	width:300px;

	padding-bottom: 0px;
}

#metier p {
	margin-top: 0px;
	text-align:justify;


}

#metier h2 {
	margin-bottom: 0px;
	font-size: 16px;
	color: orange;
	font-style: "calibri"
}

#metier img {
	margin-top: 20px;
	padding-top: 0px;
	border: 1px solid white;	
}

#target h2 {
 color: orange;
 margin-bottom: 10px;
}

/*-------------Fin-----------------------------------*/
/*--------------------------------------------------*/


/*-----------Actualites------------------------------*/
/*----------------------------------------------------*/

#certi{
	text-align: center;
	

}

#certi td {
	text-align: center;
	vertical-align:top;
	width:250px;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 0px;
	padding-top: 40px;
}

#black{
 border:3px solid black;
 background-color: black;	
}

/*-------------Fin-----------------------------------*/
/*--------------------------------------------------*/


/*-----------Compétences-----------------------------*/
/*---------------------------------------------------*/

#skills{
	text-align: center;

}

#skills h2{
	padding-top: 40px;
	margin-bottom: 0px;
	padding-bottom: 10px;
	color: orange;
}

/*-------------Fin----------------------------------*/
/*-------------------------------------------------*/


/*-----------Gallerie------------------------------*/
/*------------------------------------------------*/

#slideshow li {
    margin: -2px;
} 

#fleche {
    margin-top: 220px;
}
#slideshow {
	border-bottom: 1px white solid;
	border-right: 1px white solid;
	margin-top: 40px;
	margin-bottom: 20px;
    position: relative;
    width: 799px;
    height: 500px;
    overflow: hidden;
}

#sContent {
    position: absolute;
    top: 0;
    left: 0;
    width: 1100%;
    height: 500px;
    margin: 0;
    padding: 0;
    z-index: 10;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

#sContent li {
    display: inline;
}

#slideshow .next, #slideshow .prev {
    height: 500px;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    z-index: 20;
}

#slideshow .next:hover, #slideshow .prev:hover {
	 background: rgba(255, 165, 0, 0.5);
}

#slideshow .prev {
    left: 0;
}

#slideshow .next {
    right: 0;
}

#slideshow .next, #slideshow .prev {
    display: none;
}

#slideshow .next1 {
    display: block;
}

#s1:target #sContent {
    left: 0px;
}

#s1:target .next, #s1:target .prev {
    display: none;
}

#s1:target .next1 {
    display: block;
}

#s2:target #sContent {
    left: -100%;
}

#s2:target .next, #s2:target .prev {
    display: none;
}

#s2:target .next2, #s2:target .prev2 {
    display: block;
}

#s3:target #sContent {
    left: -200%;
}

#s3:target .next, #s3:target .prev {
    display: none;
}

#s3:target .next3, #s3:target .prev3 {
    display: block;
}

#s4:target #sContent {
    left: -300%;
}

#s4:target .next, #s4:target .prev {
    display: none;
}

#s4:target .next4, #s4:target .prev4 {
    display: block;
}

#s5:target #sContent {
    left: -400%;
}

#s5:target .next, #s5:target .prev {
    display: none;
}
#s5:target .next5, #s5:target .prev5 {
    display: block;
}

#s6:target #sContent {
    left: -500%;
}

#s6:target .next, #s6:target .prev {
    display: none;
}
#s6:target .next6, #s6:target .prev6 {
    display: block
}

#s7:target #sContent {
    left: -600%;
}

#s7:target .next, #s7:target .prev {
    display: none;
}

#s7:target .next7, #s7:target .prev7 {
    display: block
}

#s8:target #sContent {
    left: -700%;
}

#s8:target .next, #s8:target .prev {
    display: none;
}
#s8:target .next8, #s8:target .prev8 {
    display: block
}

#s9:target #sContent {
    left: -800%;
}

#s9:target .next, #s9:target .prev {
    display: none;
}

#s9:target .next9, #s9:target .prev9 {
    display: block
}

#s10:target #sContent {
    left: -900%;
}

#s10:target .next, #s10:target .prev {
    display: none;
}

#s10:target .next10, #s10:target .prev10 {
    display: block
}

#s11:target #sContent {
    left: -1000%;
}

#s11:target .next, #s11:target .prev {
    display: none;
}

#s11:target .next11, #s11:target .prev11{
    display: block
}

/*-------------Fin--------------------------------*/
/*-------------------------------------------------*/


/*-------------Actualités-------------------------*/
/*-----------------------------------------------*/

#menu-tab {

    color:white;
}

#page-wrap {
    width: 900px; 
    margin: 10px auto;
      
}

.tabs {
    position: relative;   
    height: 750px; 
    clear: both;
    margin: 40px 0;

    margin-top: 30px;
}

.tab {
      float: left;

}

.tab label {
    display: inline;
    background: url(Divers/cellule_actu.png)0 0 no-repeat;
    padding: 5px; 
    padding-bottom: 4px;
    border: 1px solid white; 
    margin-left: 0px; 
    margin-right: 4px;
    color:white;

}

    .tab label:hover {
	background: url(Divers/cellule_actu.png) 0 -30px no-repeat;
	transition: all .2s ease-in; 
	-webkit-transition: all .2s ease-in; 
	-moz-transition: all .2s ease-in; 
	-o-transition: all .2s ease-in;
}

.tab [type=radio] {
      display: none;   
    }

.content{
     position: absolute;
     top: 30px;
     left: 0;
     background: url(Divers/fond_actu.jpg);
     right: 0;
     bottom: 0;
     padding: 0px;
     border: 1px solid white; 
     overflow: hidden;
     overflow-y: auto;
     margin-bottom: 20px;

}
   
#menu-tab p {
   	color: white;
   	text-align: center;
}
   
 #menu-tab h4 {
 	text-align: center;
 	border: none;
   	color: #ffffff;
   	margin: 10px;
   	padding: 0px;
   	background: rgba(255, 255, 255, .5);

   	
}

#menu-tab img {
   	text-align: center;

   	margin: 10px;
}

[type=radio]:checked ~ label {
      background: orange;
      color: white;
      border-bottom: 1px solid white;
      z-index: 2;
}

[type=radio]:checked ~ label ~ .content {
      z-index: 1;
}

[type=radio]:checked ~ label ~ .content > * {
      opacity: 1;
      
      -webkit-transform: translateX(0);
      -moz-transform:    translateX(0);
      -ms-transform:     translateX(0);
      -o-transform:      translateX(0);
}

/*-------------Fin--------------------------------*/
/*-------------------------------------------------*/


/*-------------Outils--------------------------------*/
/*-------------------------------------------------*/

#tools {


	width: 900px;
}

#tools img {

margin-left: -20px;
}



#tools p {
	text-align: left;

	color:white;
}


#doc p {
	text-align: right;
}



#pdf{
	background: url(Divers/pdf.png) 0 0 no-repeat;
}

#pdf:hover{
	background: url(Divers/pdf.png) 0 -45px no-repeat;
}

#excel{
	background: url(Divers/excel.png) 0 0 no-repeat;
}

#excel:hover{
	background: url(Divers/excel.png) 0 -45px no-repeat;
}

#web{
	background: url(Divers/web.png) 0 0 no-repeat;
}

#web:hover{
	background: url(Divers/web.png) 0 -45px no-repeat;
}

#descrip p {
	padding-top: 50px;
	text-align: center;
 	color: orange;

}